diff --git a/changelog/index.html b/changelog/index.html
index bdc9f0d5..41a52f93 100644
--- a/changelog/index.html
+++ b/changelog/index.html
@@ -43,6 +43,7 @@
July 26, 2023:
- Leilukin's Hub now has a site button for you to link to!
+ - Restructured the navigation bar.
July 25, 2023:
diff --git a/components/header.js b/components/header.js
index cdf5b065..44cf8605 100644
--- a/components/header.js
+++ b/components/header.js
@@ -1,38 +1,38 @@
-// Header component content
+/* Header component content */
document.querySelector("header").innerHTML = `
`;
-// Navigation component content
+
+/* Navigation component content */
document.querySelector("nav").innerHTML = `
-`;
\ No newline at end of file
+`;
+
+
+/* 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");
+ }
+});
\ No newline at end of file
diff --git a/components/navbar.js b/components/navbar.js
deleted file mode 100644
index b8087094..00000000
--- a/components/navbar.js
+++ /dev/null
@@ -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 = "";
- } else {
- navMenu.classList.add("nav__active");
- navToggle.querySelector("a").innerHTML = "";
- }
-}
-
-/* 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");
- }
-});
\ No newline at end of file
diff --git a/home.html b/home.html
index 05e73ffa..a5977f80 100644
--- a/home.html
+++ b/home.html
@@ -20,7 +20,6 @@
-
Home | Leilukin's Hub
@@ -66,6 +65,7 @@
July 26, 2023:
- Leilukin's Hub now has a site button for you to link to!
+ - Restructured the navigation bar.
View all site changelog
diff --git a/main.css b/main.css
index 61de8499..18e64b49 100644
--- a/main.css
+++ b/main.css
@@ -245,96 +245,27 @@ nav a {
cursor: pointer;
}
-.nav__menu,
-.nav__submenu {
- list-style-type: none;
- padding-left: 0;
- margin: 0;
-}
-
-.nav__title {
- font-size: 1.2rem;
- padding: 0.2rem 0;
+.nav__menu {
+ list-style: none;
+ padding: 0;
+ display: flex;
+ justify-content: space-evenly;
+ flex-wrap: wrap;
+ gap: 0.5rem;
}
.nav__item {
padding: 0.5rem;
}
-.nav__item a:hover,
-.nav__item a:hover::after {
+.nav__item a:hover {
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,
diff --git a/shrines/asummersend/components/header.js b/shrines/asummersend/components/header.js
index 0e594cae..8a9dad44 100644
--- a/shrines/asummersend/components/header.js
+++ b/shrines/asummersend/components/header.js
@@ -1,17 +1,31 @@
-// Header component content
+/* Header component content */
document.querySelector("header").innerHTML = `
`;
-// Navigation component content
+
+/* Navigation component content */
document.querySelector("nav").innerHTML = `
-`;
\ No newline at end of file
+`;
+
+
+/* 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");
+ }
+});
\ No newline at end of file
diff --git a/shrines/asummersend/components/navbar.js b/shrines/asummersend/components/navbar.js
deleted file mode 100644
index b8087094..00000000
--- a/shrines/asummersend/components/navbar.js
+++ /dev/null
@@ -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 = "";
- } else {
- navMenu.classList.add("nav__active");
- navToggle.querySelector("a").innerHTML = "";
- }
-}
-
-/* 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");
- }
-});
\ No newline at end of file
diff --git a/shrines/starwarskotor/components/header.js b/shrines/starwarskotor/components/header.js
index 84b5ec3e..980d03c1 100644
--- a/shrines/starwarskotor/components/header.js
+++ b/shrines/starwarskotor/components/header.js
@@ -1,17 +1,30 @@
-// Header component content
+/* Header component content */
document.querySelector("header").innerHTML = `
`;
-// Navigation component content
+/* Navigation component content */
document.querySelector("nav").innerHTML = `
-`;
\ No newline at end of file
+`;
+
+
+/* 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");
+ }
+});
\ No newline at end of file
diff --git a/shrines/starwarskotor/components/navbar.js b/shrines/starwarskotor/components/navbar.js
deleted file mode 100644
index b8087094..00000000
--- a/shrines/starwarskotor/components/navbar.js
+++ /dev/null
@@ -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 = "";
- } else {
- navMenu.classList.add("nav__active");
- navToggle.querySelector("a").innerHTML = "";
- }
-}
-
-/* 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");
- }
-});
\ No newline at end of file