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);