add simple navbar for pages; also jquery is cool

SeeBeeSee · Aug 5, 2024 · b8bfa1e · b8bfa1e
1 parent 95b72ba
commit b8bfa1e
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -8,9 +8,15 @@
       type="image/svg+xml"
       href="./img/favicon.svg"
     />
+
+    <script src="./src/jquery-3.7.1.min.js"></script>
+    <script src="./src/nav.js"></script>
   </head>
 
   <body>
+    <div class="navigation-bar">
+      <!-- populate via script -->
+    </div>
     <h3>Hello, Github!</h3>
     <p>Stuff here momentarily.</p>
   </body>

diff --git a/pages/grocery.html b/pages/grocery.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>SeeBeeSee.github.io - Seeb's Grocery List</title>
+    <link
+      rel="icon"
+      sizes="any"
+      type="image/svg+xml"
+      href="./img/favicon.svg"
+    />
+
+    <script src="../src/jquery-3.7.1.min.js"></script>
+    <script src="../src/nav.js"></script>
+  </head>
+  <body>
+    <div class="navigation-bar">
+      <!-- populate via script -->
+    </div>
+    <h3>Future location for a static grocery-shopping static page.</h3>
+  </body>
+</html>
diff --git a/pages/sample.html b/pages/sample.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>SeeBeeSee.github.io - Sample Page</title>
+    <link
+      rel="icon"
+      sizes="any"
+      type="image/svg+xml"
+      href="./img/favicon.svg"
+    />
+
+    <script src="../src/jquery-3.7.1.min.js"></script>
+    <script src="../src/nav.js"></script>
+  </head>
+  <body>
+    <div class="navigation-bar">
+      <!-- populate via script -->
+    </div>
+    <h3>This is a sample page for the sake of testing navigation.</h3>
+  </body>
+</html>
diff --git a/src/jquery-3.7.1.min.js b/src/jquery-3.7.1.min.js
diff --git a/src/nav.js b/src/nav.js
@@ -0,0 +1,55 @@
+// navigation bar functionality
+
+// Pages to populate the navbar with, and accompanying data
+// (update here instead of re-writing navbar for each page)
+const pages = [
+  {
+    title: "Seeb's Grocery List",
+    link: "grocery.html",
+  },
+  {
+    title: "Sample page",
+    link: "sample.html",
+  },
+];
+
+// When the page is ready, populate the navbar
+$(document).ready(function () {
+  let urlSplit = document.location.href.split("/");
+  let currentPage = urlSplit[urlSplit.length - 1];
+
+  // distinguish whether we're at top-level index or a sub-page (assuming only 1 level of depth)
+  if (currentPage === "index.html") {
+    // append home link
+    $(".navigation-bar").append(
+      "<button><a href='index.html'>Home</a></button>"
+    );
+
+    // append remaining pages
+    pages.forEach((pageData) => {
+      let newButton =
+        "<button><a href='./pages/" +
+        pageData.link +
+        "'>" +
+        pageData.title +
+        "</a></button>";
+      $(".navigation-bar").append(newButton);
+    });
+  } else {
+    // append home link
+    $(".navigation-bar").append(
+      "<button><a href='../index.html'>Home</a></button>"
+    );
+
+    // append remaining pages
+    pages.forEach((pageData) => {
+      let newButton =
+        "<button><a href='" +
+        pageData.link +
+        "'>" +
+        pageData.title +
+        "</a></button>";
+      $(".navigation-bar").append(newButton);
+    });
+  }
+});