Merge pull request #51 from stackabletech/fix/sidebar-menu-css

Fix: sidebar and toolbar CSS

Author: fhennig

src/css/nav.css

@@ -1,3 +1,13 @@
+/* This file contains the CSS for the sidebar navigation.
+ * The vertical navigation at the top is in the header.css
+ * At less than 770px, the navbar disappears and is opened with
+ * a button in the toolbar.
+ *
+ * Some of the responsiveness is about adjusting the height of the
+ * menu. On smaller screens the vertical menu disappears, so the height
+ * of the sidebar menu needs to be adjusted.
+ */
+
 .nav-container {
   position: fixed;
   top: var(--navbar-height);
@@ -32,7 +42,7 @@
   background: var(--nav-background);
   position: relative;
   top: var(--toolbar-height);
-  height: var(--nav-height);
+  height: calc(100% - var(--navbar-sub-height));
 }
 
 @media screen and (min-width: 769px) {
@@ -43,10 +53,11 @@
 
 @media screen and (min-width: 1024px) {
   .nav {
-    top: var(--navbar-height);
+    top: calc(var(--navbar-height) + var(--navbar-sub-height));
     box-shadow: none;
     position: sticky;
     height: var(--nav-height--desktop);
+    margin-top: var(--navbar-sub-height);
   }
 }
 
@@ -63,7 +74,7 @@ html.is-clipped--nav {
 .nav-panel-menu {
   overflow-y: scroll;
   overscroll-behavior: none;
-  height: var(--nav-panel-menu-height);
+  height: 100%;
 }
 
 .nav-panel-menu:not(.is-active) .nav-menu {

src/css/toolbar.css

@@ -1,3 +1,8 @@
+/* The toolbar contains a home link and breakcrumbs and is found
+ * right above the article content.
+ * On smaller screens it also contains a button to show the sidebar menu.
+ */
+
 .toolbar {
   color: var(--toolbar-font-color);
   align-items: center;
@@ -12,6 +17,12 @@
   z-index: var(--z-index-toolbar);
 }
 
+@media screen and (min-width: 1024px) {
+  .toolbar {
+    top: calc(var(--navbar-height) + var(--navbar-sub-height));
+  }
+}
+
 .toolbar a {
   color: inherit;
 }

src/css/vars.css

@@ -123,13 +123,10 @@
   --navbar-height: calc(73 / var(--rem-base) * 1rem);
   --navbar-sub-height: calc(45 / var(--rem-base) * 1rem);
   --toolbar-height: calc(45 / var(--rem-base) * 1rem);
-  --drawer-height: var(--toolbar-height);
   --body-top: calc(var(--navbar-height) + var(--navbar-sub-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-explore-height: calc(50% + var(--drawer-height));
   --nav-width: calc(270 / var(--rem-base) * 1rem);
   --toc-top: calc(var(--body-top) + var(--toolbar-height));
   --toc-height: calc(100vh - var(--toc-top) - 2.5rem);