Add accordion docs nav

Signed-off-by: lucperkins <lucperkins@gmail.com>
This commit is contained in:
lucperkins 2020-03-09 10:49:25 -07:00
parent 4edb8c9e39
commit d65941f774
3 changed files with 26 additions and 18 deletions

View File

@ -90,7 +90,7 @@ $colors: mergeColorMaps(("secondary": ($secondary, $white)), $colors)
// @import "bulma/sass/components/breadcrumb" // @import "bulma/sass/components/breadcrumb"
@import "bulma/sass/components/card" @import "bulma/sass/components/card"
// @import "bulma/sass/components/dropdown" // @import "bulma/sass/components/dropdown"
// @import "bulma/sass/components/level" @import "bulma/sass/components/level"
// @import "bulma/sass/components/list" // @import "bulma/sass/components/list"
// @import "bulma/sass/components/media" // @import "bulma/sass/components/media"
@import "bulma/sass/components/menu" @import "bulma/sass/components/menu"
@ -174,7 +174,7 @@ $colors: mergeColorMaps(("secondary": ($secondary, $white)), $colors)
max-width: 80ch max-width: 80ch
=active =active
color: $black color: $secondary-dark
font-weight: 700 font-weight: 700
.nav .nav
@ -184,10 +184,10 @@ $colors: mergeColorMaps(("secondary": ($secondary, $white)), $colors)
+active +active
ul.nav-section-links ul.nav-section-links
margin-top: 1rem margin: 1rem 0 2rem 1.25rem
li li
font-size: 1rem font-size: 1.25rem
&.is-active &.is-active
+active +active

View File

@ -1,2 +1 @@
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.0.2/dist/alpine.js" defer></script> <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.0.2/dist/alpine.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

View File

@ -4,20 +4,28 @@
<div class="nav is-hidden-mobile" > <div class="nav is-hidden-mobile" >
{{ range $docsSections }} {{ range $docsSections }}
<div class="nav-section"> {{ $thisSection := eq .CurrentSection $currentSection }}
<div class="nav-section" x-data="{ open: {{ $thisSection }} }">
{{ $isHere := eq $here .RelPermalink }} {{ $isHere := eq $here .RelPermalink }}
<a class="title is-size-4 is-size-5-mobile{{ if $isHere }} is-active{{ end }}" href="{{ .RelPermalink }}"> <nav class="level">
{{ if $isHere }} <div class="level-left">
<span class="icon has-text-secondary"> <a class="title is-size-4 is-sizee-5-mobile{{ if $isHere }} is-active{{ end }}" href="{{ .RelPermalink }}">
<i class="fas fa-arrow-right"></i>
</span>
{{ end }}
{{ .Title }} {{ .Title }}
</a> </a>
</div>
<ul class="nav-section-links"> {{ if .RegularPages }}
{{ range .RegularPages }} <div class="level-right">
<span class="level-item" @click="open = !open">
<i class="fas" :class="{ 'fa-chevron-down': !open, 'fa-chevron-up': open }"></i>
</span>
</div>
{{ end }}
</nav>
{{ with .RegularPages }}
<ul class="nav-section-links" x-show="open">
{{ range . }}
{{ $isHere := eq $here .RelPermalink }} {{ $isHere := eq $here .RelPermalink }}
{{ $title := cond (isset .Params "short") .Params.short .Title }} {{ $title := cond (isset .Params "short") .Params.short .Title }}
<li{{ if $isHere }} class="is-active"{{ end }}> <li{{ if $isHere }} class="is-active"{{ end }}>
@ -33,6 +41,7 @@
</li> </li>
{{ end }} {{ end }}
</ul> </ul>
{{ end }}
</div> </div>
{{ end }} {{ end }}
</div> </div>