Make links active

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/scss/style.scss b/src/scss/style.scss
index 3d482c6e0516402bf7910ed6351d588f94255a97..07d4fb2f6f176833be8437f89c43da5e78503911 100644 (file)
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -97,6 +97,16 @@ h6 {
 
                transition: background-color 200ms linear;
        }
+
+       .navbar-nav {
+               .nav-link {
+                       color: $blue-grey-900;
+
+                       &.active {
+                               border-bottom: 2px solid $link-color;
+                       }
+               }
+       }
 }
 
 footer {

diff --git a/src/templates/modules/menu.html b/src/templates/modules/menu.html
index dd08bf83956db823724a4157089573bd7b7c4f87..582fbaec3f4e7d5f259f5311f2ec34692b6a599a 100644 (file)
--- a/src/templates/modules/menu.html
+++ b/src/templates/modules/menu.html
@@ -1,22 +1,22 @@
 <ul class="navbar-nav ml-auto">
        {% if hostname in ("www.ipfire.org", "dev.ipfire.org") %}
                <li class="nav-item d-sm-block d-md-block d-lg-none">
-                       <a class="nav-link" href="/">{{ _("Home") }}</a>
+                       <a class="nav-link {% if request.path == "/" %}active{% end %}" href="/">{{ _("Home") }}</a>
                </li>
                <li class="nav-item">
-                       <a class="nav-link about" href="/features">{{ _("Features") }}</a>
+                       <a class="nav-link {% if request.path == "/features" %}active{% end %}" href="/features">{{ _("Features") }}</a>
                </li>
 
                <li class="nav-item">
-                       <a class="nav-link download" href="/download">{{ _("Download") }}</a>
+                       <a class="nav-link {% if request.path.startswith("/download") %}active{% end %}" href="/download">{{ _("Download") }}</a>
                </li>
 
                <li class="nav-item">
-                       <a class="nav-link support" href="/get-support">{{ _("Support") }}</a>
+                       <a class="nav-link {% if request.path == "/get-support" %}active{% end %}" href="/get-support">{{ _("Support") }}</a>
                </li>
 
                <li class="nav-item">
-                       <a class="nav-link community" href="/get-involved">{{ _("Community") }}</a>
+                       <a class="nav-link {% if request.path == "/get-involved" %}active{% end %}" href="/get-involved">{{ _("Community") }}</a>
                </li>
                
        {% elif hostname == "admin.ipfire.org" %}