colapsible menu icon added

Author: timea-solid

README.md

@@ -104,4 +104,7 @@ onclick: () => openDashboardPane(outliner, element.tabName || element.paneName)
 * Auto: each #sym:MenuItem has an icon which i want displayed on the left side of each menu item when rendered
 
 * Auto: don't add each menu item in a button looking border. Simply list them.
-Upon hover apply background color e6dcff and selected or active to be background color: cbb9ff
+Upon hover apply background color e6dcff and selected or active to be background color: cbb9ff
+
+* Raptor mini: the menu dissapears not when on mobile. That is great.
+I want the menu to have a tiny button on the bottom margin left with an arrow to the left or right for expanding the menu or for making it small. This is only for web. When we make it small it folds and only displays the icons of teh menu items, when it is expanded it should also add the labels to the menu items.

src/mainPage/menu.css

@@ -66,6 +66,10 @@
   z-index: 100;
 }
 
+.app-nav {
+  position: relative;
+}
+
 .app-nav.mobile-hidden {
   transform: translateX(-100%);
   transition: transform 0.25s ease-in-out;
@@ -81,4 +85,48 @@
   transform: translateX(0);
   display: block;
   visibility: visible;
+}
+
+.app-nav.collapsed {
+  width: 4.5rem;
+  min-width: 4.5rem;
+}
+
+.app-nav.collapsed .menu-content {
+  gap: 0.25rem;
+  align-items: center;
+}
+
+.app-nav.collapsed .menu-item {
+  justify-content: center;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.app-nav.collapsed .menu-item-label {
+  display: none;
+}
+
+.menu-collapse {
+  position: fixed;
+  left: 3rem;
+  bottom: 5rem;
+  z-index: 320;
+  width: 1.25rem;
+  height: 1.25rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--color-border);
+  border-radius: 999px;
+  color: var(--color-text);
+  font-size: 0.75rem;
+  line-height: 1;
+  cursor: pointer;
+}
+
+@media (max-width: 768px) {
+  .menu-collapse {
+    display: none;
+  }
 }

src/mainPage/menu.ts

@@ -13,7 +13,51 @@ type MenuItem = {
   onclick: () => void | Promise<void>
 }
 
+const MENU_COLLAPSED_KEY = 'solid-panes-menu-collapsed'
+let menuCollapsed = false
+
+const loadMenuCollapsedState = (): boolean => {
+  try {
+    return localStorage.getItem(MENU_COLLAPSED_KEY) === 'true'
+  } catch (error) {
+    return false
+  }
+}
+
+const saveMenuCollapsedState = (collapsed: boolean): void => {
+  try {
+    localStorage.setItem(MENU_COLLAPSED_KEY, String(collapsed))
+  } catch (error) {
+    // ignore storage errors
+  }
+}
+
+const updateMenuCollapseButton = (): void => {
+  const collapseBtn = document.getElementById('MenuCollapseBtn') as HTMLButtonElement | null
+  if (!collapseBtn) return
+  collapseBtn.textContent = menuCollapsed ? '\u203A' : '\u2039'
+  collapseBtn.setAttribute('aria-label', menuCollapsed ? 'Expand navigation menu' : 'Collapse navigation menu')
+}
+
+const updateCollapseButtonPosition = (navMenu: HTMLElement | null, collapseBtn: HTMLButtonElement | null): void => {
+  if (!navMenu || !collapseBtn) return
+  const navRect = navMenu.getBoundingClientRect()
+  const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16
+  const buttonWidth = parseFloat(getComputedStyle(collapseBtn).width) || 1.25 * rootFontSize
+  const offsetRem = (navRect.width - buttonWidth / 2) / rootFontSize
+  collapseBtn.style.setProperty('left', `${offsetRem.toFixed(3)}rem`, 'important')
+}
+
+const applyMenuCollapsedState = (navMenu: HTMLElement | null): void => {
+  if (!navMenu) return
+  navMenu.classList.toggle('collapsed', menuCollapsed)
+  updateMenuCollapseButton()
+  const collapseBtn = document.getElementById('MenuCollapseBtn') as HTMLButtonElement | null
+  updateCollapseButtonPosition(navMenu, collapseBtn)
+}
+
 const ensureMenuSkeleton = () => {
+  menuCollapsed = loadMenuCollapsedState()
   const root = document.querySelector('[role="main"]') || document.body
 
   let navMenu = document.getElementById('NavMenu') as HTMLElement | null
@@ -55,6 +99,18 @@ const ensureMenuSkeleton = () => {
     overlay.hidden = true
     document.body.appendChild(overlay)
   }
+
+  let collapseBtn = document.getElementById('MenuCollapseBtn') as HTMLButtonElement | null
+  if (!collapseBtn) {
+    collapseBtn = document.createElement('button')
+    collapseBtn.id = 'MenuCollapseBtn'
+    collapseBtn.className = 'menu-collapse'
+    collapseBtn.type = 'button'
+    collapseBtn.setAttribute('aria-label', 'Collapse navigation menu')
+    collapseBtn.textContent = '\u2039'
+    collapseBtn.hidden = true
+    document.body.appendChild(collapseBtn)
+  }
 }
 
 const getMenuItems = async (subject: NamedNode, outliner: any): Promise<MenuItem[]> => {
@@ -146,22 +202,28 @@ const renderMenuItems = async (subject: NamedNode, outliner: OutlineManager, con
 export const refreshMenu = (layout: 'mobile' | 'desktop') => {
   const navMenu = document.getElementById('NavMenu') as HTMLElement | null
   const toggle = document.getElementById('MenuToggleBtn') as HTMLButtonElement | null
+  const collapseBtn = document.getElementById('MenuCollapseBtn') as HTMLButtonElement | null
   const overlay = document.getElementById('MenuOverlay') as HTMLElement | null
 
-  if (!navMenu || !toggle || !overlay) return
+  if (!navMenu || !toggle || !overlay || !collapseBtn) return
 
   if (layout === 'mobile') {
     navMenu.classList.add('mobile-hidden')
     navMenu.classList.remove('mobile-visible')
     toggle.hidden = false
+    collapseBtn.hidden = true
     overlay.hidden = true
     navMenu.hidden = false
+    navMenu.classList.remove('collapsed')
     toggle.setAttribute('aria-expanded', 'false')
   } else {
     navMenu.classList.remove('mobile-hidden', 'mobile-visible')
     toggle.hidden = true
+    collapseBtn.hidden = false
     overlay.hidden = true
     navMenu.hidden = false
+    applyMenuCollapsedState(navMenu)
+    updateCollapseButtonPosition(navMenu, collapseBtn)
     toggle.setAttribute('aria-expanded', 'false')
   }
 }
@@ -200,6 +262,15 @@ export const createLeftSideMenu = async (subject: NamedNode, outliner: OutlineMa
     })
   }
 
+  const collapseBtn = document.getElementById('MenuCollapseBtn') as HTMLButtonElement | null
+  if (collapseBtn) {
+    collapseBtn.addEventListener('click', () => {
+      menuCollapsed = !menuCollapsed
+      saveMenuCollapsedState(menuCollapsed)
+      applyMenuCollapsedState(navMenu)
+    })
+  }
+
   if (menuOverlay) {
     menuOverlay.addEventListener('click', closeMobileMenu)
   }