Rockingcool/paige-hugo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add collapsible navbar to menu

Browse Source
This commit is contained in:
Will Faught
2023-01-25 21:43:59 -08:00
parent 478c46f6ca
commit bee0c49dab
2 changed files with 20 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@@ -258,7 +258,8 @@ paige:
style:
link_href: "https://cdn.jsdelivr.net/npm/katex@0.16.3/dist/katex.min.css" # Local or remote file
link_integrity: "sha384-Juol1FqnotbkyZUT5Z7gUPjQ9gzlwCENvUZTpQBAPxtusdwFLRy382PSDx5UUJ4/" # File integrity hash
menu_style: "links" # Menu is link list for "links", tab list for "tabs", or pill list if unset
menu_breakpoint: "sm" # Bootstrap breakpoint at which to display all menu items
menu_style: "pills" # Menu item style; must be "links" or "pills"; default is "pills"
metadata_max_width: "100ch" # Page metadata max width
rss:
managing_editor: "Michael Bluth"

29
layouts/partials/paige/menu.html
View File

@@ -1,7 +1,7 @@
{{ $basepath := path.Clean (urls.Parse .Site.BaseURL).Path }}
{{ $breakpoint := .Site.Params.paige.menu_breakpoint | default "sm" }}
{{ $links := false }}
{{ $pills := false }}
{{ $tabs := false }}
{{ if eq $basepath "/" }}
{{ $basepath = "" }}
@@ -10,20 +10,27 @@
{{ with .Site.Params.paige.menu_style }}
{{ if eq . "links" }}
{{ $links = true }}
{{ else if eq . "tabs" }}
{{ $tabs = true }}
{{ else }}
{{ else if eq . "pills" }}
{{ $pills = true }}
{{ else }}
{{ errorf "invalid menu style: %q" . }}
{{ end }}
{{ else }}
{{ $pills = true }}
{{ end }}
<nav class="justify-content-center my-3 nav {{ if $pills }} nav-pills {{ else if $tabs }} nav-tabs {{ end }}">
{{ range .Site.Menus.main }}
{{ $pagePath := strings.TrimPrefix $basepath $.RelPermalink }}
{{ $menuPath := strings.TrimPrefix $basepath .URL }}
{{ $active := or (and (eq $menuPath "/") (eq $pagePath "/")) (and (ne $menuPath "/") (hasPrefix $pagePath $menuPath)) }}
<a {{ if $active }} aria-current="page" {{ end }} class="{{ if $active }} active {{ if $links }} link-secondary {{ end }} {{ end }} nav-link" href="{{ .URL | safeURL }}">{{ .Name }}</a>
{{ end }}
<nav class="justify-content-center my-3 navbar navbar-expand-{{ $breakpoint }}">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#paige-menu-toggler" aria-controls="paige-menu-toggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse justify-content-center mt-3 mt-{{ $breakpoint }}-0 navbar-collapse" id="paige-menu-toggler">
<div class="align-items-center flex-column flex-{{ $breakpoint }}-row justify-content-center nav {{ if $pills }} nav-pills {{ end }}">
{{ range .Site.Menus.main }}
{{ $pagePath := strings.TrimPrefix $basepath $.RelPermalink }}
{{ $menuPath := strings.TrimPrefix $basepath .URL }}
{{ $active := or (and (eq $menuPath "/") (eq $pagePath "/")) (and (ne $menuPath "/") (hasPrefix $pagePath $menuPath)) }}
<a {{ if $active }} aria-current="page" {{ end }} class="{{ if $active }} active {{ if $links }} link-secondary {{ end }} {{ end }} nav-link" href="{{ .URL | safeURL }}">{{ .Name }}</a>
{{ end }}
</div>
</div>
</nav>