Side bar nav updates and icons (#95)

Needing to add buttons to the sidebar, this does it!

Closes #84 

Solution
========

- Note: These icons are the placeholder icons
- There is no way to get in and update the mdbook `toc` setup, so
instead we are just adding the icons via css.
- Assumption is that there will be a different dark mode, but that might
not be.
- Assumption is that there might be a different active/hover (or
`currentColor` use), but not doing that until we have final icons
- Changed the spacing a bit from the original mocks per a design
discussion

book.toml

@@ -16,6 +16,7 @@ git-repository-url = "https://github.com/frequency-chain/docs"
 edit-url-template = "https://github.com/frequency-chain/docs/blob/main/{path}"
 preferred-dark-theme = "coal"
 additional-css = [
+  "css/side-nav.css",
   "css/header.css",
   "css/extended.css",
   "css/highlight.css",

css/side-nav.css

@@ -0,0 +1,102 @@
+:root {
+  --icon-provider: url("../images/icons/icon-provider.svg");
+  --icon-gateway: url("../images/icons/icon-gateway.svg");
+  --icon-sso: url("../images/icons/icon-sso.svg");
+  --icon-core: url("../images/icons/icon-core.svg");
+}
+
+/* Light theme */
+.light {
+  --icon-provider: url("../images/icons/icon-provider.svg");
+  --icon-gateway: url("../images/icons/icon-gateway.svg");
+  --icon-sso: url("../images/icons/icon-sso.svg");
+  --icon-core: url("../images/icons/icon-core.svg");
+}
+
+/* Dark theme */
+.coal {
+  --icon-provider: url("../images/icons/icon-provider-dark.svg");
+  --icon-gateway: url("../images/icons/icon-gateway-dark.svg");
+  --icon-sso: url("../images/icons/icon-sso-dark.svg");
+  --icon-core: url("../images/icons/icon-core-dark.svg");
+}
+
+/* Dark mode preference */
+@media (prefers-color-scheme: dark) {
+  .light.no-js {
+    /* Override light theme variables if needed */
+    --icon-provider: url("../images/icons/icon-provider-dark.svg");
+    --icon-gateway: url("../images/icons/icon-gateway-dark.svg");
+    --icon-sso: url("../images/icons/icon-sso-dark.svg");
+    --icon-core: url("../images/icons/icon-core-dark.svg");
+  }
+}
+
+/* Basic icon styling for all chapter items */
+#toc > .chapter > li.chapter-item > a:first-of-type::before {
+  content: "";
+  display: block;
+  flex: 0 0 45px;
+  width: 45px;
+  height: 45px;
+  margin-inline-end: 1rem;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+/* Individual icons for specific items (1 indexed) */
+#toc > .chapter li.chapter-item:nth-child(2) > a:first-of-type::before {
+  background-image: var(--icon-provider);
+}
+
+#toc > .chapter li.chapter-item:nth-child(3) > a:first-of-type::before {
+  background-image: var(--icon-gateway);
+}
+
+#toc > .chapter li.chapter-item:nth-child(4) > a:first-of-type::before {
+  background-image: var(--icon-sso);
+}
+
+#toc > .chapter li.chapter-item:nth-child(5) > a:first-of-type::before {
+  background-image: var(--icon-core);
+}
+
+/* Nav Bar */
+
+#toc .chapter li.chapter-item:nth-child(1) {
+  /* Hide the "overview" page */
+  display: none;
+}
+
+#toc > .chapter > li.chapter-item {
+  margin-block-start: 4.5rem;
+}
+
+#toc > .chapter > li > a:first-of-type {
+  padding-inline-start: 1rem;
+  font-weight: bold;
+}
+
+#toc > .chapter > li > .section {
+  padding-inline-start: calc(45px + 2rem);
+}
+
+#toc > .chapter li {
+  display: flex;
+  align-items: center;
+}
+
+#toc > .chapter li.chapter-item > a:first-of-type {
+  padding-inline-start: 0;
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+
+.chapter li > a.toggle {
+  flex: 0 0 24px;
+  width: 24px;
+  height: 24px;
+  padding: 0px;
+}

theme/book.js

