Style the site navigation

open-innovations · Jun 21, 2024 · 0895dfa · 0895dfa
1 parent 626e320
commit 0895dfa
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 17 deletions.
diff --git a/src/_components/page/Nav.vto b/src/_components/page/Nav.vto
@@ -31,7 +31,14 @@ css: |
 <nav class="page">
   <ul>
   {{ for key, link of links }}
-    <li><a href="{{ link.url }}">{{ link.title }}</a></li>
+    <li>
+      <a
+        href="{{ link.url }}"
+        class="{{ current.startsWith(link.url) ? 'current' : null }}"
+      >
+        {{ link.title }}
+      </a>
+    </li>
   {{ /for }}
   </ul>
 </nav>
diff --git a/src/_includes/css/base.css b/src/_includes/css/base.css
@@ -1,5 +1,21 @@
 @import "./fonts/poppins.css";
 
+/* Site-wide overrides of variables. Customises the components. */
+:root {
+  --header-color: white;
+  --header-background: #2254F4;
+
+  --nav-page-color: white;
+  --nav-page-background: black;
+  --nav-page-color-hover: black;
+  --nav-page-background-hover: white;
+
+  --link-block-color: black;
+  --link-block-background: #aaa;
+  --link-block-color-hover: white;
+  --link-block-background-hover: black;
+}
+
 html {
   font-family: Arial, Helvetica, sans-serif;
   height: 100%;
@@ -43,6 +59,10 @@ body {
         text-decoration: underline;
       }
     }
+    & .current {
+      --nav-page-color: black;
+      --nav-page-background: white;
+    }
   }
   & > footer {
     color: white;

diff --git a/src/_includes/layout/page.vto b/src/_includes/layout/page.vto
@@ -12,7 +12,8 @@
 
   {{# Site navigation #}}
   {{ comp.page.Nav({
-    links: search.pages('technique', 'order') // Find all search technique pages
+    links: search.pages('technique', 'order'), // Find all search technique pages
+    current: url
   }) }}
 
   <main>

diff --git a/src/css/site.css b/src/css/site.css
@@ -4,18 +4,3 @@
 @import 'css/base.css';
 @import 'css/table.css';
 @import 'css/transitions.css';
-
-:root {
-  --header-color: white;
-  --header-background: #2254F4;
-
-  --nav-page-color: white;
-  --nav-page-background: black;
-  --nav-page-color-hover: black;
-  --nav-page-background-hover: white;
-
-  --link-block-color: black;
-  --link-block-background: #aaa;
-  --link-block-color-hover: white;
-  --link-block-background-hover: black;
-}