💄 added text-colour highlight to navbar, renamed 'team' page to 'abou…

…t us'
UoaWDCC · Jun 28, 2024 · 4fca252 · 4fca252
1 parent 9919da4
commit 4fca252
Show file tree

Hide file tree

Showing 5 changed files with 178 additions and 60 deletions.
diff --git a/web/src/components/navigation/Header.tsx b/web/src/components/navigation/Header.tsx
@@ -5,78 +5,108 @@ interface NavItem {
 }
 
 const navItemsCenter: NavItem[] = [
-  {name: 'Home', route: '/'},
-  {name: 'Team', route: '/team'},
-  {name: 'Events', route: '/events'},
-  {name: 'Projects', route: '/projects'},
-  {name: 'Blog', route: '/blog'},
-]
+  { name: "Home", route: "/" },
+  { name: "About Us", route: "/about" },
+  { name: "Events", route: "/events" },
+  { name: "Projects", route: "/projects" },
+  { name: "Blog", route: "/blog" },
+];
 
 const navItemsRight: NavItem[] = [
-  {name: 'Linktree', route: 'https://go.wdcc.co.nz/'},
-  {name: 'Join for 2024', route: 'https://forms.gle/YX8RAdXGF4rTN3e27'},
-]
+  { name: "Linktree", route: "https://go.wdcc.co.nz/" },
+  { name: "Join for 2024", route: "https://forms.gle/YX8RAdXGF4rTN3e27" },
+];
 
 const Header = () => {
-const openMenu = () => {
-  // Disable scrolling
-  const body = document.querySelector<HTMLElement>("body");
-  if (body) body.style.overflowY = "hidden";
+  const currentPath = window.location.pathname;
+  const openMenu = () => {
+    // Disable scrolling
+    const body = document.querySelector<HTMLElement>("body");
+    if (body) body.style.overflowY = "hidden";
 
-  // Show menu
-  const menu = document.querySelector<HTMLElement>("#hamburg-options");
-  if (menu) menu.style.display = "flex";
-}
+    // Show menu
+    const menu = document.querySelector<HTMLElement>("#hamburg-options");
+    if (menu) menu.style.display = "flex";
+  };
 
-const closeMenu = () => {
-  // Enable scrolling
-  const body = document.querySelector<HTMLElement>("body");
-  if (body) body.style.overflowY = "auto";
+  const closeMenu = () => {
+    // Enable scrolling
+    const body = document.querySelector<HTMLElement>("body");
+    if (body) body.style.overflowY = "auto";
 
-  // Hide menu
-  const menu = document.querySelector<HTMLElement>("#hamburg-options");
-  if (menu) menu.style.display = "none";
-}
+    // Hide menu
+    const menu = document.querySelector<HTMLElement>("#hamburg-options");
+    if (menu) menu.style.display = "none";
+  };
 
   return (
-  <header className="z-50 relative">
-    <nav className="flex flex-row justify-between p-10 bg-transparent sticky items-center">
-      <div>
-        <a href="/" className="font-bold text-[#087df1] text-3xl lg:mr-8">WDCC</a>
-      </div>
-      <div className="flex md:hidden" onClick={openMenu}><img width={40} src="/hamburg.svg" /></div>
-      {/* Mobile Menu */}
-      <div style={{
-        display: 'none'
-      }} className="top-0 left-0 z-[999] rounded-xl fixed w-screen h-screen p-4 bg-white/50 backdrop-blur-lg shadow-sm" id="hamburg-options">
-        <div className="flex flex-col justify-center items-center w-full h-full" onClick={closeMenu}>
-          <div className="p-8 flex flex-col justify-center items-center gap-8 text-3xl">
-            {navItemsCenter.concat(navItemsRight).map((item, index) => (
-              <a href={item.route} key={index}>{item.name}</a>
-            ))}
-          </div>
+    <header className="z-50 relative">
+      <nav className="flex flex-row justify-between p-10 bg-transparent sticky items-center">
+        <div>
+          <a href="/" className="font-bold text-[#087df1] text-3xl lg:mr-8">
+            WDCC
+          </a>
         </div>
+        <div className="flex md:hidden" onClick={openMenu}>
+          <img width={40} src="/hamburg.svg" />
+        </div>
+        {/* Mobile Menu */}
+        <div
+          style={{
+            display: "none",
+          }}
+          className="top-0 left-0 z-[999] rounded-xl fixed w-screen h-screen p-4 bg-white/50 backdrop-blur-lg shadow-sm"
+          id="hamburg-options"
+        >
+          <div
+            className="flex flex-col justify-center items-center w-full h-full"
+            onClick={closeMenu}
+          >
+            <div className="p-8 flex flex-col justify-center items-center gap-8 text-3xl">
+              {navItemsCenter.concat(navItemsRight).map((item, index) => (
+                <a href={item.route} key={index}>
+                  {item.name}
+                </a>
+              ))}
+            </div>
+          </div>
         </div>
         {/* Desktop Menu */}
-      <div className="hidden md:flex md:flex-row gap-4 lg:gap-8 mx-4 text-xl cursor-pointer">
-        {navItemsCenter.map((item, index)=> (
-              <a href={item.route} key={index}>{item.name}</a>
-            ))}
-      </div>
-      <div className="hidden md:flex md:flex-row gap-4 lg:gap-8 text-center flex-shrink-0 text-xl cursor-pointer">
-  {navItemsRight.map((item, index) => (
-    item.name === 'Join for 2024' ? (
-      <a href={item.route} key={index} className="inline-block bg-primary text-white rounded-lg hover:bg-blue-700 transition duration-300 py-2 px-4">
-        {item.name}
-      </a>
-    ) : (
-      <a href={item.route} key={index} className="inline-block py-2 px-4">{item.name}</a>
-    )
-  ))}
-</div>
-    </nav>
-  </header>
-);
+        <div className="hidden md:flex md:flex-row gap-4 lg:gap-8 mx-4 text-xl cursor-pointer">
+          {navItemsCenter.map((item, index) => (
+            <a
+              href={item.route}
+              key={index}
+              className={`${currentPath === item.route && item.route !== "/" ? "text-primary" : ""} `}
+            >
+              {item.name}
+            </a>
+          ))}
+        </div>
+        <div className="hidden md:flex md:flex-row gap-4 lg:gap-8 text-center flex-shrink-0 text-xl cursor-pointer">
+          {navItemsRight.map((item, index) =>
+            item.name === "Join for 2024" ? (
+              <a
+                href={item.route}
+                key={index}
+                className="inline-block bg-primary text-white rounded-lg hover:bg-blue-700 transition duration-300 py-2 px-4"
+              >
+                {item.name}
+              </a>
+            ) : (
+              <a
+                href={item.route}
+                key={index}
+                className="inline-block py-2 px-4"
+              >
+                {item.name}
+              </a>
+            ),
+          )}
+        </div>
+      </nav>
+    </header>
+  );
 };
 
 export default Header;
