change 01-nav.js to scrollable nav in desktop screen

OP-TED · Apr 17, 2024 · 6ceebfb · 6ceebfb
1 parent b24abbb
commit 6ceebfb
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 12 deletions.
diff --git a/src/css/nav.css b/src/css/nav.css
@@ -7,6 +7,12 @@
     padding-left: 0;
     padding-right: 0;
   }
+  /* .nav {
+    top: calc((var(--navbar-height) / 2) + var(--globan-height) + var(--toolbar-height));
+    box-shadow: 0.5px 0 3px var(--nav-border-color);
+    position: absolute;
+    height: var(--nav-height);
+  } */
 }
 
 .nav-container {
@@ -26,6 +32,7 @@
 
   .nav {
     box-shadow: 0.5px 0 3px var(--nav-border-color);
+    height: var(--nav-height);
   }
 }
 
@@ -61,7 +68,6 @@
 .nav {
   background: var(--nav-background);
   position: sticky;
-  top: calc((var(--navbar-height) / 2) + var(--globan-height));
   height: var(--nav-height--desktop);
   overflow-y: auto;
   display: flex;

diff --git a/src/js/01-nav.js b/src/js/01-nav.js
@@ -117,8 +117,17 @@
     navToggle.classList.add('is-active')
     navContainer.classList.add('is-active')
     var bounds = nav.getBoundingClientRect()
-    var expectedHeight = window.innerHeight - Math.round(bounds.top)
-    if (Math.round(bounds.height) !== expectedHeight) nav.style.height = expectedHeight + 'px'
+    //console.log('BOUNDS', bounds)
+
+    const toolbar = document.querySelector('.toolbar')
+    const toolbarBottom = toolbar.getBoundingClientRect().bottom
+    var expectedHeight = window.innerHeight - toolbarBottom
+    //console.log('EXPECTED HEIGHT', expectedHeight)
+    if (Math.round(bounds.height) !== expectedHeight) {
+      nav.style.height = expectedHeight + 'px'
+    }
+    nav.style.top = toolbarBottom + 'px'
+    //nav.style.backgroundColor = 'red'
     html.addEventListener('click', hideNav)
   }
 

diff --git a/src/js/07-scrollable-header-nav.js b/src/js/07-scrollable-header-nav.js
@@ -1,29 +1,26 @@
 window.addEventListener('scroll', function () {
   const nav = document.querySelector('.nav')
   const navMenu = document.querySelector('.nav-panel-menu')
+  const navExplore = document.querySelector('.nav-panel-explore')
+
   const toolbar = document.querySelector('.toolbar')
   const screenHeight = window.innerHeight
 
   // Calculate the height of the div based on its top position
   var divTop = nav.getBoundingClientRect().top
+  const drawerHeight = navExplore.getBoundingClientRect().height
 
-  const drawerHeight = parseFloat(window.getComputedStyle(document.documentElement).getPropertyValue('--drawer-height'))
-  console.log('DRAWER', drawerHeight)
-
-  // If the width of the page is less than 1024px, change the top of the nav
+  //If the width of the page is less than 1024px, change the top of the nav
   if (window.matchMedia('(max-width: 1023.5px)').matches) {
-    divTop = divTop - toolbar.getBoundingClientRect().height
+    const toolbaBottom = toolbar.getBoundingClientRect().bottom
+    divTop = toolbaBottom + 10
   }
   const divHeight = screenHeight - divTop
 
   const divMenuHeight = divHeight - drawerHeight
   // Ensure height is non-negative
   const calculatedHeight = Math.max(0, divHeight)
 
-  console.log('DIV HEIGHT', divHeight)
-  console.log('SCREEN', screenHeight)
-  console.log('TOP', divTop)
-
   // Apply the calculated height to the div
   nav.style.height = calculatedHeight + 'px'
   navMenu.style.height = divMenuHeight + 'px'