colapse menu button improved

Author: timea-solid

README.md

@@ -109,4 +109,6 @@ Upon hover apply background color e6dcff and selected or active to be background
 * Raptor mini: the menu dissapears 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.
 
-* Raptor mini: i want to imporve the left side menu on mobile. When the menu is visible it should be higher, the top part should be on top of the header, folding out and in with the rest of the menu. It should have an x close button and it should say menu. The locor of that top line of the header should be the color of the header 332746
+* Raptor mini: i want to imporve the left side menu on mobile. When the menu is visible it should be higher, the top part should be on top of the header, folding out and in with the rest of the menu. It should have an x close button and it should say menu. The locor of that top line of the header should be the color of the header 332746
+
+* Raptor mini: the menu, on desktop, has a button to fold in or out. I want the same behavior to occur also when i simply click the folded in menu: it should expend. Not just when i click the dedicated button

src/mainPage/menu.css

@@ -179,9 +179,10 @@
   border: 1px solid var(--color-border);
   border-radius: 999px;
   color: var(--color-text);
-  font-size: 0.75rem;
+  font-size: 1.3rem;
   line-height: 1;
   cursor: pointer;
+  box-shadow: 0 1px 4px rgba(124,77,255,0.12);
 }
 
 @media (max-width: 768px) {

src/mainPage/menu.ts

@@ -287,6 +287,26 @@ export const createLeftSideMenu = async (subject: NamedNode, outliner: OutlineMa
     menuOverlay.hidden = false
   }
 
+  const collapseBtn = document.getElementById('MenuCollapseBtn') as HTMLButtonElement | null
+
+  const expandDesktopMenu = () => {
+    if (!navMenu || !collapseBtn) return
+    if (!menuCollapsed) return
+    menuCollapsed = false
+    saveMenuCollapsedState(menuCollapsed)
+    applyMenuCollapsedState(navMenu)
+  }
+
+  if (navMenu) {
+    navMenu.addEventListener('click', (event) => {
+      const isMobile = outliner.context?.environment?.layout === 'mobile'
+      const clickedCollapseButton = (event.target as HTMLElement).closest('#MenuCollapseBtn')
+      if (!isMobile && menuCollapsed && !clickedCollapseButton) {
+        expandDesktopMenu()
+      }
+    })
+  }
+
   if (menuToggle) {
     menuToggle.hidden = false
     menuToggle.addEventListener('click', () => {
@@ -297,8 +317,6 @@ export const createLeftSideMenu = async (subject: NamedNode, outliner: OutlineMa
       }
     })
   }
-
-  const collapseBtn = document.getElementById('MenuCollapseBtn') as HTMLButtonElement | null
   if (collapseBtn) {
     collapseBtn.addEventListener('click', () => {
       menuCollapsed = !menuCollapsed