diff --git a/web/src/pages/about/index.astro b/web/src/pages/about/index.astro
@@ -0,0 +1,22 @@
+---
+import "@/global.css";
+import Layout from "../../layouts/layout.astro";
+import fetchApi from "../../lib/strapi";
+const index = await fetchApi<any>({
+  endpoint: "about?populate=*",
+  wrappedByKey: "data",
+});
+
+---
+<Layout
+  title="WDCC"
+  description="The Web Development & Consulting Club @ The University of Auckland"
+>
+  <div class="container">
+    <h1
+      class="text-center font-bold leading-[2.7625rem] md:leading-[4.2rem] lg:leading-[5.8rem] text-3xl md:text-4xl lg:text-5xl"
+    >
+      About Us
+    </h1>
+  </div>
+</Layout>
diff --git a/web/src/pages/blog/index.astro b/web/src/pages/blog/index.astro
@@ -0,0 +1,22 @@
+---
+import "@/global.css";
+import Layout from "@/layouts/layout.astro";
+import fetchApi from "../../lib/strapi";
+const index = await fetchApi<any>({
+  endpoint: "blog?populate=*",
+  wrappedByKey: "data",
+});
+
+---
+<Layout
+  title="WDCC"
+  description="The Web Development & Consulting Club @ The University of Auckland"
+>
+  <div class="container">
+    <h1
+      class="text-center font-bold leading-[2.7625rem] md:leading-[4.2rem] lg:leading-[5.8rem] text-3xl md:text-4xl lg:text-5xl"
+    >
+      Blog
+    </h1>
+  </div>
+</Layout>
diff --git a/web/src/pages/events/index.astro b/web/src/pages/events/index.astro
@@ -0,0 +1,22 @@
+---
+import "@/global.css";
+import Layout from "@/layouts/layout.astro";
+import fetchApi from "../../lib/strapi";
+const index = await fetchApi<any>({
+  endpoint: "events?populate=*",
+  wrappedByKey: "data",
+});
+
+---
+<Layout
+  title="WDCC"
+  description="The Web Development & Consulting Club @ The University of Auckland"
+>
+  <div class="container">
+    <h1
+      class="text-center font-bold leading-[2.7625rem] md:leading-[4.2rem] lg:leading-[5.8rem] text-3xl md:text-4xl lg:text-5xl"
+    >
+      Events
+    </h1>
+  </div>
+</Layout>
diff --git a/web/src/pages/projects/index.astro b/web/src/pages/projects/index.astro
@@ -0,0 +1,22 @@
+---
+import "@/global.css";
+import Layout from "@/layouts/layout.astro";
+import fetchApi from "../../lib/strapi";
+const index = await fetchApi<any>({
+  endpoint: "projects?populate=*",
+  wrappedByKey: "data",
+});
+
+---
+<Layout
+  title="WDCC"
+  description="The Web Development & Consulting Club @ The University of Auckland"
+>
+  <div class="container">
+    <h1
+      class="text-center font-bold leading-[2.7625rem] md:leading-[4.2rem] lg:leading-[5.8rem] text-3xl md:text-4xl lg:text-5xl"
+    >
+      WDCC Projects
+    </h1>
+  </div>
+</Layout>