Filament•2y ago

Make sidebar closed by default on mobile.

When you login inside Admin panel on mobile for first time, you get the sidebar opened by default. How can i disable that? Ofcourse it would be opened again if i closed and never left opened. But i want to keep it closed for when a user logs in for first time. Thanks.

7 Replies

Dan Harrin•2y ago

sounds like a bug, you should try and fix it in a PR :)

Mansoor KhanOP•2y ago

I would be happy to do that. I am on it. It would be my second PR 🙂 I am not sure where to look or get started..

Mansoor KhanOP•2y ago

This should be false by default i guess?

Dan Harrin•2y ago

that would break the collapsible sidebar on deskop as that uses the same isOpen and should probably be open by default? i dont know if there is a good way to fix this

Mansoor KhanOP•2y ago

ah you are right. it would break it. May be we could store isOpen to null by default and if its not persisted yet. we do a check based on screen width? x-init="sidebar.isOpen = window.innerWidth >= 768" hard to think about the fix that would not break the existing...

Dan Harrin•2y ago

that would be a problem if someone customised the tailwind breakpoints

Mansoor KhanOP•2y ago

hmm. I might have to move with this workaround.. If find a solution if will write here or send a pr. thanks Dan 🙂 I came up with following work around. In case if anyone needs it.

<script>
  document.addEventListener('DOMContentLoaded', () => {
    Alpine.store("mobileSidebar", {
      isClosed: Alpine.$persist(false).as("isClosed"),
      close() {
        this.isClosed = true;
      },
    });

    const filamentSidebarCloseOverlay = document.querySelector('.filament-sidebar-close-overlay');

    if (! Alpine.store('mobileSidebar').isClosed && filamentSidebarCloseOverlay) {
      if (window.innerWidth <= 768) {
        filamentSidebarCloseOverlay.click();
        Alpine.store('mobileSidebar').close();
      }
    }
  });
</script>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    Alpine.store("mobileSidebar", {
      isClosed: Alpine.$persist(false).as("isClosed"),
      close() {
        this.isClosed = true;
      },
    });

    const filamentSidebarCloseOverlay = document.querySelector('.filament-sidebar-close-overlay');

    if (! Alpine.store('mobileSidebar').isClosed && filamentSidebarCloseOverlay) {
      if (window.innerWidth <= 768) {
        filamentSidebarCloseOverlay.click();
        Alpine.store('mobileSidebar').close();
      }
    }
  });
</script>

Gaming

Programming

Make sidebar closed by default on mobile.