mobile header improved style

Author: timea-solid

README.md

@@ -106,5 +106,7 @@ onclick: () => openDashboardPane(outliner, element.tabName || element.paneName)
 * 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
 
-* 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.
+* 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

src/mainPage/menu.css

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
+  padding-top: 0.75rem;
 }
 
 .menu-item {
@@ -45,7 +46,7 @@
 .menu-toggle {
   position: fixed;
   top: 0.5rem;
-  left: 2.75rem;
+  left: 1rem;
   z-index: 300;
   display: inline-flex;
   align-items: center;
@@ -68,23 +69,81 @@
 
 .app-nav {
   position: relative;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-background);
 }
 
-.app-nav.mobile-hidden {
-  transform: translateX(-100%);
-  transition: transform 0.25s ease-in-out;
+.app-nav.mobile-hidden,
+.app-nav.mobile-visible {
   position: fixed;
   left: 0;
-  top: 4.5rem;
+  top: 0;
   bottom: 0;
-  z-index: 110;
   width: min(80vw, 320px);
+  height: 100vh;
+  min-height: 100vh;
+  transform: translateX(-100%);
+  transition: transform 0.25s ease-in-out;
+  z-index: 999;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-background);
+  border-right: none;
+  box-shadow: none;
+  overflow: hidden;
+  padding-top: 3.75rem;
 }
 
 .app-nav.mobile-visible {
   transform: translateX(0);
-  display: block;
   visibility: visible;
+  background: var(--color-background);
+}
+
+.menu-header {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  align-items: center;
+  justify-content: flex-start;
+  background-color: #42345a !important;
+  color: #ffffff;
+  font-weight: 600;
+  min-height: 3.75rem;
+  height: 3.75rem;
+  box-sizing: border-box;
+  width: 100%;
+  z-index: 1000;
+  border-right: none;
+  box-shadow: none;
+}
+
+.app-nav.mobile-hidden .menu-header,
+.app-nav.mobile-visible .menu-header {
+  display: flex;
+}
+
+.menu-header-title {
+  font-size: 1.25rem;
+  color: #ffffff;
+}
+
+.menu-close {
+  border: none;
+  background: transparent;
+  color: #ffffff;
+  font-size: 1.25rem;
+  cursor: pointer;
+  padding-left: 1.25rem;
+  line-height: 1;
+}
+
+.menu-close:hover,
+.menu-close:focus {
+  opacity: 0.85;
 }
 
 .app-nav.collapsed {

src/mainPage/menu.ts

@@ -67,6 +67,24 @@ const ensureMenuSkeleton = () => {
     navMenu.className = 'app-nav'
     navMenu.setAttribute('aria-label', 'App navigation')
 
+    const headerEl = document.createElement('div')
+    headerEl.className = 'menu-header'
+
+    const closeBtn = document.createElement('button')
+    closeBtn.id = 'MenuCloseBtn'
+    closeBtn.className = 'menu-close'
+    closeBtn.type = 'button'
+    closeBtn.setAttribute('aria-label', 'Close menu')
+    closeBtn.textContent = '✕'
+    headerEl.appendChild(closeBtn)
+
+    const title = document.createElement('span')
+    title.className = 'menu-header-title'
+    title.textContent = 'Menu'
+    headerEl.appendChild(title)
+
+    navMenu.appendChild(headerEl)
+
     const authStateEl = document.createElement('div')
     authStateEl.id = 'AuthState'
     authStateEl.className = 'menu-auth-state'
@@ -78,6 +96,24 @@ const ensureMenuSkeleton = () => {
     navMenu.appendChild(contentEl)
 
     root.insertBefore(navMenu, root.firstChild)
+  } else if (!navMenu.querySelector('.menu-header')) {
+    const headerEl = document.createElement('div')
+    headerEl.className = 'menu-header'
+
+    const closeBtn = document.createElement('button')
+    closeBtn.id = 'MenuCloseBtn'
+    closeBtn.className = 'menu-close'
+    closeBtn.type = 'button'
+    closeBtn.setAttribute('aria-label', 'Close menu')
+    closeBtn.textContent = '✕'
+    headerEl.appendChild(closeBtn)
+
+    const title = document.createElement('span')
+    title.className = 'menu-header-title'
+    title.textContent = 'Menu'
+    headerEl.appendChild(title)
+
+    navMenu.insertBefore(headerEl, navMenu.firstChild)
   }
 
   let toggle = document.getElementById('MenuToggleBtn') as HTMLButtonElement | null
@@ -275,6 +311,11 @@ export const createLeftSideMenu = async (subject: NamedNode, outliner: OutlineMa
     menuOverlay.addEventListener('click', closeMobileMenu)
   }
 
+  const closeBtn = document.getElementById('MenuCloseBtn') as HTMLButtonElement | null
+  if (closeBtn) {
+    closeBtn.addEventListener('click', closeMobileMenu)
+  }
+
   if (navMenuContent) {
     await renderMenuItems(subject, outliner, navMenuContent)