feat: [#46] vertical nav redesign

* wip: new design for the vertical nav

* feat: fresh vertical nav aligned with new design

Author: cd-bash

src/components/vertical-nav/index.ts

@@ -11,7 +11,6 @@ const linkedinProfile: string = "https://www.linkedin.com/in/charlesdouc/"
 const instagramProfile: string = "https://www.instagram.com/charlesdouc/"
 const footerCopyrights: string = "© 2025 Charles Doucet - All Rights Reserved";
 
-
 type SocialLink = [
     path: string,
     image: string,
@@ -23,25 +22,23 @@ const FOO_SOCIALS: SocialLink[] = [
     [instagramProfile, instagramIcon]
 ]
 
-
 //-----------------------------------------------------------------------
 
 export function buildVerticalNav() {
     const navBox = document.createElement("div");
-    const navWrapper = document.createElement("div");
+    const navHeader = header();
     const navBreadcrumbs = document.createElement("div");
     const navInfo = document.createElement("div");
+    const navFooter = footer();
 
     navBox.id = "vertical-nav";
-    navWrapper.id = "nav-wrapper";
     navBreadcrumbs.id = "nav-breadcrumbs";
     navInfo.id = "nav-info";
 
-    navBox.appendChild(header());
-    navBox.appendChild(navWrapper);
-    navWrapper.appendChild(navBreadcrumbs);
-    navWrapper.appendChild(navInfo);
-    navBox.appendChild(footer());
+    navBox.appendChild(navHeader);
+    navHeader.appendChild(navBreadcrumbs);
+    navBox.appendChild(navInfo);
+    navBox.appendChild(navFooter);
 
     return navBox;
 }
@@ -58,7 +55,7 @@ export function renderNavInfo(info: HTMLElement) {
 
 //-----------------------------------------------------------------------
 
-function header() {
+const header = () => {
     const container = document.createElement("div");
     const topTriangle = document.createElement("div");
     const logo = document.createElement("div");
@@ -83,7 +80,7 @@ function header() {
 }
 
 
-function footer() {
+const footer = () => {
     const container = document.createElement("div");
     const socials = document.createElement("ul");
     const copyrights = document.createElement("p");

src/components/vertical-nav/info-project.ts

@@ -1,83 +1,55 @@
 import {renderer} from "./project-data-cube.ts";
 
-export type OutsideLink = [
-    name: string,
-    path: string,
-]
-
-export type LinkCollection = [
-    title: string,
-    links: OutsideLink[],
-]
 
-export type LinkButton = [
+export type ButtonLink = [
     label: string,
+    path: string,
+    highlight: boolean,
 ]
 
 //-----------------------------------------------------------------------
 
-export function projectInfo(collections: LinkCollection[], buttons: LinkButton[]) {
+export function projectInfo(buttons: ButtonLink[]) {
     const container = document.createElement('div');
+    const buttonList = document.createElement('ul');
+
     container.className = "project-info";
+    buttonList.className = "button-list";
     container.appendChild(dataSection());
-
-    collections.forEach(collection => {
-        const [title, links] = collection;
-        container.appendChild(linkSection(title, links));
-    })
+    container.appendChild(buttonList);
 
     buttons.forEach(button => {
-        const [label] = button;
-        container.appendChild(buttonSection(label));
+        buttonList.appendChild(createButton(button));
     })
 
     return container;
 }
 
 //-----------------------------------------------------------------------
 
-function linkSection(title: string, links: OutsideLink[]) {
-    const section = document.createElement('section');
-    const sectionTitle = document.createElement("h4");
-    const linkList = document.createElement('ul');
-
-    sectionTitle.textContent = title;
-
-    section.appendChild(sectionTitle);
-    section.appendChild(linkList);
-
-    links.forEach(link => {
-        const [name, path] = link;
-        const linkLine = document.createElement('li');
-        const linkElement = document.createElement("a");
-
-        linkElement.href = path;
-        linkElement.target = "_blank";
-        linkElement.textContent = name;
-
-        linkList.appendChild(linkLine);
-        linkLine.appendChild(linkElement);
-    })
-
-    return section;
-}
 
-function buttonSection(label: string) {
-    const section = document.createElement('section');
-    const buttonLine = document.createElement('button');
+function createButton(newButton: ButtonLink) {
+    const btn = document.createElement('li');
+    const btnLine = document.createElement('a');
+    const [label, path, highlight] = newButton;
 
-    buttonLine.type = "button";
-    buttonLine.textContent = label;
+    if (highlight) {
+        btn.className = "btn-highlight";
+    }
 
-    section.appendChild(buttonLine);
+    btnLine.type = "button";
+    btnLine.textContent = label;
+    btnLine.href = path;
+    btnLine.target = "_blank";
 
-    return section;
+    btn.appendChild(btnLine);
+    return btn;
 }
 
 function dataSection() {
     const detailSection = document.createElement("section");
     const detailTitle = document.createElement("h4");
-    detailTitle.textContent = "Tech Distribution";
+    detailTitle.textContent = "Made with";
 
     detailSection.appendChild(detailTitle);
     detailSection.appendChild(renderer.domElement);

src/components/vertical-nav/project-data-cube.ts

@@ -8,7 +8,7 @@ const scene = new THREE.Scene();
 const camera = new THREE.PerspectiveCamera( 75, 1, 0.1, 1000 );
 
 export const renderer = new THREE.WebGLRenderer();
-renderer.setSize( 230, 230 );
+renderer.setSize( 185, 185 );
 renderer.setAnimationLoop( animate );
 
 const geometry = new THREE.BoxGeometry( 1, 1, 1 );