Restructured navigation bar

changelog/index.html

@@ -43,6 +43,7 @@
                 <p class="date-style">July 26, 2023:</p>
                 <ul>
                     <li>Leilukin's Hub now has a site button for you to link to!</li>
+                    <li>Restructured the navigation bar.</li>
                 </ul>
 
                 <p class="date-style">July 25, 2023:</p>

components/header.js

@@ -1,38 +1,38 @@
-// Header component content
+/* Header component content */
 document.querySelector("header").innerHTML = `
     <img src="/assets/Leilukins-Hub-website-banner.png" alt="">
 `;
 
-// Navigation component content
+
+/* Navigation component content */
 document.querySelector("nav").innerHTML = `
     <ul class="nav__menu">
-        <li class="nav__title"><a href="/">Leilukin's Hub</a></li>
+        <li><a href="/home.html">Home</a></li>
-        <li class="nav__item"><a href="/home.html">Home</a></li>
+        <li><a href="/about/">About</a></li>
-        <li class="nav__item"><a href="/about/">About</a></li>
+        <li><a href="/blog/">Blog</a></li>
-        <li class="nav__item"><a href="/blog/">Blog</a></li>
+        <li><a href="/articles/">Articles</a></li>
-        <li class="nav__item"><a href="/articles/">Articles</a></li>
+        <li><a href="/mycreations/">My Creations</a></li>
-        <li class="nav__item"><a href="/mycreations/">My Creations</a></li>
+        <li><a href="/mymods/">My Mods</a></li>
-        <li class="nav__item nav__has-submenu">
+        <li><a href="/playlists/">Playlists</a></li>
-            <a tabindex="0">My Mods</a>
+        <li><a href="/featured/">Featured</a></li>
-            <ul class="nav__submenu">
+        <li><a href="/resources/">Resources</a></li>
-                <li class="nav__subitem"><a href="/mymods/">Index</a></li>
+        <li><a href="/shrines/">Shrines</a></li>
-                <li class="nav__subitem"><a href="/mymods/kotor1mods/">KotOR 1</a></li>
+        <li><a href="/links/">Links</a></li>
-                <li class="nav__subitem"><a href="/mymods/kotor2mods/">KotOR 2</a></li>
+        <li><a href="https://leilukin.123guestbook.com/">Guestbook</a></li>
-            </ul>
-        </li>
-        <li class="nav__item"><a href="/playlists/">Playlists</a></li>
-        <li class="nav__item"><a href="/featured/">Featured</a></li>
-        <li class="nav__item"><a href="/resources/">Resources</a></li>
-        <li class="nav__item nav__has-submenu">
-            <a tabindex="1">Shrines</a>
-            <ul class="nav__submenu">
-                <li class="nav__subitem"><a href="/shrines/">Index</a></li>
-                <li class="nav__subitem"><a href="/shrines/asummersend/">A Summer's End</a></li>
-                <li class="nav__subitem"><a href="/shrines/starwarskotor/">Star Wars: KotOR</a></li>
-            </ul>
-        </li>
-        <li class="nav__item"><a href="/links/">Links</a></li>
-        <li class="nav__item"><a href="https://leilukin.123guestbook.com/">Guestbook</a></li>
-        <li class="nav__toggle"><a href="#"><i class="fas fa-bars"></i></a></li>
     </ul>
 `;
+
+
+/* MAKE THE NAVBAR STICKY */
+const header = document.querySelector("header");
+const navbar = document.querySelector("nav");
+
+window.addEventListener("scroll", e => {
+    const scrollPos = window.scrollY || document.documentElement.scrollTop;
+    const stickyLine = header.scrollHeight - navbar.scrollHeight;
+    if (scrollPos > stickyLine) {
+            navbar.classList.add("sticky-nav");
+    } else {
+            navbar.classList.remove("sticky-nav");
+    }
+});

components/navbar.js

