Always use the mobile Menu
What'd be the best way to use the mobile menu at all times? The goal is a slideover, that defaults closed on page refresh.
Thanks
10 Replies
$panel->sidebarFullyCollapsibleOnDesktop()
That allows the menu to close, but it shifts the entire layout. Ideally, the formatting used within the browser in small/medium tailwind sizes would be the solution all the time
And I'm fine with publishing the view and hacking a solution, but I'd prefer only to tweak the absolute minimum
I'm not quite sure I understand you correctly, but if you're trying to use the sm/md formatting for everything on all desktop sizes, what about just overriding the tailwind config for lg/xl to a really large number?
I'm only targeting the menu. lg/xl are used in page layouts as well.
The goal is a slideover menu with the dim background in all screen sizes. Exactly how it currently functions on mobile.
Oh, you're just referring to how it shows when it opens. The functionality from
$panel->sidebarFullyCollapsibleOnDesktop() works as far as everything else.sidebarFullyCollapsibleOnDesktop was my first attempt, but it has a bunch of logic to make it display different in desktop.
It separates logic by mobile and lg/xl. I'm attempting to ignore the desktop logic and always show the existing mobile menu when the hamburger is pressed
I’m afraid your only option then would be with CSS.
In combination with fully collapsible to keep the functionality. Shouldn’t be too difficult.
If it were just css probably not. The alpine toggles are size dependent and a bit much. I'll take another stab. Thanks guys
It looks like alpine is using
lg: classes as well, so you could probably still do it with CSS.I'm open to a better way, but for those looking to do the same I published 2 files (layout.index, sidebar.item)
in my theme.css file, I added:
.fi-sidebar {
@apply fixed inset-y-0 start-0 z-30 grid h-screen w-[--sidebar-width] content-start overflow-hidden bg-white transition-all duration-75 dark:bg-gray-900 !important
}
in layout.index:
- I removed lg:hidden from fi-sidebar-close-overlay
- I removed lg:ps-[--sidebar-width] in two spots
in sidebar.item:
- I removed window.matchMedia(
(max-width: 1024px)).matches &&