introduced js and css for mobile header

Author: anastascho

src/css/sections-header.css

@@ -438,13 +438,15 @@ html.is-clipped--navbar {
   }
 
   body:has(.sections-body) {
-    padding-top: unset;
+    padding-top: 0;
   }
 
   .sections-body .sections-docu-title {
     display: block;
-    margin-left: 15px;
+    margin-left: 35px;
     white-space: nowrap;
     color: #8da5bf;
+    margin-top: -2rem;
+    z-index: 900;
   }
 }

src/js/05-mobile-navbar.js

@@ -35,4 +35,74 @@
   //     console.log('section-body not found')
   //   }
   // }
+
+  const header = document.querySelector('header')
+  const navbarToggle = document.querySelector('.nav-toggle')
+  const sectionBody = document.querySelector('.sections-body')
+  const toolbar = document.querySelector('.toolbar')
+
+  if (!navbarToggle) return
+
+  navbarToggle.addEventListener('click', toggleMobileNav)
+
+  function toggleMobileNav (e) {
+    e.stopPropagation()
+    document.documentElement.classList.toggle('is-clipped--navbar')
+    this.classList.toggle('is-active')
+    const menuId = this.dataset.target
+    const menu = document.getElementById(menuId)
+    if (menu) {
+      menu.classList.toggle('is-active')
+      if (menu.classList.contains('is-active')) {
+        adjustMenuHeight(menu)
+      } else {
+        menu.style.maxHeight = ''
+      }
+    }
+  }
+
+  function adjustMenuHeight (menu) {
+    const expectedMaxHeight = window.innerHeight - menu.getBoundingClientRect().top
+    const actualMaxHeight = parseInt(window.getComputedStyle(menu).maxHeight, 10)
+    if (actualMaxHeight !== expectedMaxHeight) {
+      menu.style.maxHeight = expectedMaxHeight + 'px'
+    }
+  }
+
+  if (!sectionBody) return
+
+  let windowWidth = window.innerWidth
+  adjustLayoutForWindowSize(windowWidth)
+
+  window.addEventListener('resize', function () {
+    const newWindowWidth = window.innerWidth
+    if (newWindowWidth !== windowWidth) {
+      windowWidth = newWindowWidth
+      adjustLayoutForWindowSize(windowWidth)
+    }
+  })
+
+  function adjustLayoutForWindowSize (windowWidth) {
+    if (windowWidth < 1024) {
+      removeHeaderAndAdjustPadding()
+    } else {
+      restoreHeaderAndAdjustPadding()
+    }
+  }
+
+  function removeHeaderAndAdjustPadding () {
+    if (header && document.body.contains(header)) {
+      header.remove()
+      document.body.style.paddingTop = '0'
+      if (toolbar) toolbar.style.top = '0'
+    }
+  }
+
+  function restoreHeaderAndAdjustPadding () {
+    if (header && !document.body.contains(header)) {
+      document.body.insertBefore(header, document.body.firstChild)
+      document.body.style.paddingTop = '3.5rem'
+      if (toolbar) toolbar.style.top = '3.5rem'
+    }
+  }
 })()

src/partials/toolbar.hbs

@@ -4,9 +4,6 @@
   <a href="{{{relativize this}}}" class="home-link{{#if @root.page.home}} is-current{{/if}}"></a>
   {{/with}}
 {{> breadcrumbs}}
-  <span class="sections-docu-title">
-    {{site.title}}
-  </span>
 {{> page-versions}}
   {{#if (and page.fileUri (not env.CI))}}
   <div class="edit-this-page"><a href="{{page.fileUri}}">Edit this Page</a></div>