@@ -1,66 +0,0 @@
-/* FOR TOGGLING MENUS ON THE NAVBAR */
-const navToggle = document.querySelector(".nav__toggle");
-const navMenu = document.querySelector(".nav__menu");
-const navItems = document.querySelectorAll(".nav__item");
-
-/* Toggle mobile navMenu */
-function toggleMenu() {
-  if (navMenu.classList.contains("nav__active")) {
-    navMenu.classList.remove("nav__active");
-    navToggle.querySelector("a").innerHTML = "<i class='fas fa-bars'></i>";
-  } else {
-    navMenu.classList.add("nav__active");
-    navToggle.querySelector("a").innerHTML = "<i class='fas fa-times'></i>";
-  }
-}
-
-/* Activate Submenu */
-function toggleItem() {
-  if (this.classList.contains("nav__submenu-active")) {
-    this.classList.remove("nav__submenu-active");
-  } else if (navMenu.querySelector(".nav__submenu-active")) {
-    navMenu.querySelector(".nav__submenu-active").classList.remove("nav__submenu-active");
-    this.classList.add("nav__submenu-active");
-  } else {
-    this.classList.add("nav__submenu-active");
-  }
-}
-
-/* Close Submenu From Anywhere */
-function closeSubmenu(e) {
-  if (navMenu.querySelector(".nav__submenu-active")) {
-    let isClickInside = navMenu
-      .querySelector(".nav__submenu-active")
-      .contains(e.target);
-
-    if (!isClickInside && navMenu.querySelector(".nav__submenu-active")) {
-      navMenu.querySelector(".nav__submenu-active").classList.remove("nav__submenu-active");
-    }
-  }
-}
-
-/* Event Listeners */
-navToggle.addEventListener("click", toggleMenu, false);
-for (let item of navItems) {
-  if (item.querySelector(".nav__submenu")) {
-    item.addEventListener("click", toggleItem, false);
-  }
-  item.addEventListener("keypress", toggleItem, false);
-}
-document.addEventListener("click", closeSubmenu, false);
-
-
-/* FOR MAKING THE NAVBAR STICKY */
-const header = document.querySelector("header");
-const navbar = document.querySelector("nav");
-
-
-window.addEventListener("scroll", e => {
-  const scrollPos = window.scrollY || document.documentElement.scrollTop;
-  const stickyLine = header.scrollHeight - navbar.scrollHeight;
-  if (scrollPos > stickyLine) {
-      navbar.classList.add("sticky-nav");
-  } else {
-      navbar.classList.remove("sticky-nav");
-  }
-});

home.html

@@ -20,7 +20,6 @@
         <link rel="manifest" href="/assets/favicon/site.webmanifest">
 
         <script src="/components/header.js" defer></script>
-        <script src="/components/navbar.js" defer></script>
         <script src="/components/footer.js" defer></script>
 
         <title>Home | Leilukin's Hub</title>
@@ -66,6 +65,7 @@
                         <p class="date-style">July 26, 2023:</p>
                         <ul>
                             <li>Leilukin's Hub now has a site button for you to link to!</li>
+                            <li>Restructured the navigation bar.</li>
                         </ul>
                     </div>
                     <a href="/changelog">View all site changelog</a>

main.css

@@ -245,96 +245,27 @@ nav a {
     cursor: pointer;
 }
 
