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

@ -39,3 +39,8 @@
.menu a { .menu a {
font-size: 16px; font-size: 16px;
} }
.menu .active {
font-weight: 500;
border-bottom: 2px solid currentColor;
}

View File

@ -8,7 +8,7 @@
<body <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 }}" 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"> id="top">
{{- partialCached "header.html" . }} {{- partialCached "header.html" . .Page}}
<main class="main"> <main class="main">
{{- block "main" . }} {{- block "main" . }}
{{end }} {{end }}

View File

@ -12,14 +12,19 @@
{{- else }} {{- else }}
<p class="logo"><a href="{{ "" | absLangURL }}">{{ .Site.Title }}</a></p> <p class="logo"><a href="{{ "" | absLangURL }}">{{ .Site.Title }}</a></p>
{{- end }} {{- end }}
{{- if .Site.Menus.main }} {{ $currentPage := . }}
<ul class="menu" id="menu" onscroll="menu_on_scroll()"> <ul class="menu" id="menu" onscroll="menu_on_scroll()">
{{- range .Site.Menus.main }} {{- range .Site.Menus.main }}
{{ $menu_item_url := .URL | relLangURL }}
{{ $page_url:= $currentPage.RelPermalink | relLangURL }}
<li> <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> </li>
{{- end }} {{- end }}
</ul> </ul>
{{- end }}
</nav> </nav>
</header> </header>