Block Sidebar with black transparent background on cell phone

[carlospccarvalho]

I copied Dashboard 2 from the sidebar block but it's showing up with a transparent black background on mobile. Is the block code wrong? @zernonia

[rasensio]

Same issue here

[rasensio]

Looks like is a dialog when in mobile
....<div data-dismissable-layer="" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0" data-state="open" data-sidebar="sidebar" data-mobile="true" tabindex="-1" class="fixed z-50 gap-4 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 inset-y-0 left-0 h-full border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&amp;>button]:hidden" style="--sidebar-width: 18rem; pointer-events: auto;"><div class="flex h-full w-full flex-col"><div data-sidebar="header" class="flex flex-col gap-2 p-2"><!-- --><ul data-sidebar="menu" class="flex w-full min-w-0 flex-col gap-1"><li data-sidebar="menu-item" class="group/menu-item relative"><div class="h-10"><!--v-if--><img height="50" alt="Logo" data-nuxt-img="" srcset="/_ipx/h_50/img/logo-dark.svg 1x, /_ipx/h_100/img/logo-dark.svg 2x" class="" src="/_ipx/h_50/img/logo-dark.svg"><!-- <NuxtImg src="/img/iso.svg" class="block md:hidden" alt="Logo" :height="height"/> --></div><!-- ...

[rasensio]

For now I fixed by adding class="md:bg-transparent bg-gray-900" to SidebarHeader and SidebarContent components.

[Whbbit1999]

Some css variables are not loaded. Check the latest documentation. And add them.

[x1y9]

Same issue here, where is the lastest documentation? should I add the variables manually?

[Whbbit1999]

You can try it😎