Save Menu State?

[prodigerati]

First off, thanks for sharing this clean design. :)

I'm new to tailwindcss and alpinejs so I apologize if these questions are outside the scope of the code shared here.

1. How do I save the isSidebarOpen state?

   • I would like when the user clicks to open or close the menu the option survives a reload.

2. Upon reload the menu Flashes open then to a closed state each time the page is reloaded.

Note: I am using Rails 6.1, Turbolinks, webpack

Any assistance with these 2 issues would be very helpful.

Thank you,

[Kamona-WD]

I am sorry for my late.

I apologize if these questions are outside the scope of the code shared here.

No need to apologize.

How do I save the isSidebarOpen state?

You can use localstorage to persist user settings something like

const setup = () => {
  function getSidebarStateFromLocalStorage() {
    // if it already there, use it
    if (window.localStorage.getItem('isSidebarOpen')) {
      return JSON.parse(window.localStorage.getItem('isSidebarOpen'))
    }

    // else return the initial state you want
    return (
     false
    )
  }

  function setSidebarStateToLocalStorage(value) {
    window.localStorage.setItem('isSidebarOpen', value)
  }

return {
      loading: true,
      isSidebarOpen: getSidebarStateFromLocalStorage(),
      toggleSidbarMenu() {
        this.isSidebarOpen = !this.isSidebarOpen
        setSidebarStateToLocalStorage(this.isSidebarOpen)
      },
      isSettingsPanelOpen: false,
      isSearchBoxOpen: false,
  }
}

i hope this helps and this what you want.

Upon reload the menu Flashes open then to a closed state each time the page is reloaded

quick fix for that using x-cloak x-cloak reference

in html

<aside
    x-cloak
    x-transition:enter="transition transform duration-300"
    x-transition:enter-start="-translate-x-full opacity-30  ease-in"
    x-transition:enter-end="translate-x-0 opacity-100 ease-out"
    ...

in css

[x-cloak] { display: none; }

see this demo on code pen

I hope this helps you, if not or if there is any other problem, ask in any time.

Sorry if there something wrong in my English, it's not my first language

[prodigerati]

This is perfect, thank you for the help!