Merge pull request #19 from virtua-tech/feature/JETUT-168_Fix_unreach…

…able_bottom_of_side_menu JETUT-168: fixed navbar markup+css so it's properly scrollable and all items are fully reachable, across all screen widths
jakartaee · Sep 18, 2023 · ad94964 · ad94964
2 parents 9a180f9 + 1720c55
commit ad94964
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 8 deletions.
diff --git a/src/css/main.css b/src/css/main.css
@@ -1,5 +1,6 @@
 @media screen and (max-width: 1023.5px) {
-  aside.toc.sidebar {
+  aside.toc.sidebar,
+  aside > .toolbar {
     display: none;
   }
 

diff --git a/src/css/nav.css b/src/css/nav.css
@@ -31,7 +31,6 @@
 .nav {
   background: var(--nav-background);
   position: relative;
-  top: var(--toolbar-height);
   height: var(--nav-height);
 }
 
@@ -43,11 +42,9 @@
 
 @media screen and (min-width: 1024px) {
   .nav {
-    top: var(--navbar-height);
+    top: calc(var(--navbar-height) + var(--toolbar-height));
     box-shadow: none;
     position: sticky;
-    height: var(--nav-height--desktop);
-    border-top: var(--toolbar-height) solid var(--toolbar-background);
   }
 }
 

diff --git a/src/css/vars.css b/src/css/vars.css
@@ -135,12 +135,11 @@
   /* dimensions and positioning */
   --navbar-height: calc(63 / var(--rem-base) * 1rem);
   --toolbar-height: calc(45 / var(--rem-base) * 1rem);
-  --drawer-height: var(--toolbar-height);
+  --drawer-height: calc(45 / var(--rem-base) * 1rem);
   --body-top: var(--navbar-height);
   --body-min-height: calc(100vh - var(--body-top));
   --nav-height: calc(var(--body-min-height) - var(--toolbar-height));
-  --nav-height--desktop: var(--body-min-height);
-  --nav-panel-menu-height: calc(100% - var(--drawer-height));
+  --nav-panel-menu-height: calc(100% - var(--toolbar-height));
   --nav-panel-explore-height: calc(50% + var(--drawer-height));
   --nav-width: calc(270 / var(--rem-base) * 1rem);
   --toc-top: calc(var(--body-top) + var(--toolbar-height));

diff --git a/src/partials/nav.hbs b/src/partials/nav.hbs
@@ -1,4 +1,5 @@
 <div class="nav-container"{{#if page.component}} data-component="{{page.component.name}}" data-version="{{page.version}}"{{/if}}>
+  <div class="toolbar"></div>
   <aside class="nav">
     <div class="panels">
 {{> nav-menu}}