How to edit background blur of mobile menu ?

[samyakb]

I would like to disable background blur for mobile menu. After looking through codebase, I found this which had class max-md:bg-fd-background/80 but I would like to override the class to customize. It does provide className through aside props, but I guess its not exposed to be customized.

fumadocs/packages/ui/src/components/layout/sidebar.tsx

Lines 111 to 120 in 74ba3a9

	<Base.SidebarList
	id="nd-sidebar"
	blockScrollingWidth={768} // md
	{...props.aside}
	className={cn(
	'fixed z-30 flex flex-col bg-fd-card text-sm md:sticky md:top-0 md:h-dvh md:w-[var(--fd-c-sidebar)] md:min-w-[var(--fd-sidebar-width)] md:border-e md:ps-[calc(var(--fd-c-sidebar)-var(--fd-sidebar-width))]',
	'max-md:inset-0 max-md:bg-fd-background/80 max-md:pt-14 max-md:text-[15px] max-md:backdrop-blur-md max-md:data-[open=false]:hidden',
	props.aside?.className,
	)}
	>

Is there any way to override the aside values ?

[fuma-nama]

I will recommend CSS selectors, the sidebar has an id to select from CSS. You can do further styling there.

[samyakb]

Thank you, that worked.