[FIX] Sidebar pin toggle behavior.

Author: Seiger

js/main.js

@@ -98,37 +98,25 @@ document.addEventListener('DOMContentLoaded', function () {
 });
 
 /**
- * Handle pinning and hover behavior.
+ * Sidebar pin toggle behavior.
  */
 window.sMultisite.sPinner = function sPinner(key) {
-    const saved = localStorage.getItem(key) === 'true';
     return {
-        pinned: saved,
-        open: saved,
-        skipLeave: false,
-        togglePin() {
-            this.pinned = !this.pinned;
-            this.open = this.pinned;
-            this.skipLeave = true;
-            setTimeout(() => this.skipLeave = false, 50);
-            localStorage.setItem(key, this.pinned);
+        open: false,
+
+        init() {
+            const v = localStorage.getItem(key);
+            this.open = (v === 'true' || v === '1');
             window.sMultisite.queueLucide();
         },
-        handleEnter() {
-            if (!this.pinned) {
-                this.open = true;
-                window.sMultisite.queueLucide();
-            }
-        },
-        handleLeave() {
-            if (this.skipLeave) return;
-            if (!this.pinned) {
-                this.open = false;
-                window.sMultisite.queueLucide();
-            }
+
+        toggle() {
+            this.open = !this.open;
+            localStorage.setItem(key, this.open ? '1' : '0');
+            window.sMultisite.queueLucide();
         },
-    }
-}
+    };
+};
 
 /**
  * Queue Lucide icon rendering.

views/partials/menu.blade.php

@@ -13,7 +13,12 @@
             <span x-show="open">@lang('sMultisite::global.configure')</span>
         </a>
     </nav>
-    <span @click="togglePin" role="button" tabindex="0" class="s-pin-btn" :class="open ? 'left-24' : 'left-4'" title="Pin sidebar / Unpin sidebar">
-        <i :data-lucide="pinned ? 'pin-off' : 'pin'" class="w-4 h-4 pointer-events-none"></i>
+    <span @click="toggle()" role="button" tabindex="0" class="s-pin-btn" :class="open ? 'left-24' : 'left-4'" title="Toggle sidebar">
+        <template x-if="open">
+            @svg('tabler-pinned', 'w-4 h-4 pointer-events-none')
+        </template>
+        <template x-if="!open">
+            @svg('tabler-pin', 'w-4 h-4 pointer-events-none')
+        </template>
     </span>
 </aside>