update: Main navigation

- dynamic build - distinguish current
8fold · Feb 20, 2024 · 2962675 · 2962675
1 parent 300447e
commit 2962675
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 33 deletions.
diff --git a/site-root/public/css/main.css b/site-root/public/css/main.css
@@ -86,6 +86,40 @@ nav a:hover {
     text-decoration-thickness: 0rem;
 }
 
+nav {
+    text-align: center;
+}
+
+nav > ul {
+    margin: 0 auto;
+    padding: 0;
+    display: flex;
+    /* grid-template-columns: min-content; */
+    /* display: inline; */
+    list-style: none;
+}
+
+nav a {
+    display: inline-block;
+    padding: 1rem;
+}
+
+nav a.current {
+	text-decoration: none;
+}
+
+/* nav > ul > li {
+    float: left;
+} */
+
+nav > ul > li:after {
+    content: '|';
+}
+
+nav > ul > li:last-of-type:after {
+    content: '';
+}
+
 article[is="home"] > section a {
     display: block;
 	padding: 1rem 0.2rem;
@@ -148,34 +182,4 @@ footer > p {
     article[is="book-details"] {
         grid-template-columns: auto auto;
     }
-
-    nav {
-        text-align: center;
-    }
-
-    nav > ul {
-        margin: 0 auto;
-        padding: 0;
-        display: flex;
-        /* grid-template-columns: min-content; */
-        /* display: inline; */
-        list-style: none;
-    }
-
-    nav a {
-        display: inline-block;
-        padding: 1rem;
-    }
-
-    /* nav > ul > li {
-        float: left;
-    } */
-
-    nav > ul > li:after {
-        content: '|';
-    }
-
-    nav > ul > li:last-of-type:after {
-        content: '';
-    }
 }
diff --git a/site-root/public/foot.php b/site-root/public/foot.php
@@ -1,8 +1,23 @@
+<?php
+
+$uri = $_SERVER['REQUEST_URI'];
+
+$navigation = [
+    '/' => 'Home',
+    '/time/' => 'Time',
+    '/booking/' => 'Book now'
+];
+
+?>
     <nav>
         <ul>
-            <li><a href="/">Home</a></li>
-            <li><a href="/time/">Time</a></li>
-            <li><a href="/booking/">Book now</a></li>
+            <?php foreach ($navigation as $href => $linkText) {
+                $class = '';
+                if ($uri === $href) {
+                    $class = ' class="current" ';
+                }
+                print('<li><a '. $class . 'href="' . $href . '">' . $linkText . '</a></li>');
+            } ?>
         </ul>
     </nav>
 	<footer>