From 7605c37be2512398466228273214918799e7133e Mon Sep 17 00:00:00 2001
From: lucperkins <lucperkins@gmail.com>
Date: Fri, 6 Mar 2020 12:23:46 -0800
Subject: [PATCH] Initial version of sidebar nav

Signed-off-by: lucperkins <lucperkins@gmail.com>
---
 assets/sass/style.sass        | 26 +++++++++++++++++++-
 layouts/docs/list.html        |  3 +--
 layouts/docs/single.html      |  1 -
 layouts/partials/article.html |  7 +++---
 layouts/partials/nav.html     | 46 ++++++++++++++++++++++++++---------
 5 files changed, 63 insertions(+), 20 deletions(-)

diff --git a/assets/sass/style.sass b/assets/sass/style.sass
index 43142aa..2810fb7 100644
--- a/assets/sass/style.sass
+++ b/assets/sass/style.sass
@@ -28,6 +28,8 @@ $primary: $grpc-green
 $secondary: $grpc-blue
 $secondary-dark: darken($secondary, 15%)
 $link: $secondary-dark
+$code: $primary
+$code-background: $white-bis
 $navbar-height: 5rem
 $navbar-item-img-max-height: $navbar-height * 0.6
 
@@ -165,4 +167,26 @@ $colors: mergeColorMaps(("secondary": ($secondary, $white)), $colors)
   top: $navbar-height + 2rem
 
 .is-constrained
-  max-width: 80ch
\ No newline at end of file
+  max-width: 80ch
+
+=active
+  color: $black
+  font-weight: 700
+
+.nav
+  &-section
+    .title
+      &.is-active
+        +active        
+
+    ul.nav-section-links
+      margin-top: 1rem
+
+      li
+        font-size: 1rem
+
+        &.is-active
+          +active
+
+    & + &
+      margin-top: 1.5rem
\ No newline at end of file
diff --git a/layouts/docs/list.html b/layouts/docs/list.html
index 4b26952..ed8f3cd 100644
--- a/layouts/docs/list.html
+++ b/layouts/docs/list.html
@@ -4,6 +4,5 @@
 
 {{ define "main" }}
 {{ partial "hero.html" . }}
-{{ partial "nav.html" . }}
-{{ partial "content.html" (dict "content" .Content "size" "medium") }}
+{{ partial "article.html" . }}
 {{ end }}
\ No newline at end of file
diff --git a/layouts/docs/single.html b/layouts/docs/single.html
index 7910205..c864b12 100644
--- a/layouts/docs/single.html
+++ b/layouts/docs/single.html
@@ -4,6 +4,5 @@
 
 {{ define "main" }}
 {{ partial "hero.html" . }}
-{{ partial "nav.html" . }}
 {{ partial "article.html" . }}
 {{ end }}
diff --git a/layouts/partials/article.html b/layouts/partials/article.html
index 2585d07..1cd03e8 100644
--- a/layouts/partials/article.html
+++ b/layouts/partials/article.html
@@ -1,10 +1,8 @@
-
+<section class="section">
   <div class="container">
     <div class="columns is-variable is-8">
       <div class="column is-one-quarter">
-        <div class="is-sticky">
-          TOC
-        </div>
+        {{ partial "nav.html" . }}
       </div>
 
       <div class="column">
@@ -12,3 +10,4 @@
       </div>
     </div>
   </div>
+</section>
\ No newline at end of file
diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html
index a0cd16b..c5b22b3 100644
--- a/layouts/partials/nav.html
+++ b/layouts/partials/nav.html
@@ -1,16 +1,38 @@
 {{ $here           := .RelPermalink }}
 {{ $docsSections   := (index (where site.Sections "Section" "docs") 0).Sections }}
 {{ $currentSection := .CurrentSection }}
-<div class="tabs is-medium is-toggle-rounded is-centered">
-  <ul>
-    {{ range $docsSections }}
-    {{ $title            := .Title | upper }}
-    {{ $isCurrentSection := eq $currentSection .CurrentSection }}
-    <li{{ if $isCurrentSection }} class="is-active"{{ end }}>
-      <a href="{{ .RelPermalink }}">
-        {{ $title }}
-      </a>
-    </li>
-    {{ end }}
-  </ul>
+
+<div class="nav">
+  {{ range $docsSections }}
+  <div class="nav-section">
+    {{ $isHere := eq $here .RelPermalink }}
+    <a class="title is-size-4 is-size-5-mobile{{ if $isHere }} is-active{{ end }}" href="{{ .RelPermalink }}">
+      {{ if $isHere }}
+      <span class="icon has-text-secondary">
+        <i class="fas fa-arrow-right"></i>
+      </span>
+      {{ end }}
+  
+      {{ .Title }}
+    </a>
+
+    <ul class="nav-section-links">
+      {{ range .RegularPages }}
+      {{ $isHere := eq $here .RelPermalink }}
+      {{ $title := cond (isset .Params "short") .Params.short .Title }}
+      <li{{ if $isHere }} class="is-active"{{ end }}>
+        <a href="{{ .RelPermalink }}">
+          {{ if $isHere }}
+          <span class="icon has-text-secondary">
+            <i class="fas fa-arrow-right"></i>
+          </span>
+          {{ end }}
+
+          {{ $title }}
+        </a>
+      </li>
+      {{ end }}
+    </ul>
+  </div>
+  {{ end }}
 </div>