Persist sidebar menu group open/closed state in localStorage

resources/js/alpine/sidebarGroup.js

@@ -0,0 +1,28 @@
+
+export default (key) => ({
+    init() {
+        const storageKey = `sidebar_${key}`
+        const saved = localStorage.getItem(storageKey)
+        const hasCurrent = !!this.$el.querySelector('[data-current]')
+        let skipNext = false
+
+        if ((hasCurrent || saved === 'open') && !this.$el.hasAttribute('data-open')) {
+            if (hasCurrent) {
+                skipNext = true
+            }
+            this.$el.querySelector('button')?.click()
+        }
+
+        this._observer = new MutationObserver(() => {
+            if (skipNext) {
+                skipNext = false
+                return
+            }
+            localStorage.setItem(storageKey, this.$el.hasAttribute('data-open') ? 'open' : 'closed')
+        })
+        this._observer.observe(this.$el, { attributes: true, attributeFilter: ['data-open'] })
+    },
+    destroy() {
+        this._observer?.disconnect()
+    },
+})

resources/js/app.js

@@ -8,6 +8,7 @@ import {
 } from '../../vendor/livewire/livewire/dist/livewire.esm.js'
 import codeBlock from './alpine/codeBlock.js'
 import copyMarkdown from './alpine/copyMarkdown.js'
+import sidebarGroup from './alpine/sidebarGroup.js'
 import docsearch from '@docsearch/js'
 import Atropos from 'atropos'
 import '@docsearch/css'
@@ -62,6 +63,7 @@ window.gsap = gsap
 // Alpine
 Alpine.data('codeBlock', codeBlock)
 Alpine.data('copyMarkdown', copyMarkdown)
+Alpine.data('sidebarGroup', sidebarGroup)
 Alpine.magic('refAll', (el) => {
     return (refName) => {
         return Array.from(el.querySelectorAll(`[x-ref="${refName}"]`))

resources/views/components/layouts/dashboard.blade.php

@@ -125,7 +125,7 @@ class="min-h-screen bg-white font-poppins antialiased dark:bg-zinc-900 dark:text
                     </flux:sidebar.item>
                 @endif
 
-                <flux:sidebar.group expandable :expanded="false" heading="Community" class="mt-4 grid">
+                <flux:sidebar.group expandable :expanded="false" heading="Community" class="mt-4 grid" x-data="sidebarGroup('community')">
                     <flux:sidebar.item href="{{ route('customer.showcase.index') }}" :current="request()->routeIs('customer.showcase.*')">
                         Showcase
                     </flux:sidebar.item>
@@ -150,7 +150,7 @@ class="min-h-screen bg-white font-poppins antialiased dark:bg-zinc-900 dark:text
                         $ownedTeam = auth()->user()->ownedTeam;
                         $teamMemberships = auth()->user()->activeTeamMemberships();
                     @endphp
-                    <flux:sidebar.group expandable :expanded="false" heading="Teams" class="mt-4 grid">
+                    <flux:sidebar.group expandable :expanded="false" heading="Teams" class="mt-4 grid" x-data="sidebarGroup('teams')">
                         @if($ownedTeam)
                             <flux:sidebar.item href="{{ route('customer.team.index') }}" :current="request()->routeIs('customer.team.index')">
                                 {{ $ownedTeam->name }}
@@ -172,7 +172,7 @@ class="min-h-screen bg-white font-poppins antialiased dark:bg-zinc-900 dark:text
                 @endif
 
                 @feature(App\Features\ShowPlugins::class)
-                    <flux:sidebar.group expandable :expanded="false" heading="Developer" class="mt-4 grid">
+                    <flux:sidebar.group expandable :expanded="false" heading="Developer" class="mt-4 grid" x-data="sidebarGroup('developer')">
                         <flux:sidebar.item href="{{ route('customer.developer.onboarding') }}" :current="request()->routeIs('customer.developer.onboarding', 'customer.developer.dashboard')">
                             Hub
                         </flux:sidebar.item>