Navbar on scroll

src/css/styles.css

@@ -219,6 +219,10 @@ footer {
 
 .primary-btn:active {
   border: 1px solid #f0e9f2;
+  color: #f0e9f2;
+}
+.primary-btn:active img {
+  filter: invert(0);
 }
 
 .primary-btn:active::before {
@@ -317,7 +321,7 @@ footer {
     height: 100vh;
     background-color: #363d48;
     padding-top: 150px;
-    z-index: 98;
+    z-index: 1000;
     transition: 0.3s ease-in-out;
   }
   .mobile-nav.is-active {
@@ -374,13 +378,36 @@ footer {
   opacity: 0;
 }
 
-.header-bar-container {
+.header-bar {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 1rem 0;
-  position: relative;
-  z-index: 100;
+  padding: 1rem 1rem;
+  position: fixed;
+  width: 100%;
+  left: 0;
+  right: 0;
+  top: 0;
+  max-width: 1400px;
+  margin: 0 auto;
+  transition: all 0.3s ease-in-out;
+}
+
+.header-bar-container {
+  visibility: hidden;
+  position: fixed;
+  width: 100%;
+  left: 0;
+  transition: all 0.3s ease-in-out;
+  z-index: 9999;
+}
+.header-bar-container.scroll-up {
+  background-color: #363d48;
+  opacity: 0.9;
+  padding: 1.5rem;
+}
+.header-bar-container.scroll-down {
+  opacity: 0;
 }
 
 .logo-container {
@@ -569,7 +596,7 @@ footer {
   max-width: 90ch;
   position: relative;
   top: 50%;
-  transform: translate(0, -70%);
+  transform: translate(0, -50%);
 }
 
 .name-container {
@@ -603,7 +630,7 @@ footer {
   align-items: center;
   gap: 2rem;
   position: relative;
-  z-index: 5;
+  z-index: 1;
 }
 
 .btn-down-container {
@@ -648,7 +675,7 @@ footer {
     align-items: center;
     text-align: center;
     gap: 2rem;
-    transform: translate(0, -90%);
+    transform: translate(0, -70%);
   }
   .intro-container:last-child {
     padding-top: 1rem;
@@ -659,7 +686,7 @@ footer {
   }
   .btn-down-container {
     text-align: center;
-    transform: translate(-50%, -75%);
+    transform: translate(-50%, -80%);
     gap: 0.5rem;
   }
 }
@@ -726,8 +753,7 @@ footer {
   display: flex;
   align-items: flex-start;
   gap: 2rem;
-  position: relative;
-  z-index: 5;
+  z-index: 0;
 }
 
 .project-underline {

src/js/utils/mobileNavEventListeners.mjs → src/js/components/navigation/mobileNavEventListeners.mjs

@@ -1,5 +1,14 @@
-import { hamburgerMenu, mobileSoMeLinks, navLinks } from "../data/constants.mjs";
-import { toggleMobileNav, closeMobileNav, closeMobileNavByClickOutside, disableScrollWhenMobileNavOpen } from "./mobileNavHandlers.mjs";
+import {
+  hamburgerMenu,
+  mobileSoMeLinks,
+  navLinks,
+} from "../../data/constants.mjs";
+import {
+  toggleMobileNav,
+  closeMobileNav,
+  closeMobileNavByClickOutside,
+  disableScrollWhenMobileNavOpen,
+} from "./mobileNavHandlers.mjs";
 
 // handle all event listeners on the mobile nav
 export function mobileNavEventListeners() {

src/js/utils/mobileNavHandlers.mjs → src/js/components/navigation/mobileNavHandlers.mjs

@@ -1,4 +1,8 @@
-import { hamburgerMenu, mobileNav, HTMLbody } from "../data/constants.mjs";
+import {
+  hamburgerMenu,
+  mobileNav,
+  HTMLbody,
+} from "../../data/constants.mjs";
 
 export function toggleMobileNav() {
   // toggles the hamburger menu and mobile nav.

src/js/components/skills/renderSkillElements.mjs

@@ -0,0 +1,83 @@
+import { createFigureElement } from "./createFigureElement.mjs";
+
+const skillsContainers = document.querySelectorAll(".skill-slider");
+
+export const renderSkillElements = () => {
+  // Error handling if container isn't present
+  if (!skillsContainers.length) {
+    console.error("No container found with the class [skill-slider]");
+  }
+
+  // create skill elements and save to array
+  const SkillsElements = [];
+  SkillsElements.push(
+    createFigureElement(
+      "HTML5 icon",
+      "./src/assets/icons/programming-languages/html-5-svgrepo-com.webp",
+      "HTML"
+    )
+  );
+  SkillsElements.push(
+    createFigureElement(
+      "CSS icon",
+      "./src/assets/icons/programming-languages/css-3-svgrepo-com.webp",
+      "CSS"
+    )
+  );
+  SkillsElements.push(
+    createFigureElement(
+      "JavaScript icon",
+      "./src/assets/icons/programming-languages/javascript-svgrepo-com.webp",
+      "JavaScript"
+    )
+  );
+  SkillsElements.push(
+    createFigureElement(
+      "SASS icon",
+      "./src/assets/icons/programming-languages/sass-svgrepo-com.svg",
+      "SASS"
+    )
+  );
+  SkillsElements.push(
+    createFigureElement(
+      "Figma icon",
+      "./src/assets/icons/programming-languages/figma-svgrepo-com.webp",
+      "Figma"
+    )
+  );
+  SkillsElements.push(
+    createFigureElement(
+      "Visual Studio Code icon",
+      "./src/assets/icons/programming-languages/vs-code-svgrepo-com.webp",
+      "VS Code"
+    )
+  );
+  SkillsElements.push(
+    createFigureElement(
+      "GitHub icon",
+      "./src/assets/icons/programming-languages/github-svgrepo-com.webp",
+      "GitHub"
+    )
+  );
+  SkillsElements.push(
+    createFigureElement(
+      "Git icon",
+      "./src/assets/icons/programming-languages/git-svgrepo-com.webp",
+      "Git"
+    )
+  );
+  SkillsElements.push(
+    createFigureElement(
+      "WordPress icon",
+      "./src/assets/icons/programming-languages/wordpress-color-svgrepo-com.webp",
+      "WordPress"
+    )
+  );
+
+  // Append each skill element to both/all containers using the cloneNode method
+  skillsContainers.forEach((skillsContainer) => {
+    SkillsElements.forEach((element) => {
+      skillsContainer.appendChild(element.cloneNode(true));
+    });
+  });
+};

src/js/ui/displayHeaderOnScrollUp.mjs

@@ -0,0 +1,48 @@
+const headerBarContainer = document.querySelector(".header-bar-container");
+const headerBar = document.querySelector(".header-bar");
+
+export const displayHeaderOnScrollUp = () => {
+  // Keep track of last scroll position
+  let lastScroll = 0;
+  if (window.scrollY > 100) {
+    headerBarContainer.classList.add("scroll-down");
+  }
+
+  // updates the initial visibility on the nav bar
+  headerBarContainer.style.visibility = "visible";
+
+  window.addEventListener("scroll", () => {
+    const currentScroll = window.scrollY;
+
+    if (
+      // If scrolling down add class of scroll-down, it hides the nav bar
+      lastScroll < currentScroll &&
+      !headerBarContainer.classList.contains("scroll-down")
+    ) {
+      headerBarContainer.classList.remove("scroll-up");
+      headerBarContainer.classList.add("scroll-down");
+    }
+
+    if (
+      // If scrolling up, add scroll-up class that shows the nav bar, and removes top/bottom padding.
+      lastScroll > currentScroll &&
+      headerBarContainer.classList.contains("scroll-down")
+    ) {
+      headerBarContainer.classList.remove("scroll-down");
+      headerBarContainer.classList.add("scroll-up");
+      headerBar.style.padding = "0 1rem";
+    }
+
+    if (
+      // if scroll position is 100 pixels from the top it removes the class and adds initial padding, results in showing intial nav bar styling
+      lastScroll < 100 &&
+      headerBarContainer.classList.contains("scroll-up")
+    ) {
+      headerBarContainer.classList.remove("scroll-up");
+      headerBar.style.padding = "1rem 1rem";
+    }
+
+    // Updates the lastScroll to currentScroll to keep track of lates scroll position, needs to be at last
+    lastScroll = currentScroll;
+  });
+};

src/js/views/index.mjs

@@ -1,8 +1,10 @@
-import { mobileNavEventListeners } from "../utils/mobileNavEventListeners.mjs";
-
-import { renderSkillElements } from "../utils/renderSkillElements.mjs";
+import { mobileNavEventListeners } from "../components/navigation/mobileNavEventListeners.mjs";
+import { renderSkillElements } from "../components/skills/renderSkillElements.mjs";
+import { displayHeaderOnScrollUp } from "../ui/displayHeaderOnScrollUp.mjs";
 
 // Open/close the mobile nav
 mobileNavEventListeners();
 // Render Skill elements
 renderSkillElements();
+// Display nav bar on scroll up
+displayHeaderOnScrollUp();

src/scss/components/_mobile-nav.scss

@@ -57,7 +57,7 @@
     height: 100vh;
     background-color: variables.$sub-bg-colour;
     padding-top: 150px;
-    z-index: 98;
+    z-index: 1000;
     transition: variables.$transition;
   }
 

src/scss/components/_primary-button.scss

@@ -52,6 +52,11 @@
 // button active effect
 .primary-btn:active {
   border: 1px solid variables.$main-text-colour;
+  color: variables.$main-text-colour;
+
+  img {
+    filter: invert(0);
+  }
 }
 
 .primary-btn:active::before {

src/scss/layout/_header.scss

@@ -2,13 +2,38 @@
 // ----------------------------------
 // header / nav bar
 // ----------------------------------
-.header-bar-container {
+.header-bar {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 1rem 0;
-  position: relative; // to display header nav bar on top of the mobile nav.
-  z-index: 100; // to display header nav bar on top of the mobile nav.
+  padding: 1rem 1rem;
+  position: fixed;
+  width: 100%;
+  left: 0;
+  right: 0;
+  top: 0;
+  max-width: variables.$max-width;
+  margin: 0 auto;
+  transition: all variables.$transition;
+}
+
+.header-bar-container {
+  visibility: hidden; // hides the nav bar faster on page refresh
+  position: fixed;
+  width: 100%;
+  left: 0;
+  transition: all variables.$transition;
+  z-index: 9999;
+
+  // Classes thats get implemented when scrolling
+  &.scroll-up {
+    background-color: variables.$sub-bg-colour;
+    opacity: 0.9;
+    padding: 1.5rem;
+  }
+  &.scroll-down {
+    opacity: 0;
+  }
 }
 
 .logo-container {