From 74fc59f9b5b6cfd1f39b8ca2ffba80e81f28a754 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Thu, 11 Apr 2024 23:57:02 +0800
Subject: [PATCH] Turn the navigation bar into a WebC component
---
src/_includes/main/base.njk | 6 +--
src/_includes/main/navbar.njk | 14 -------
src/_includes/main/navbar.webc | 77 ++++++++++++++++++++++++++++++++++
src/assets/css/main.css | 46 --------------------
src/assets/js/navbar.js | 13 ------
5 files changed, 80 insertions(+), 76 deletions(-)
delete mode 100644 src/_includes/main/navbar.njk
create mode 100644 src/_includes/main/navbar.webc
delete mode 100644 src/assets/js/navbar.js
diff --git a/src/_includes/main/base.njk b/src/_includes/main/base.njk
index a2b3c72a..989c7511 100644
--- a/src/_includes/main/base.njk
+++ b/src/_includes/main/base.njk
@@ -45,14 +45,14 @@
{% include "main/header.njk" %}
- {% include "main/navbar.njk" %}
+ {% renderTemplate "webc" %}
+
+ {% endrenderTemplate %}
-
{{ content | safe }}
-
diff --git a/src/_includes/main/navbar.njk b/src/_includes/main/navbar.njk
deleted file mode 100644
index 74dc9ffd..00000000
--- a/src/_includes/main/navbar.njk
+++ /dev/null
@@ -1,14 +0,0 @@
-
\ No newline at end of file
diff --git a/src/_includes/main/navbar.webc b/src/_includes/main/navbar.webc
new file mode 100644
index 00000000..9dd358b5
--- /dev/null
+++ b/src/_includes/main/navbar.webc
@@ -0,0 +1,77 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 113877f3..de94c6d0 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -256,52 +256,6 @@ dd {
filter: drop-shadow(0.1rem 0.1rem 0.2rem black);
}
-/* NAVIGATION BAR COMPONENT */
-.navbar {
- background: var(--clr-navbar-bg);
- padding: 0 0.6rem;
- width: 100%;
- z-index: 999;
-}
-
-.navbar a {
- color: var(--clr-navbar-link);
- text-decoration: none;
- cursor: pointer;
-}
-
-.navbar a:hover {
- color: var(--clr-link-hover);
-}
-
-.navbar a:focus {
- outline-offset: 0.3em;
- outline: 0.15em solid var(--clr-navbar-link);
-}
-
-.nav__menu {
- list-style: none;
- padding: 0;
- display: flex;
- justify-content: space-evenly;
- flex-wrap: wrap;
- gap: 0.5rem;
-}
-
-/* Added to the navbar with JS when it reaches its scroll position */
-.sticky-nav {
- position: fixed;
- width: 100%;
- top: 0;
-}
-
-/* Add some top padding to the page content to prevent sudden quick movement
-as the navigation bar gets a new position at the top of the page
-(position:fixed and top:0) */
-.sticky-nav + main {
- padding-top: 2rem;
-}
-
/* MAIN CONTENT */
main,
.content-container,
diff --git a/src/assets/js/navbar.js b/src/assets/js/navbar.js
deleted file mode 100644
index 4af68202..00000000
--- a/src/assets/js/navbar.js
+++ /dev/null
@@ -1,13 +0,0 @@
-// Make the navigation bar sticky
-const header = document.querySelector(".main-header");
-const navbar = document.querySelector(".navbar");
-
-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");
- }
-});