mobile/tablet trial

Author: Alain Bourgeois

src/mainPage/menu.css

@@ -46,6 +46,22 @@
   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;
@@ -59,4 +75,6 @@
 
 .app-nav.mobile-visible {
   transform: translateX(0);
+  display: block;
+  visibility: visible;
 }

src/mainPage/menu.ts

@@ -10,6 +10,7 @@ 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) {
@@ -39,6 +40,12 @@ 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)
   }
 
@@ -101,6 +108,42 @@ const renderMenuItems = async (outliner: OutlineManager, container: HTMLElement)
   container.replaceChildren(...menuItems.map(createMenuButton))
 }
 
+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
@@ -111,15 +154,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')
   }
 }
@@ -135,6 +178,7 @@ 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
   }
@@ -143,6 +187,7 @@ 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
   }
@@ -184,6 +229,8 @@ export const createLeftSideMenu = async (outliner: OutlineManager) => {
       }
     })
   }
+
+  refreshMenu(outliner.context?.environment?.layout === 'mobile' ? 'mobile' : 'desktop')
 }
 
 async function openDashboardPane (outliner: any, pane: string): Promise<void> {

src/outline/manager.js

@@ -54,7 +54,10 @@ export default function (context) {
     if (envLayout === 'mobile' || envLayout === 'desktop') return envLayout
 
     if (typeof window !== 'undefined' && window.matchMedia) {
-      return window.matchMedia('(max-width: 768px)').matches ? 'mobile' : 'desktop'
+      const viewportWidth = Math.round(Math.min(window.innerWidth, window.visualViewport?.width || window.innerWidth))
+      const isTouchInput = window.matchMedia('(pointer: coarse)').matches || navigator.maxTouchPoints > 0
+
+      return viewportWidth <= 768 || (isTouchInput && viewportWidth <= 1024) ? 'mobile' : 'desktop'
     }
 
     return 'desktop'
@@ -476,10 +479,21 @@ export default function (context) {
   async function showDashboard (options = {}) {
     const dashboardContainer = getDashboardContainer()
     const outlineContainer = getOutlineContainer()
+
+    function showContainer (container) {
+      container.removeAttribute('hidden')
+      container.style.display = ''
+    }
+
+    function hideContainer (container) {
+      container.setAttribute('hidden', '')
+      container.style.display = 'none'
+    }
+
     // reuse dashboard if children already inserted
     if (dashboardContainer.childNodes.length > 0 && options.pane) {
-      outlineContainer.setAttribute('hidden', '')
-      dashboardContainer.removeAttribute('hidden')
+      hideContainer(outlineContainer)
+      showContainer(dashboardContainer)
       const tab = dashboardContainer.querySelector(
         `[data-global-pane-name="${options.pane}"]`
       )
@@ -502,8 +516,8 @@ export default function (context) {
     authSession.events.on('logout', closeDashboard)
 
     // finally - switch to showing dashboard
-    outlineContainer.setAttribute('hidden', '')
-    dashboardContainer.removeAttribute('hidden')
+    hideContainer(outlineContainer)
+    showContainer(dashboardContainer)
     dashboardContainer.appendChild(dashboard)
     const tab = dashboardContainer.querySelector(
       `[data-global-pane-name="${options.pane}"]`
@@ -513,8 +527,8 @@ export default function (context) {
     }
 
     function closeDashboard () {
-      dashboardContainer.setAttribute('hidden', '')
-      outlineContainer.removeAttribute('hidden')
+      hideContainer(dashboardContainer)
+      showContainer(outlineContainer)
     }
   }
   this.showDashboard = showDashboard