Skip to content

Commit

Permalink
Merge pull request #195 from gethinode/develop
Browse files Browse the repository at this point in the history 
Multi-level sidebar nav
  • Loading branch information
@markdumay
markdumay authored Apr 5, 2023
2 parents cba1566 + eb000e9 commit d6357b7
Show file tree
Hide file tree
Showing 5 changed files with 120 additions and 52 deletions.
8 changes: 4 additions & 4 deletions assets/scss/app.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,9 +53,6 @@
// Import Bootstrap helpers
@import "bootstrap/scss/helpers";

// Import Bootstrap utilities
@import "bootstrap/scss/utilities/api";

// Import Font Awesome
// scss-docs-start awesome
@import "@fortawesome/fontawesome-free/scss/fontawesome";
Expand Down Expand Up @@ -97,4 +94,7 @@
{{ end }}

// Import theme placeholder
@import "theme/theme.scss";
@import "theme/theme.scss";

// Import Bootstrap utilities API
@import "bootstrap/scss/utilities/api";
18 changes: 17 additions & 1 deletion assets/scss/components/_sidebar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,15 @@
}

.sidebar-item {
color: black;
color: rgba(0, 0, 0, 0.65);
margin-left: 0 !important;
padding-left: 0.85rem !important;

&.active,
&:hover,
&:focus {
color: black;
}
}

