Skip to content

Instantly share code, notes, and snippets.

@KonnorRogers

KonnorRogers/flux-sidebar.html

Last active January 23, 2026 18:37
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save KonnorRogers/e1bec2994e9b03f9bfb773091610267e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save KonnorRogers/e1bec2994e9b03f9bfb773091610267e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
flux-sidebar.html
<!-- https://fluxui.dev/docs/installation sidebar, pulled off of devTools for demonstration purposes. -->
<ui-sidebar class="[grid-area:sidebar] z-1 flex flex-col gap-4 [:where(&amp;)]:w-64 p-4 data-flux-sidebar-collapsed-desktop:w-14 data-flux-sidebar-collapsed-desktop:px-2 data-flux-sidebar-collapsed-desktop:cursor-e-resize rtl:data-flux-sidebar-collapsed-desktop:cursor-w-resize max-lg:data-flux-sidebar-cloak:hidden data-flux-sidebar-on-mobile:data-flux-sidebar-collapsed-mobile:-translate-x-full data-flux-sidebar-on-mobile:data-flux-sidebar-collapsed-mobile:rtl:translate-x-full z-20! data-flux-sidebar-on-mobile:start-0! data-flux-sidebar-on-mobile:fixed! data-flux-sidebar-on-mobile:top-0! data-flux-sidebar-on-mobile:min-h-dvh! data-flux-sidebar-on-mobile:max-h-dvh! max-h-dvh overflow-y-auto overscroll-contain max-lg:bg-white dark:bg-zinc-900 lg:w-54 lg:mr-16 max-lg:p-8 lg:pl-0 max-lg:w-64 py-12 gap-7 pr-20 max-lg:border-r border-transparent dark:border-white/10 print:hidden text-sm transition-transform" x-init="$el.classList.add('transition-transform')" x-persist="sidebar" wire:scroll="" collapsible="mobile" sticky="" x-data="" data-flux-sidebar="" style="position: sticky; top: 0px; max-height: calc(100dvh - 0px);" data-flux-sidebar-on-desktop="">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment