a/hugo-theme-paradox
1
Fork 0
mirror of https://github.com/trwnh/hugo-theme-paradox.git synced 2024-11-24 10:21:21 +00:00
Code Issues Projects Releases Wiki Activity

style collapsible menus properly

Browse source
This commit is contained in:
a 2022-12-11 19:46:24 -06:00
parent 22e851dbe9
commit f4d4ba8a9d
2 changed files with 20 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
assets/styles/components/nav-docs.scss
View file

@ -21,13 +21,19 @@
padding: 1em 0; padding: 1em 0;
.menu { .menu {
margin-top: 1em; margin-top: 1em;
> li, > details { > li, > details summary {
margin-bottom: 1em; margin-bottom: 1em;
> a {
display: block;
margin-bottom: 1rem;
} }
} }
details {
margin-bottom: 1em;
}
summary {
font-weight: 700;
cursor: pointer;
&::marker {
content: '';
}
} }
.sub-menu { .sub-menu {
margin-left: 1em; margin-left: 1em;
@ -47,7 +53,7 @@
content: '↳ '; content: '↳ ';
} }
} }
.section-title > a { .active > a {
font-weight: 700; font-weight: 700;
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;

14
layouts/partials/nav-docs.html
View file

@ -7,9 +7,9 @@
</svg> Documentation Menu</label> </svg> Documentation Menu</label>
<ul class="menu"> <ul class="menu">
<a id="menu" href="#top">Skip menu</a> <a id="menu" href="#top">Skip menu</a>
{{ $currentPage := . }} {{ $currentPage := .Page }}
{{ range .Site.Menus.docs }} {{ range .Site.Menus.docs }}
{{ $active := or ($currentPage.IsMenuCurrent "docs" .) (eq $currentPage.Section .Identifier)}} {{ $active := hasPrefix $currentPage.RelPermalink .Page.RelPermalink }}
<details {{- if $active }} open{{ end -}}> <details {{- if $active }} open{{ end -}}>
{{ if .HasChildren }} {{ if .HasChildren }}
<summary class='section-title{{- if $active }} active{{ end -}}'> <summary class='section-title{{- if $active }} active{{ end -}}'>
@ -19,14 +19,16 @@
</summary> </summary>
<ul class="sub-menu" data-depth=1> <ul class="sub-menu" data-depth=1>
{{ range .Children }} {{ range .Children }}
{{ $active := hasPrefix $currentPage.RelPermalink .Page.RelPermalink }}
{{ if .HasChildren}} {{ if .HasChildren}}
<li class='{{- if $active }} active{{ end -}}'> <li class='{{- if $active }}active{{ end -}}'>
<a href="{{ .URL | relLangURL }}"> <a href="{{ .URL | relLangURL }}">
{{ .Pre }}<span>{{ .Name }}</span>{{ .Post }} {{ .Pre }}<span>{{ .Name }}</span>{{ .Post }}
</a> </a>
<ul class="sub-menu" data-depth=2> <ul class="sub-menu" data-depth=2>
{{ range .Children }} {{ range .Children }}
<li class='{{- if $active }} active{{ end -}}'> {{ $active := hasPrefix $currentPage.RelPermalink .Page.RelPermalink }}
<li class='{{- if $active }}active{{ end -}}'>
<a href="{{ .URL | relLangURL }}"> <a href="{{ .URL | relLangURL }}">
{{ .Pre }}<span>{{ .Name }}</span>{{ .Post }} {{ .Pre }}<span>{{ .Name }}</span>{{ .Post }}
</a> </a>
@ -34,7 +36,7 @@
{{ end }}{{/* range .Children (subsubmenu) */}} {{ end }}{{/* range .Children (subsubmenu) */}}
</ul> </ul>
{{ else }}{{/* not .HasChildren (subsubmenu) */}} {{ else }}{{/* not .HasChildren (subsubmenu) */}}
<li class='{{- if $active }} active{{ end -}}'> <li class='{{- if $active }}active{{ end -}}'>
<a href="{{ .URL | relLangURL }}"> <a href="{{ .URL | relLangURL }}">
{{ .Pre }}<span>{{ .Name }}</span>{{ .Post }} {{ .Pre }}<span>{{ .Name }}</span>{{ .Post }}
</a> </a>
@ -43,7 +45,7 @@
{{ end }} {{ end }}
</ul> </ul>
{{ else }} {{ else }}
<li class='{{- if $active }} active{{ end -}}'> <li class='{{- if $active }}active{{ end -}}'>
<a href="{{ .URL | relLangURL }}"> <a href="{{ .URL | relLangURL }}">
{{ .Pre }}<span>{{ .Name }}</span>{{ .Post }} {{ .Pre }}<span>{{ .Name }}</span>{{ .Post }}
</a> </a>