.btn-toggle {
Expand Down Expand Up @@ -61,6 +69,14 @@
@include color-mode(dark) {
.sidebar-item {
color: var(--bs-tertiary-color);
margin-left: 0 !important;
padding-left: 0.85rem !important;

&.active,
&:hover,
&:focus {
color: var(--bs-secondary-color);
}
}

.btn-toggle {
Expand Down
140 changes: 96 additions & 44 deletions layouts/partials/assets/sidebar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,57 +2,109 @@
{{- $section := $page.Section }}
{{- $data := .menu -}}

{{- define "partials/sidebar/group.html" -}}
{{- $page := .page -}}
{{- $index := .index -}}
{{- $level := .level -}}
{{- $baseURL := .baseURL -}}
{{- $group := .group -}}

{{- $doc_slug := $group.title | urlize -}}
{{- $href := printf "%s/" (relLangURL (path.Join $baseURL $doc_slug)) -}}
{{ $collapsed := strings.HasPrefix $page.RelPermalink $href }}
{{ warnf "Page: %s" $href }}

<li class="mb-1">
<button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed" data-bs-toggle="collapse" data-bs-target="#sidebar-collapse-{{ $index }}-{{ $level }}" aria-expanded="{{ if $collapsed }}true{{ else }}false{{ end }}">
<div class="text-start flex-fill">{{ $group.title }}</div>
</button>
<div class="collapse {{ if $collapsed }}show{{ end }}" id="sidebar-collapse-{{ $index }}-{{ $level }}">
<ul class="btn-toggle-nav list-unstyled fw-normal {{ if eq $level 0}} pb-1 {{ end }}ps-3">
{{- range $item := $group.pages -}}
{{- if $item.pages -}}
{{ partial "partials/sidebar/group.html" (dict
"page" $page
"index" $index
"level" (add $level 1)
"baseURL" $href
"group" $item
)
}}
{{- else -}}
{{ partial "partials/sidebar/item.html" (dict
"page" $page
"sectionBreak" false
"level" $level
"baseURL" $href
"title" $item.title
)
}}
{{ end -}}
{{- end }}
</ul>
</div>
</li>
{{ end -}}

{{- define "partials/sidebar/item.html" -}}
{{ $page := .page }}
{{ $sectionBreak := .sectionBreak }}
{{- $level := .level -}}
{{ $baseURL := .baseURL}}
{{ $title := .title}}

{{- $doc_slug := $title | urlize -}}
{{- $href := printf "%s/" (relLangURL (path.Join $baseURL $doc_slug)) -}}
{{ $active := eq $page.RelPermalink $href }}

{{ if eq $level 0}}
<li class="mt-1 mb-1 {{ if $sectionBreak }}border-top{{ end }}"></li>
{{- $sectionBreak = false }}
<li>
<ul class="btn-toggle-nav list-unstyled fw-bold pb-1">
<li>
<a href="{{ $href }}" class="sidebar-item text-decoration-none rounded {{ if $active }}active{{ end }}">
{{ $title }}
</a>
</li>
</ul>
</li>
{{ else }}
<li>
<a href="{{ $href }}" class="sidebar-item text-decoration-none rounded small {{ if $active }}active{{ end }}">
{{ $title }}
</a>
</li>
{{ end }}
{{ end -}}

{{ if $data }}
<nav class="sidebar flex-shrink-0 ps-1 pt-3" aria-label="{{ (strings.FirstUpper $section) }} navigation">
{{- $url := split $page.Permalink "/" -}}
{{- $page_slug := index $url (sub (len $url) 2) -}}
{{- $sectionBreak := false }}
{{ $level := 0}}
{{ $baseURL := relLangURL (path.Join $section site.Params.docs.version) }}

<ul class="list-unstyled ps-0">
{{- range $index, $group := $data -}}
{{- $link := $group.title -}}
{{- $link_slug := $link | urlize -}}

{{- if $group.pages -}}
{{- $link = index $group.pages 0 -}}
{{- $link_slug = $link.title | urlize -}}
{{- end -}}

{{- $group_slug := $group.title | urlize -}}
{{- $is_active_group := eq $page.Params.group $group_slug -}}

{{- if $group.pages }}
{{- range $index, $item := $data -}}
{{- if $item.pages }}
{{- $sectionBreak = true }}
<li class="mb-1">
<button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed" data-bs-toggle="collapse" data-bs-target="#sidebar-collapse-{{ $index }}" aria-expanded="{{ if $is_active_group }}true{{ else }}false{{ end }}">
<div class="text-start flex-fill">{{ $group.title }}</div>
</button>
<div class="collapse {{ if $is_active_group }}show{{ end }}" id="sidebar-collapse-{{ $index }}">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
{{- range $doc := $group.pages -}}
{{- $doc_slug := $doc.title | urlize -}}
{{- $is_active := and $is_active_group (eq $page_slug $doc_slug) -}}
{{- $href := relLangURL (path.Join $section site.Params.docs.version $group_slug $doc_slug) -}}
<li><a href="{{ $href }}" class="d-inline-flex sidebar-item text-decoration-none rounded {{ if $is_active }}active{{ end }}">{{ $doc.title }}</a></li>
{{- end }}
</ul>
</div>
</li>
{{ partial "partials/sidebar/group.html" (dict
"page" $page
"index" $index
"level" (add $level 1)
"baseURL" $baseURL
"group" $item
)
}}
{{- else }}
<li class="mt-1 mb-1 {{ if $sectionBreak }}border-top{{ end }}"></li>
{{- $sectionBreak = false }}
<li>
<ul class="btn-toggle-nav list-unstyled fw-bold pb-1">
<li>
{{- $doc_slug := $group.title | urlize -}}
{{- $is_active := and $is_active_group (eq $page_slug $doc_slug) -}}
{{- $href := relLangURL (path.Join $section site.Params.docs.version $doc_slug) -}}
<a href="{{ $href }}" class="d-inline-flex sidebar-item text-decoration-none rounded {{ if $is_active }}active{{ end }}">
{{ $group.title }}
</a>
</li>
</ul>
</li>
{{ partial "partials/sidebar/item.html" (dict
"page" $page
"sectionBreak" $sectionBreak
"level" $level
"baseURL" $baseURL
"title" $item.title
)
}}
{{- end }}
{{- end }}
</ul>
Expand Down
4 changes: 2 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@gethinode/hinode",
"version": "0.10.1",
"version": "0.11.0",
"description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
"keywords": [
"hugo",
Expand Down

0 comments on commit d6357b7

Please sign in to comment.