epic new breadcrumb

Author: derekxu04

frontend/src/components/About/AboutHomepage.tsx

@@ -1,5 +1,5 @@
-import Link from "next/link";
 import Image from "next/image";
+
 export default function AboutHomePage() {
     return (
         <section className="py-8 xl:px-24 sm:px-10 px-5" id="about">

frontend/src/components/About/index.tsx

@@ -58,7 +58,7 @@ const About = () => {
                 <div className="p-5 border border-[#595F6D] flex-1 rounded-lg mr-5 w-full sm:mb-0 mb-5">
                   <div className="flex text-[#3A76F8]">
                     <Image src="/assets/book_icon.svg" alt="Book" width={20} height={20} className="mr-2" />
-                    <Link href="/about/execs-directors-subcommittees">
+                    <Link href="/about/execs-directors-subcoms">
                       <span className="font-semibold hover:underline">execs-directors-subcoms</span>
                     </Link>
                   </div>

frontend/src/components/Navbar.tsx

@@ -4,11 +4,11 @@ import { useEffect, useState } from 'react';
 import Hamburger from './Hamburger';
 
 const Navbar = () => {
-  const [path, setPath] = useState<string>('');
+  const [path, setPath] = useState<string[]>([]);
   useEffect(() => {
-    const item: string | undefined = window.location.href.split('/').pop();
-    if (item == '' || item == undefined) setPath('HOME');
-    else setPath(item.toUpperCase());
+    const pathSegments: string[] | undefined = window.location.pathname.split('/').filter(segment => segment);
+    if (pathSegments === undefined) setPath([]);
+    else setPath(pathSegments.map(segment => segment.toUpperCase()));
   }, []);
 
   return (
@@ -21,7 +21,13 @@ const Navbar = () => {
           height={200}
           draggable={false}
         />
-        <p className="mt-3 text-xs">C:\INTERNAL STRUCTURE\{path}</p>
+        <p className="font-mono mt-3 text-s font-bold">
+          <span className="text-green-500">csesoc@unsw</span>
+          <span>:</span>
+          <span className="text-blue-500">~{path.map(segment => '/' + segment.toLowerCase())}</span>
+          <span>$ </span>
+          <span id="cursor" className="text-gray-400 inline-block animate-blink">_</span>
+        </p>
       </Link>
       <div>
         <div className="md:flex xl:gap-18 lg:gap-10 md:gap-5 text-right font-bold hidden">
@@ -44,7 +50,7 @@ const Navbar = () => {
         <div className="md:hidden xl:hidden lg:hidden text-right font-bold block">
           <Hamburger />
         </div>
-      </div>
+      </div>  
     </nav>
   );
 };

frontend/src/pages/about/execs-directors-subcommittees.tsx renamed to frontend/src/pages/about/execs-directors-subcoms.tsx

@@ -5,9 +5,9 @@ const ExecsDirectorsSubcommittees = () => {
   return (
     <section className="flex flex-col min-h-screen justify-between py-8 xl:px-24 md:px-10 px-5 relative overflow-hidden">
       <Navbar />
-      <section className="py-8 xl:px-24 sm:px-10 px-5" id="execs-directors-subcommitees">
+      <section className="py-8 xl:px-24 sm:px-10 px-5" id="execs-directors-subcommittees">
         <div className="text-center my-10">
-          <h1 className="font-bold text-6xl">EXECS, DIRECTORS & SUBCOMMITEES</h1>
+          <h1 className="font-bold text-6xl">EXECS, DIRECTORS & SUBCOMMITTEES</h1>
         </div>
 
         {/* CSESOC TEAM */}

frontend/src/styles/globals.css

@@ -11,3 +11,13 @@ body {
   background: #000031;
   font-family: 'Raleway', sans-serif;
 }
+
+@keyframes blink {
+  50% {
+    opacity: 0;
+  }
+}
+
+.animate-blink {
+  animation: blink 1s step-end infinite;
+}