feat: [#87] top navigation in place

Author: cd-bash

src/components/top-nav/index.ts

@@ -1,20 +1,37 @@
-type NavLinkItem = [
+import './styles.css';
+
+type LinkItem = [
     name: string,
     path: string,
 ]
 
-const navLinks: NavLinkItem[] = [
+const navLinks: LinkItem[] = [
     ['Side Quests', '/projects'],
     ['About', '/about'],
     ['Logs', '/logs'],
     ['Contact', '/contact'],
 ]
 
+//-----------------------------------------------------------------------
+
 export function buildTopNav() {
     const navBox = document.createElement("div");
     const ul = document.createElement("ul");
 
+    navBox.id = "top-nav";
+
+    navLinks.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);
+    })
 
+    navBox.appendChild(ul);
+    return navBox
 }

src/components/top-nav/styles.css

@@ -0,0 +1,44 @@
+#top-nav {
+    position: fixed;
+    top: 40px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    text-align: center;
+    padding: 0 50px;
+    z-index: 10;
+
+    ul {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 50px;
+        height: 60px;
+        margin: 0;
+        padding: 0 35px;
+        list-style: none;
+
+        border: 2px solid rgba(255, 255, 255, 0.1);
+        border-radius: 30px;
+        background-color: rgba(255, 255, 255, 0.05);
+
+        backdrop-filter: blur(30px);
+        -webkit-backdrop-filter: blur(30px);
+        overflow: hidden;
+    }
+
+    li a {
+        font-family: "Handjet", sans-serif;
+        font-size: 1.5em;
+        font-weight: 500;
+        text-transform: lowercase;
+        text-decoration: none;
+        color: #ffffff;
+        cursor: pointer;
+        transition: color 0.3s ease;
+
+        &:hover {
+            color: #3BFFC5;
+        }
+    }
+}

src/index.ts

@@ -1,6 +1,7 @@
 import { buildMainLogo } from "./components/logo";
 import { router } from "./core/router";
 import {homeView, buildViewBase, renderView} from "./views";
+import {buildTopNav} from "./components/top-nav";
 
 
 const routes = [
@@ -15,8 +16,10 @@ function init() {
     const body = document.getElementsByTagName("body")[0];
     const contentPage = buildViewBase();
     const mainLogo = buildMainLogo();
+    const nav = buildTopNav();
 
     body.appendChild(mainLogo);
+    body.appendChild(nav);
     body.appendChild(contentPage);