first init

fe/src/composables/useSideMenu.ts

@@ -0,0 +1,84 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const ENIGMA_ROOT = '.enigma'
+
+function getLayoutNodes() {
+    const root = document.querySelector(ENIGMA_ROOT)
+    if (!root) return null
+
+    return {
+        sideMenu: root.querySelector<HTMLElement>('.side-menu'),
+        content: root.querySelector<HTMLElement>('.content'),
+    }
+}
+
+function isCompactLayout() {
+    return getLayoutNodes()?.sideMenu?.classList.contains('side-menu--collapsed') ?? false
+}
+
+function applyCompactLayout(collapsed: boolean) {
+    const nodes = getLayoutNodes()
+    if (!nodes?.sideMenu || !nodes.content) return
+
+    nodes.sideMenu.classList.toggle('side-menu--collapsed', collapsed)
+    nodes.content.classList.toggle('content--compact', collapsed)
+}
+
+function persistCompactMenu(collapsed: boolean) {
+    queueMicrotask(() => {
+        localStorage.setItem('compactMenu', collapsed.toString())
+    })
+}
+
+export const useSideMenu = () => {
+    const mobileMenuOpen = ref(false)
+    const scrolled = ref(false)
+
+    const toggleCompactMenu = (event: MouseEvent) => {
+        event.preventDefault()
+        const collapsed = !isCompactLayout()
+        applyCompactLayout(collapsed)
+        persistCompactMenu(collapsed)
+    }
+
+    const openMobileMenu = (event: MouseEvent) => {
+        event.preventDefault()
+        mobileMenuOpen.value = true
+    }
+
+    const closeMobileMenu = (event: MouseEvent) => {
+        event.preventDefault()
+        mobileMenuOpen.value = false
+    }
+
+    const onScrollContent = (event: Event) => {
+        const target = event.target as HTMLElement
+        scrolled.value = target.scrollTop > 0
+    }
+
+    const onResize = () => {
+        if (window.innerWidth <= 1600) {
+            applyCompactLayout(true)
+            persistCompactMenu(true)
+        }
+    }
+
+    onMounted(() => {
+        applyCompactLayout(localStorage.getItem('compactMenu') === 'true')
+        window.addEventListener('resize', onResize)
+        onResize()
+    })
+
+    onUnmounted(() => {
+        window.removeEventListener('resize', onResize)
+    })
+
+    return {
+        mobileMenuOpen,
+        scrolled,
+        toggleCompactMenu,
+        openMobileMenu,
+        closeMobileMenu,
+        onScrollContent,
+    }
+}