Support navbar child items

This commit is contained in:
guillaume-haerinck 2022-11-06 10:53:43 +01:00
parent 3a0a4811cb
commit 9dc03b05c7
2 changed files with 44 additions and 1 deletions

View File

@ -91,3 +91,36 @@ body:not(.dark) #sun {
.logo-switches { .logo-switches {
flex-wrap: inherit; flex-wrap: inherit;
} }
.sub-menu {
position: absolute;
visibility: hidden;
list-style: none;
z-index: 10;
border-radius: var(--radius);
padding: 0 15px;
background-color: var(--code-bg);
border: 1px solid var(--tertiary);
}
.sub-menu a:hover {
text-shadow: 0px 0px 1px currentColor;
}
.menu-item:hover .sub-menu {
visibility: visible;
display: block;
}
.sub-menu:hover {
visibility: visible;
}
.arrow-down {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid var(--primary);
position: relative;
top: 1em;
left: 6px;
}

View File

@ -125,7 +125,7 @@
{{- $menu_item_url := (cond (strings.HasSuffix .URL "/") .URL (printf "%s/" .URL) ) | absLangURL }} {{- $menu_item_url := (cond (strings.HasSuffix .URL "/") .URL (printf "%s/" .URL) ) | absLangURL }}
{{- $page_url:= $currentPage.Permalink | absLangURL }} {{- $page_url:= $currentPage.Permalink | absLangURL }}
{{- $is_search := eq (site.GetPage .KeyName).Layout `search` }} {{- $is_search := eq (site.GetPage .KeyName).Layout `search` }}
<li> <li class="menu-item">
<a href="{{ .URL | absLangURL }}" title="{{ .Title | default .Name }} {{- cond $is_search (" (Alt + /)" | safeHTMLAttr) ("" | safeHTMLAttr ) }}" <a href="{{ .URL | absLangURL }}" title="{{ .Title | default .Name }} {{- cond $is_search (" (Alt + /)" | safeHTMLAttr) ("" | safeHTMLAttr ) }}"
{{- cond $is_search (" accesskey=/" | safeHTMLAttr) ("" | safeHTMLAttr ) }}> {{- cond $is_search (" accesskey=/" | safeHTMLAttr) ("" | safeHTMLAttr ) }}>
<span {{- if eq $menu_item_url $page_url }} class="active" {{- end }}> <span {{- if eq $menu_item_url $page_url }} class="active" {{- end }}>
@ -141,7 +141,17 @@
<path d="M10 14L21 3"></path> <path d="M10 14L21 3"></path>
</svg> </svg>
{{- end }} {{- end }}
{{ if .HasChildren }}
<i class="arrow-down"></i>
{{ end }}
</a> </a>
{{ if .HasChildren }}
<div class="sub-menu">
{{ range .Children }}
<a href="{{ .URL }}">{{ .Name }}</a>
{{ end }}
</div>
{{ end }}
</li> </li>
{{- end }} {{- end }}
</ul> </ul>