-.nav__menu,
+.nav__menu {
-.nav__submenu {
+    list-style: none;
-    list-style-type: none;
+    padding: 0;
-    padding-left: 0;
+    display: flex;
-    margin: 0;
+    justify-content: space-evenly;
-}
+    flex-wrap: wrap;
-
+    gap: 0.5rem;
-.nav__title {
-    font-size: 1.2rem;
-    padding: 0.2rem 0;
 }
 
 .nav__item {
     padding: 0.5rem;
 }
 
-.nav__item a:hover,
+.nav__item a:hover {
-.nav__item a:hover::after {
     color: var(--nav-item-hover);
 }
 
-/* Mobile nav__menu */
-.nav__menu {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.nav__menu li a {
-    display: block;
-    padding: 0.9rem 0.8rem;
-}
-
-.nav__menu li .nav__subitem a {
-    padding: 0.9rem;
-}
-
-.nav__toggle {
-    order: 1;
-    font-size: 1.25rem;
-}
-
-.nav__item {
-    order: 3;
-    width: 100%;
-    text-align: center;
-    display: none;
-}
-
-.nav__active .nav__item {
-    display: block;
-}
-
-/* nav__submenu up from mobile screens */
-.nav__submenu {
-    display: none;
-}
-
-.nav__submenu-active .nav__submenu {
-    display: block;
-}
-
-.nav__has-submenu i {
-    font-size: 0.75rem;
-}
-
-.nav__has-submenu > a::after {
-    font-family: "Font Awesome 5 Free";
-    font-size: 0.75rem;
-    line-height: 1.6;
-    font-weight: 900;
-    content: "\f078";
-    color: white;
-    padding-left: 0.3125rem;
-}
-
-.nav__subitem a {
-    padding: 0.625rem 0.9rem;
-}
-
-.nav__submenu-active {
-    background-color: var(--nav-submenu-active);
-    border-radius: 0.1875rem;
-}
-
 /* Added to the navbar with JS when it reaches its scroll position */
 .sticky-nav {
     position: fixed;
-    width: 100vw;
+    width: 100%;
     top: 0;
 }
 
@@ -345,59 +276,6 @@ as the navigation bar gets a new position at the top of the page
     padding-top: 3.75rem;
 }
 
-/* Tablet navigation menu */
-@media all and (min-width: 43.75rem) {
-    .nav__menu {
-        justify-content: center;
-    }
-
-    .nav__title {
-        flex: 1;
-    }
-
-    .nav__toggle {
-        flex: 1;
-        text-align: right;
-        order: 2;
-    }
-}
-
-/* Desktop navigation menu */
-@media all and (min-width: 60rem) {
-    .nav__menu {
-        align-items: flex-start;
-        flex-wrap: nowrap;
-        background: none;
-    }
-
-    .nav__title {
-        order: 0;
-    }
-
-    .nav__item {
-        order: 1;
-        position: relative;
-        display: block;
-        width: auto;
-    }
-
-    .nav__submenu-active .nav__submenu {
-        display: block;
-        position: absolute;
-        left: 0;
-        top: 4.25rem;
-        background: var(--nav-submenu-active);
-    }
-
-    .nav__toggle {
-        display: none;
-    }
-
-    .nav__submenu-active {
-        border-radius: 0;
-    }
-}
-
 /* MAIN CONTENT */
 main,
 .content-container,

shrines/asummersend/components/header.js

@@ -1,17 +1,31 @@
-// Header component content
+/* Header component content */
 document.querySelector("header").innerHTML = `
     <img src="./img/asummersend_header.png" alt="">
 `;
 
-// Navigation component content
+
+/* Navigation component content */
 document.querySelector("nav").innerHTML = `
     <ul class="nav__menu">
-        <li class="nav__title"><a href="/shrines/asummersend/">A Summer's End</a></li>
+        <li><a href="/shrines/asummersend/">Shrine Home</a></li>
-        <li class="nav__item"><a href="/shrines/asummersend/">Shrine Home</a></li>
+        <li><a href="./playlists.html">Playlists</a></li>
-        <li class="nav__item"><a href="./playlists.html">Playlists</a></li>
+        <li><a href="./trivia.html">Trivia</a></li>
-        <li class="nav__item"><a href="./trivia.html">Trivia</a></li>
+        <li><a href="./gallery.html">Gallery</a></li>
-        <li class="nav__item"><a href="./gallery.html">Gallery</a></li>
+        <li><a href="/home.html">Main Site</a></li>
-        <li class="nav__item"><a href="/home.html">Main Site</a></li>
-        <li class="nav__toggle"><a href="#"><i class="fas fa-bars"></i></a></li>
     </ul>
 `;
+
+
+/* MAKE THE NAVBAR STICKY */
+const header = document.querySelector("header");
+const navbar = document.querySelector("nav");
+
+window.addEventListener("scroll", e => {
+    const scrollPos = window.scrollY || document.documentElement.scrollTop;
+    const stickyLine = header.scrollHeight - navbar.scrollHeight;
+    if (scrollPos > stickyLine) {
+            navbar.classList.add("sticky-nav");
+    } else {
+            navbar.classList.remove("sticky-nav");
+    }
+});

shrines/asummersend/components/navbar.js

@@ -1,66 +0,0 @@
-/* FOR TOGGLING MENUS ON THE NAVBAR */
-const navToggle = document.querySelector(".nav__toggle");
-const navMenu = document.querySelector(".nav__menu");
-const navItems = document.querySelectorAll(".nav__item");
-
-/* Toggle mobile navMenu */
-function toggleMenu() {
-  if (navMenu.classList.contains("nav__active")) {
-    navMenu.classList.remove("nav__active");
-    navToggle.querySelector("a").innerHTML = "<i class='fas fa-bars'></i>";
-  } else {
-    navMenu.classList.add("nav__active");
-    navToggle.querySelector("a").innerHTML = "<i class='fas fa-times'></i>";
-  }
-}
-
-/* Activate Submenu */
-function toggleItem() {
-  if (this.classList.contains("nav__submenu-active")) {
-    this.classList.remove("nav__submenu-active");
-  } else if (navMenu.querySelector(".nav__submenu-active")) {
-    navMenu.querySelector(".nav__submenu-active").classList.remove("nav__submenu-active");
-    this.classList.add("nav__submenu-active");
-  } else {
-    this.classList.add("nav__submenu-active");
-  }
-}
-
-/* Close Submenu From Anywhere */
-function closeSubmenu(e) {
-  if (navMenu.querySelector(".nav__submenu-active")) {
-    let isClickInside = navMenu
-      .querySelector(".nav__submenu-active")
-      .contains(e.target);
-
-    if (!isClickInside && navMenu.querySelector(".nav__submenu-active")) {
-      navMenu.querySelector(".nav__submenu-active").classList.remove("nav__submenu-active");
-    }
-  }
-}
-
-/* Event Listeners */
-navToggle.addEventListener("click", toggleMenu, false);
-for (let item of navItems) {
-  if (item.querySelector(".nav__submenu")) {
-    item.addEventListener("click", toggleItem, false);
-  }
-  item.addEventListener("keypress", toggleItem, false);
-}
-document.addEventListener("click", closeSubmenu, false);
-
-
-/* FOR MAKING THE NAVBAR STICKY */
-const header = document.querySelector("header");
-const navbar = document.querySelector("nav");
-
-
-window.addEventListener("scroll", e => {
-  const scrollPos = window.scrollY || document.documentElement.scrollTop;
-  const stickyLine = header.scrollHeight - navbar.scrollHeight;
-  if (scrollPos > stickyLine) {
-      navbar.classList.add("sticky-nav");
-  } else {
-      navbar.classList.remove("sticky-nav");
-  }
-});

shrines/starwarskotor/components/header.js

@@ -1,17 +1,30 @@
-// Header component content
+/* Header component content */
 document.querySelector("header").innerHTML = `
     <img src="/shrines/starwarskotor/img/swkotor-header.jpg" alt="">
 `;
 
-// Navigation component content
+/* Navigation component content */
 document.querySelector("nav").innerHTML = `
     <ul class="nav__menu">
-        <li class="nav__title"><a href="/shrines/starwarskotor/">Star Wars: KotOR</a></li>
+        <li><a href="/shrines/starwarskotor/">Home</a></li>
-        <li class="nav__item"><a href="/shrines/starwarskotor/">Home</a></li>
+        <li><a href="/shrines/starwarskotor/articles/">Articles</a></li>
-        <li class="nav__item"><a href="/shrines/starwarskotor/articles/">Articles</a></li>
+        <li><a href="/shrines/starwarskotor/guides/">Guides</a></li>
-        <li class="nav__item"><a href="/shrines/starwarskotor/guides/">Guides</a></li>
+        <li><a href="/shrines/starwarskotor/resources/">Resources</a></li>
-        <li class="nav__item"><a href="/shrines/starwarskotor/resources/">Resources</a></li>
+        <li><a href="/home.html">Main Site</a></li>
-        <li class="nav__item"><a href="/home.html">Main Site</a></li>
-        <li class="nav__toggle"><a href="#"><i class="fas fa-bars"></i></a></li>
     </ul>
 `;
+
+
+/* MAKE THE NAVBAR STICKY */
+const header = document.querySelector("header");
+const navbar = document.querySelector("nav");
+
+window.addEventListener("scroll", e => {
+    const scrollPos = window.scrollY || document.documentElement.scrollTop;
+    const stickyLine = header.scrollHeight - navbar.scrollHeight;
+    if (scrollPos > stickyLine) {
+            navbar.classList.add("sticky-nav");
+    } else {
+            navbar.classList.remove("sticky-nav");
+    }
+});

shrines/starwarskotor/components/navbar.js

@@ -1,66 +0,0 @@
-/* FOR TOGGLING MENUS ON THE NAVBAR */
-const navToggle = document.querySelector(".nav__toggle");
-const navMenu = document.querySelector(".nav__menu");
-const navItems = document.querySelectorAll(".nav__item");
-
-/* Toggle mobile navMenu */
-function toggleMenu() {
-  if (navMenu.classList.contains("nav__active")) {
-    navMenu.classList.remove("nav__active");
-    navToggle.querySelector("a").innerHTML = "<i class='fas fa-bars'></i>";
-  } else {
-    navMenu.classList.add("nav__active");
-    navToggle.querySelector("a").innerHTML = "<i class='fas fa-times'></i>";
-  }
-}
-
-/* Activate Submenu */
-function toggleItem() {
-  if (this.classList.contains("nav__submenu-active")) {
-    this.classList.remove("nav__submenu-active");
-  } else if (navMenu.querySelector(".nav__submenu-active")) {
-    navMenu.querySelector(".nav__submenu-active").classList.remove("nav__submenu-active");
-    this.classList.add("nav__submenu-active");
-  } else {
-    this.classList.add("nav__submenu-active");
-  }
-}
-
-/* Close Submenu From Anywhere */
-function closeSubmenu(e) {
-  if (navMenu.querySelector(".nav__submenu-active")) {
-    let isClickInside = navMenu
-      .querySelector(".nav__submenu-active")
-      .contains(e.target);
-
-    if (!isClickInside && navMenu.querySelector(".nav__submenu-active")) {
-      navMenu.querySelector(".nav__submenu-active").classList.remove("nav__submenu-active");
-    }
-  }
-}
-
-/* Event Listeners */
-navToggle.addEventListener("click", toggleMenu, false);
-for (let item of navItems) {
-  if (item.querySelector(".nav__submenu")) {
-    item.addEventListener("click", toggleItem, false);
-  }
-  item.addEventListener("keypress", toggleItem, false);
-}
-document.addEventListener("click", closeSubmenu, false);
-
-
-/* FOR MAKING THE NAVBAR STICKY */
-const header = document.querySelector("header");
-const navbar = document.querySelector("nav");
-
-
-window.addEventListener("scroll", e => {
-  const scrollPos = window.scrollY || document.documentElement.scrollTop;
-  const stickyLine = header.scrollHeight - navbar.scrollHeight;
-  if (scrollPos > stickyLine) {
-      navbar.classList.add("sticky-nav");
-  } else {
-      navbar.classList.remove("sticky-nav");
-  }
-});