feat: [#109] responsive navigation

Author: cd-bash

src/components/logo/assets/cd-labs-logo.png renamed to src/components/navigation/assets/cd-labs-logo.png

@@ -0,0 +1,24 @@
+import { buildTopNav } from "./top-nav";
+import { buildMobileNav } from "./mobile-nav";
+
+export type LinkItem = [
+    name: string,
+    path: string,
+]
+
+const navLinks: LinkItem[] = [
+    ['Side Quests', '/projects'],
+    ['About', '/about'],
+    ['Logs', '/logs'],
+    ['Contact', '/contact'],
+]
+
+//-----------------------------------------------------------------------
+
+export function buildNavigation() {
+    const navBox = document.createElement("div");
+    navBox.appendChild(buildTopNav(navLinks));
+    navBox.appendChild(buildMobileNav(navLinks));
+    return navBox
+}
+

src/components/navigation/assets/menu-icon.svg

@@ -2,7 +2,7 @@ import LOGO from './assets/cd-labs-logo.png';
 
 // --------------------------------------------------------------------------------
 
-export function buildMainLogo() {
+export function renderMainLogo() {
     const logoContainer = document.createElement('div');
     const logoLink = document.createElement('a');
     const logoImg = document.createElement('img');
@@ -23,15 +23,15 @@ export function buildMainLogo() {
     return logoContainer;
 }
 
-// --------------------------------------------------------------------------------
-
 export function changeLogoOnScroll() {
-    const logoContainer = document.querySelector('.main-logo') as HTMLElement;
-    if (!logoContainer) return;
-
-    if (window.scrollY > 50) {
-        logoContainer.classList.add('scrolled');
-    } else {
-        logoContainer.classList.remove('scrolled');
-    }
+    const logoContainers = document.querySelectorAll('.main-logo') as NodeListOf<HTMLElement>;
+    if (!logoContainers.length) return;
+
+    logoContainers.forEach(logoContainer => {
+        if (window.scrollY > 50) {
+            logoContainer.classList.add('scrolled');
+        } else {
+            logoContainer.classList.remove('scrolled');
+        }
+    });
 }

src/components/navigation/index.ts

@@ -0,0 +1,56 @@
+import MENU_ICON from './assets/menu-icon.svg';
+import { renderMainLogo } from './logo';
+import { LinkItem } from "./";
+
+//-----------------------------------------------------------------------
+
+export function buildMobileNav(links : LinkItem[]) {
+    const mobileNav = document.createElement("div");
+    mobileNav.id = "mobile-nav";
+
+    const menuButtonElement = menuButton();
+    const menuElement = mobileMenu(links);
+
+    mobileNav.appendChild(menuElement);
+    mobileNav.appendChild(renderMainLogo());
+    mobileNav.appendChild(menuButtonElement);
+    
+    menuButtonElement.addEventListener('click', () => {
+        mobileNav.classList.toggle('menu-open');
+    });
+
+    return mobileNav;
+}
+
+//-----------------------------------------------------------------------
+
+function menuButton() {
+    const menuButton = document.createElement("button");
+    menuButton.id = "menu-button";
+
+    const menuImg = document.createElement("img");
+    menuImg.src = MENU_ICON;
+    menuImg.alt = "Menu Icon";
+
+    menuButton.appendChild(menuImg);
+    return menuButton;
+}
+
+function mobileMenu(links: LinkItem[]) {
+    const menu = document.createElement("ul");
+    menu.className = "mobile-menu";
+
+    links.forEach(link => {
+        const [name, path] = link;
+        const li = document.createElement("li");
+        const a = document.createElement("a");
+
+        a.href = path;
+        a.textContent = name;
+
+        li.appendChild(a);
+        menu.appendChild(li);
+    })
+    
+    return menu;
+}

src/components/logo/index.ts renamed to src/components/navigation/logo.ts

@@ -0,0 +1,31 @@
+import { LinkItem } from "./";
+import { renderMainLogo } from "./logo";
+
+//-----------------------------------------------------------------------
+
+export function buildTopNav(links: LinkItem[]) {
+    const topNav = document.createElement("div");
+    const barBox = document.createElement("div");
+    const ul = document.createElement("ul");
+
+    topNav.id = "top-nav";
+    barBox.className = "bar-box";
+
+    links.forEach(link => {
+        const [name, path] = link;
+        const li = document.createElement("li");
+        const a = document.createElement("a");
+
+        a.href = path;
+        a.textContent = name;
+
+        li.appendChild(a);
+        ul.appendChild(li);
+    })
+
+    barBox.appendChild(ul);
+    topNav.appendChild(renderMainLogo());
+    topNav.appendChild(barBox);
+    return topNav
+}
+

src/components/navigation/mobile-nav.ts

@@ -1,7 +1,7 @@
-import {buildMainLogo, changeLogoOnScroll} from "./components/logo";
 import { router } from "./core/router";
 import {homeView, aboutView, buildViewBase, renderView} from "./views";
-import {buildTopNav} from "./components/top-nav";
+import {buildNavigation} from "./components/navigation";
+import {changeLogoOnScroll} from "./components/navigation/logo";
 
 
 const routes = [
@@ -16,10 +16,8 @@ routes.forEach(route => router.registerRoute(route.path, route.handler));
 function init() {
     const body = document.getElementsByTagName("body")[0];
     const contentPage = buildViewBase();
-    const mainLogo = buildMainLogo();
-    const nav = buildTopNav();
+    const nav = buildNavigation();
 
-    body.appendChild(mainLogo);
     body.appendChild(nav);
     window.addEventListener('scroll', changeLogoOnScroll);