alligned mielstone 2k

Author: timea-solid

src/mainPage/menu.css

@@ -65,22 +65,6 @@
   z-index: 100;
 }
 
-html[data-layout='mobile'] .app-nav {
-  position: fixed;
-  top: var(--app-header-height, 4.5rem);
-  left: 0;
-  bottom: 0;
-  z-index: 110;
-  width: min(80vw, 320px);
-  max-width: min(80vw, 320px);
-  background: var(--color-background);
-  border-right: 1px solid var(--color-border);
-  padding: 0.75rem;
-  overflow-y: auto;
-  box-sizing: border-box;
-  transition: transform 0.25s ease-in-out;
-}
-
 .app-nav.mobile-hidden {
   transform: translateX(-100%);
   transition: transform 0.25s ease-in-out;

src/mainPage/menu.ts

@@ -12,7 +12,6 @@ type MenuItem = {
 
 const ensureMenuSkeleton = () => {
   const root = document.querySelector('[role="main"]') || document.body
-  const headerHost = document.getElementById('mainSolidUiHeader') || document.querySelector('solid-ui-header') || document.getElementById('PageHeader')
 
   let navMenu = document.getElementById('NavMenu') as HTMLElement | null
   if (!navMenu) {
@@ -42,12 +41,6 @@ const ensureMenuSkeleton = () => {
     toggle.type = 'button'
     toggle.setAttribute('aria-label', 'Toggle navigation menu')
     toggle.textContent = '\u2630'
-  }
-
-  toggle.slot = 'navigation-toggle'
-  if (headerHost && toggle.parentElement !== headerHost) {
-    headerHost.appendChild(toggle)
-  } else if (!headerHost && toggle.parentElement !== root) {
     root.insertBefore(toggle, root.firstChild)
   }
 
@@ -145,42 +138,6 @@ const renderMenuItems = async (outliner: OutlineManager, container: HTMLElement)
   setActiveMenuItem(container, container.dataset.activePaneName)
 }
 
-const applyMobileMenuStyles = (navMenu: HTMLElement, isOpen: boolean) => {
-  navMenu.hidden = false
-  navMenu.style.position = 'fixed'
-  navMenu.style.top = 'var(--app-header-height, 4.5rem)'
-  navMenu.style.left = '0'
-  navMenu.style.bottom = '0'
-  navMenu.style.width = 'min(80vw, 320px)'
-  navMenu.style.maxWidth = 'min(80vw, 320px)'
-  navMenu.style.zIndex = '110'
-  navMenu.style.display = 'block'
-  navMenu.style.visibility = 'visible'
-  navMenu.style.overflowY = 'auto'
-  navMenu.style.background = 'var(--color-background)'
-  navMenu.style.borderRight = '1px solid var(--color-border)'
-  navMenu.style.boxShadow = '0 0.75rem 2rem rgba(0, 0, 0, 0.2)'
-  navMenu.style.transform = isOpen ? 'translateX(0)' : 'translateX(-100%)'
-}
-
-const clearDesktopMenuStyles = (navMenu: HTMLElement) => {
-  navMenu.hidden = false
-  navMenu.style.position = ''
-  navMenu.style.top = ''
-  navMenu.style.left = ''
-  navMenu.style.bottom = ''
-  navMenu.style.width = ''
-  navMenu.style.maxWidth = ''
-  navMenu.style.zIndex = ''
-  navMenu.style.display = ''
-  navMenu.style.visibility = ''
-  navMenu.style.overflowY = ''
-  navMenu.style.background = ''
-  navMenu.style.borderRight = ''
-  navMenu.style.boxShadow = ''
-  navMenu.style.transform = ''
-}
-
 export const refreshMenu = (layout: 'mobile' | 'desktop') => {
   const navMenu = document.getElementById('NavMenu') as HTMLElement | null
   const toggle = document.getElementById('MenuToggleBtn') as HTMLButtonElement | null
@@ -191,15 +148,15 @@ export const refreshMenu = (layout: 'mobile' | 'desktop') => {
   if (layout === 'mobile') {
     navMenu.classList.add('mobile-hidden')
     navMenu.classList.remove('mobile-visible')
-    applyMobileMenuStyles(navMenu, false)
     toggle.hidden = false
     overlay.hidden = true
+    navMenu.hidden = false
     toggle.setAttribute('aria-expanded', 'false')
   } else {
     navMenu.classList.remove('mobile-hidden', 'mobile-visible')
-    clearDesktopMenuStyles(navMenu)
     toggle.hidden = true
     overlay.hidden = true
+    navMenu.hidden = false
     toggle.setAttribute('aria-expanded', 'false')
   }
 }
@@ -215,7 +172,6 @@ export const createLeftSideMenu = async (outliner: OutlineManager) => {
     if (!navMenu || !menuToggle || !menuOverlay) return
     navMenu.classList.remove('mobile-visible')
     navMenu.classList.add('mobile-hidden')
-    applyMobileMenuStyles(navMenu, false)
     menuToggle.setAttribute('aria-expanded', 'false')
     menuOverlay.hidden = true
   }
@@ -224,7 +180,6 @@ export const createLeftSideMenu = async (outliner: OutlineManager) => {
     if (!navMenu || !menuToggle || !menuOverlay) return
     navMenu.classList.remove('mobile-hidden')
     navMenu.classList.add('mobile-visible')
-    applyMobileMenuStyles(navMenu, true)
     menuToggle.setAttribute('aria-expanded', 'true')
     menuOverlay.hidden = false
   }

src/outline/manager.js

@@ -336,25 +336,20 @@ export default function (context) {
       )
     }
 
-    const widget = UI.tabs.tabWidget({
-      dom,
-      subject: me,
-      items,
-      renderMain,
-      renderTab,
-      ordered: true,
-      orientation: 0,
-      backgroundColor: '#eeeeee', // black?
-      selectedTab: options.selectedTab,
-      onClose: options.onClose
-    })
-
-    const widgetNav = widget.querySelector('nav')
-    if (widgetNav) {
-      widgetNav.style.display = 'none'
-    }
-
-    div.appendChild(widget)
+    div.appendChild(
+      UI.tabs.tabWidget({
+        dom,
+        subject: me,
+        items,
+        renderMain,
+        renderTab,
+        ordered: true,
+        orientation: 0,
+        backgroundColor: '#eeeeee', // black?
+        selectedTab: options.selectedTab,
+        onClose: options.onClose
+      })
+    )
     return div
   }
   this.getDashboard = globalAppTabs
@@ -631,7 +626,9 @@ export default function (context) {
       paneIconTray.setAttribute('aria-label', 'Pane views')
       paneIconTray.classList.add('paneIconTray')
 
-      const relevantPanes = await getRelevantPanes(subject, context)
+      const relevantPanes = options.hideList
+        ? []
+        : await getRelevantPanes(subject, context)
       tr.firstPane = requiredPane || getPane(relevantPanes, subject)
       const paneNumber = relevantPanes.indexOf(tr.firstPane)
 
@@ -805,7 +802,11 @@ export default function (context) {
       UI.widgets.makeDraggable(strong, subject)
     }
 
-    header.appendChild(await renderPaneIconTray(td))
+    header.appendChild(
+      await renderPaneIconTray(td, {
+        hideList: showHeader
+      })
+    )
 
     // set DOM methods
     tr.firstChild.tabulatorSelect = function () {