menu : add menu location indicator

credits for fix with [.IsMenuCurrent](https://gohugo.io/functions/ismenucurrent/): https://stackoverflow.com/a/56454338
This commit is contained in:
Aditya Telange 2020-09-20 19:03:43 +05:30
parent 46a092553a
commit 6770e5e552
No known key found for this signature in database
GPG Key ID: 82E844EF3DA99E77
3 changed files with 14 additions and 4 deletions

View File

@ -38,4 +38,9 @@
.menu a {
font-size: 16px;
}
.menu .active {
font-weight: 500;
border-bottom: 2px solid currentColor;
}

View File

@ -8,7 +8,7 @@
<body
class="{{ if (and (eq .Kind `page` ) (ne .Layout `archives`)) }}single{{ else }}list{{ if .IsHome }} home {{ end }}{{ end }}{{ if eq $.Site.Params.defaultTheme `dark` }} dark {{ end }}"
id="top">
{{- partialCached "header.html" . }}
{{- partialCached "header.html" . .Page}}
<main class="main">
{{- block "main" . }}
{{end }}

View File

@ -12,14 +12,19 @@
{{- else }}
<p class="logo"><a href="{{ "" | absLangURL }}">{{ .Site.Title }}</a></p>
{{- end }}
{{- if .Site.Menus.main }}
{{ $currentPage := . }}
<ul class="menu" id="menu" onscroll="menu_on_scroll()">
{{- range .Site.Menus.main }}
{{ $menu_item_url := .URL | relLangURL }}
{{ $page_url:= $currentPage.RelPermalink | relLangURL }}
<li>
<a href="{{ .URL | absLangURL}}">{{ .Name }}</a>
<a href="{{ .URL | absLangURL }}">
<span {{ if eq $menu_item_url $page_url }}
{{/* the menu item links to the current page (with relLangURL) */}} class="active"
{{ end }}>{{ .Name }}</span>
</a>
</li>
{{- end }}
</ul>
{{- end }}
</nav>
</header>