From 34f140dbb68932e16ba1f13a15a7b1e3d54f1ca3 Mon Sep 17 00:00:00 2001
From: T2hhbmEK <T2hhbmEK@gmail.com>
Date: Sun, 22 Jan 2023 06:27:32 +0800
Subject: [PATCH] navigation menu highlight selected item

---
 assets/css/menu.scss              | 10 ++++++++++
 layouts/partials/menu.html        | 16 +++++++++++++---
 layouts/partials/mobile-menu.html |  6 +++++-
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/assets/css/menu.scss b/assets/css/menu.scss
index fdd3075..5cc223f 100644
--- a/assets/css/menu.scss
+++ b/assets/css/menu.scss
@@ -70,6 +70,11 @@
   .spacer {
     flex-grow: 1 !important;
   }
+
+  &__active {
+    color: $accent;
+    font-weight: bold;
+  }
 }
 
 .menu {
@@ -154,4 +159,9 @@
       right: 0;
     }
   }
+
+  &__active {
+    color: $accent;
+    font-weight: bold;
+  }
 }
diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html
index 41b0d1c..408a47f 100644
--- a/layouts/partials/menu.html
+++ b/layouts/partials/menu.html
@@ -1,9 +1,13 @@
 <nav class="navigation-menu">
   <ul class="navigation-menu__inner menu--desktop">
+    {{ $currURL := .Permalink }}
     {{ if or $.Site.Params.showMenuItems ( eq .Site.Params.showMenuItems 0 ) }}
       {{ range first $.Site.Params.showMenuItems $.Site.Menus.main }}
         {{ if not .HasChildren }}
-          <li><a href="{{ .URL }}">{{ .Name }}</a></li>
+          {{ $isCurrURL := eq (absLangURL $currURL) (absLangURL .URL) }}
+          <li {{ if $isCurrURL }} class="navigation-menu__active" {{ end }}>
+            <a href="{{ .URL }}">{{ .Name }}</a>
+          </li>
         {{ end }}
       {{ end }}
       {{ if gt (len $.Site.Menus.main) $.Site.Params.showMenuItems }}
@@ -14,7 +18,10 @@
               <ul class="menu__dropdown">
                 {{ range last (sub (len $.Site.Menus.main) $.Site.Params.showMenuItems) $.Site.Menus.main }}
                   {{ if not .HasChildren }}
-                    <li><a href="{{ .URL }}">{{ .Name }}</a></li>
+                    {{ $isCurrURL := eq (absLangURL $currURL) (absLangURL .URL) }}
+                    <li {{ if $isCurrURL }} class="navigation-menu__active" {{ end }}>
+                      <a href="{{ .URL }}">{{ .Name }}</a>
+                    </li>
                   {{ end }}
                 {{ end }}
               </ul>
@@ -25,7 +32,10 @@
     {{ else }}
       {{ range $.Site.Menus.main }}
         {{ if not .HasChildren }}
-          <li><a href="{{ .URL }}">{{ .Name }}</a></li>
+          {{ $isCurrURL := eq (absLangURL $currURL) (absLangURL .URL) }}
+          <li {{ if $isCurrURL }} class="navigation-menu__active" {{ end }}>
+            <a href="{{ .URL }}">{{ .Name }}</a>
+          </li>
         {{ end }}
       {{ end }}
     {{ end }}
diff --git a/layouts/partials/mobile-menu.html b/layouts/partials/mobile-menu.html
index 70e9d29..9095aed 100644
--- a/layouts/partials/mobile-menu.html
+++ b/layouts/partials/mobile-menu.html
@@ -2,9 +2,13 @@
   <li class="menu__trigger">Menu&nbsp;▾</li>
   <li>
     <ul class="menu__dropdown">
+      {{ $currURL := .Permalink }}
       {{ range $.Site.Menus.main }}
         {{ if not .HasChildren }}
-          <li><a href="{{ .URL }}">{{ .Name }}</a></li>
+          {{ $isCurrURL := eq (absLangURL $currURL) (absLangURL .URL) }}
+          <li {{ if $isCurrURL }} class="menu__active" {{ end }}>
+            <a href="{{ .URL }}">{{ .Name }}</a>
+          </li>
         {{ end }}
       {{ end }}
       {{ if and $.Site.Params.showLanguageSelector (len $.Site.Home.AllTranslations) }}