Initial version of sidebar nav

Signed-off-by: lucperkins <lucperkins@gmail.com>

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
+  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

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 }}

layouts/docs/single.html

@@ -4,6 +4,5 @@
 
 {{ define "main" }}
 {{ partial "hero.html" . }}
-{{ partial "nav.html" . }}
 {{ partial "article.html" . }}
 {{ end }}

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>

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>