@@ -397,9 +397,16 @@ function playground_text(playground, hidden = true) {
   var sidebarLinks = document.querySelectorAll("#sidebar a");
   var sidebarToggleButton = document.getElementById("sidebar-toggle");
   var sidebarResizeHandle = document.getElementById("sidebar-resize-handle");
+  var sidebarToggleAnchor = document.getElementById("sidebar-toggle-anchor");
   var firstContact = null;
 
   function showSidebar() {
+    if (sidebarToggleAnchor.checked !== true) {
+      sidebarToggleAnchor.checked = true;
+    }
+  }
+
+  function doShowSidebar() {
     body.classList.remove("sidebar-hidden");
     body.classList.add("sidebar-visible");
     Array.from(sidebarLinks).forEach(function (link) {
@@ -423,6 +430,16 @@ function playground_text(playground, hidden = true) {
   });
 
   function hideSidebar() {
+    if (sidebarToggleAnchor.checked !== false) {
+      sidebarToggleAnchor.checked = false;
+    }
+  }
+
+  function doHideSidebar() {
+    var current_width = parseInt(document.documentElement.style.getPropertyValue("--sidebar-width"), 10);
+    if (current_width <= 150) {
+      document.documentElement.style.setProperty("--sidebar-width", "200px");
+    }
     body.classList.remove("sidebar-visible");
     body.classList.add("sidebar-hidden");
     Array.from(sidebarLinks).forEach(function (link) {
@@ -436,21 +453,12 @@ function playground_text(playground, hidden = true) {
   }
 
   // Toggle sidebar
-  sidebarToggleButton.addEventListener("click", function sidebarToggle() {
-    if (body.classList.contains("sidebar-hidden")) {
-      var current_width = parseInt(document.documentElement.style.getPropertyValue("--sidebar-width"), 10);
-      if (current_width < 150) {
-        document.documentElement.style.setProperty("--sidebar-width", "150px");
-      }
-      showSidebar();
-    } else if (body.classList.contains("sidebar-visible")) {
-      hideSidebar();
+  sidebarToggleAnchor.addEventListener("change", function sidebarToggle(event) {
+    const isOpen = event.target.checked;
+    if (isOpen) {
+      doShowSidebar();
     } else {
-      if (getComputedStyle(sidebar)["transform"] === "none") {
-        hideSidebar();
-      } else {
-        showSidebar();
-      }
+      doHideSidebar();
     }
   });
 
@@ -466,10 +474,8 @@ function playground_text(playground, hidden = true) {
     if (pos < 20) {
       hideSidebar();
     } else {
-      if (body.classList.contains("sidebar-hidden")) {
-        showSidebar();
-      }
-      pos = Math.min(pos, window.innerWidth - 100);
+      showSidebar();
+      pos = Math.min(Math.max(150, pos), window.innerWidth - 100);
       document.documentElement.style.setProperty("--sidebar-width", pos + "px");
     }
   }

theme/css/chrome.css

@@ -14,12 +14,10 @@ html {
   scrollbar-color: var(--scrollbar) var(--bg);
 }
 
-.content h2 a:link
-{
-  color: var(--links-hover)
+.content h2 a:link {
+  color: var(--links-hover);
 }
 
-
 #searchresults a,
 a > .hljs {
   color: var(--links);
@@ -122,7 +120,7 @@ a > .hljs {
 }
 
 .menu-title {
-  display: inline-block;
+  display: none;
   font-weight: 300;
   font-size: 2.4rem;
   line-height: var(--menu-bar-height);
@@ -607,13 +605,12 @@ ul#searchresults span.teaser em {
   margin-inline-start: auto;
   padding: 0 10px;
   user-select: none;
-  opacity: 0.68;
 }
 
 /* Switch to Chevron */
 .chapter li > a.toggle {
   background-color: var(--sidebar-fg);
-  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="chevron"><polyline points="9 18 15 12 9 6"></polyline></svg>');
+  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="chevron"><polyline points="9 18 15 12 9 6"></polyline></svg>');
   background-repeat: no-repeat;
   mask-repeat: no-repeat;
 }
@@ -644,7 +641,7 @@ ul#searchresults span.teaser em {
 
 .chapter li.chapter-item {
   line-height: 1.5em;
-  margin-block-start: 0.6em;
+  margin-block-start: 1em;
 }
 
 .chapter li.expanded > a.toggle div {

theme/css/variables.css

@@ -1,7 +1,7 @@
 /* Globals */
 
 :root {
-  --sidebar-width: 300px;
+  --sidebar-width: 360px;
   --sidebar-resize-indicator-width: 8px;
   --sidebar-resize-indicator-space: 2px;
   --page-padding: 15px;
@@ -71,7 +71,7 @@
   --headers: #19455e;
   --headers-alt: #f77c47;
 
-  --sidebar-bg: #19455E;
+  --sidebar-bg: #19455e;
   --sidebar-fg: #fff;
   --sidebar-non-existant: var(--sidebar-fg);
   --sidebar-active: #4ba0a5;