Merge pull request #143 from UoaWDCC/129_make-branch-dynamic

129 make navbar dynamic

next/app/layout.tsx

@@ -3,6 +3,7 @@ import Header from "@/components/header/header";
 import Modal from "@/components/modal/Modal";
 import ModalContextProvider from "@/components/modal/ModalContextProvider";
 import "./globals.css";
+import SmallNavbarFetcher from "@/components/header/SmallNavbarFetcher";
 
 export const metadata = {
   title: "Create Next App",
@@ -23,8 +24,11 @@ export default async function RootLayout({
         <ModalContextProvider>
           <div className="bg-gradient-1 isolate flex flex-col min-h-svh overflow-y-auto">
             {/* @ts-ignore */}
-            <Header />
-            <main className="grow overflow-x-hidden">{children}</main>
+            <div className=" invisible sm:visible">
+              <Header />
+            </div>
+            <SmallNavbarFetcher />
+            <main className="grow overflow-y-auto overflow-x-hidden">{children}</main>
             <Footer />
           </div>
           <Modal />

next/components/blocks/ImageWithText.module.css

@@ -26,6 +26,14 @@
   object-fit: cover;
   max-height: 80vh;
   width: 100%;
+  border-right: solid white 2px;
+
+}
+
+@media (max-width: 760px) {
+  .backgroundImg {
+    border-bottom: solid white 2px;
+  }
 }
 
 .Underline {

next/components/blocks/ImageWithText.tsx

@@ -17,7 +17,7 @@ export default function ImageWithText({ props }: ImageWithTextProps) {
   return (
     //
     // grid grid-cols-2 max-h-[80vh]
-    <div className="flex outline flex-col md:flex-row md:items-stretch">
+    <div className="flex border-solid border-2 border-white flex-col md:flex-row md:items-stretch">
       {/* <div className="flex"> */}
         <Image
           className={styles.backgroundImg}

next/components/header/SmallNavbar.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { getLargestImageUrl } from "@/util/image";
+import { motion } from "framer-motion";
+import Image from "next/image";
+import Link from "next/link";
+import { useState } from "react";
+import Cross from "../svg/Cross";
+import Hamburger from "../svg/Hamburger";
+import UpArrow from "../svg/UpArrow";
+import { HeaderData } from "./headerTypes";
+interface SmallNavbarProps {
+  data: HeaderData;
+}
+
+export default function SmallNavbar({ data }: SmallNavbarProps) {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [projectsOpen, setProjectsOpen] = useState(false);
+  const [membersOpen, setMembersOpen] = useState(false);
+  const logoSrc = getLargestImageUrl(data?.Logo);
+  const links = data?.navigation;
+
+  console.log(links);
+  const toggleMenu = () => {
+    setMenuOpen(!menuOpen);
+    setProjectsOpen(false);
+    setMembersOpen(false);
+  };
+
+  const toggleProjects = () => {
+    setProjectsOpen(!projectsOpen);
+  };
+
+  const toggleMembers = () => {
+    setMembersOpen(!membersOpen);
+  };
+
+  return (
+    <header
+      className={`text-white w-full p-4 sm:hidden ${menuOpen ? "relative" : "absolute"}`}
+    >
+      <div className="flex justify-between items-center w-full">
+        <div className="text-lg font-bold">
+          <Link href="/">
+            <Image
+              src={logoSrc}
+              alt="Younite Logo"
+              className="h-20 w-auto"
+              height={128}
+              width={256}
+              priority
+            />
+          </Link>
+        </div>
+        <div className="md:hidden">
+          <button onClick={toggleMenu}>
+            {menuOpen ? <Cross /> : <Hamburger />}
+          </button>
+        </div>
+      </div>
+
+      {menuOpen && (
+        <motion.div
+          className="top-full relative left-0 w-full m-2 ml-0 mt-4 -mb-40"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ type: "spring", bounce: 0, duration: 0.5 }}
+        >
+          <div className="flex flex-col justify-items-stretch ml-2">
+            <div>
+              <button onClick={toggleMembers} className="mb-2">
+                MEMBERS
+                {membersOpen ? (
+                  <UpArrow className="origin-center rotate-0" />
+                ) : (
+                  <UpArrow className="origin-[50%_40%] rotate-[180deg]" />
+                )}
+              </button>
+              {membersOpen && (
+                <div className="flex flex-col">
+                  {data.members.map(
+                    ({ CommitteeYear }: { CommitteeYear: number }) => (
+                      <Link
+                        onClick={toggleMenu}
+                        href={`/members/${CommitteeYear}`}
+                        key={CommitteeYear}
+                        className="mb-2 ml-4 min-w-16"
+                      >
+                        {CommitteeYear}
+                      </Link>
+                    ),
+                  )}
+                </div>
+              )}
+            </div>
+
+            <div>
+              <button onClick={toggleProjects}>
+                PROJECTS
+                {projectsOpen ? (
+                  <UpArrow className="origin-center rotate-0" />
+                ) : (
+                  <UpArrow className="origin-[50%_40%] rotate-[180deg]" />
+                )}
+              </button>
+              {projectsOpen && (
+                <div className="flex top-full flex-col py-1 ml-4">
+                  <Link
+                    href="/projects/active"
+                    className="my-1 min-w-16"
+                    onClick={toggleMenu}
+                  >
+                    ACTIVE
+                  </Link>
+                  <Link href="/projects/past" className="mt-1 min-w-16">
+                    PAST
+                  </Link>
+                </div>
+              )}
+            </div>
+
+            {links.map((link) => (
+              <Link
+                className="mt-2"
+                href={link.slug}
+                key={link.title}
+                onClick={toggleMenu}
+              >
+                {link.title.toLocaleUpperCase()}
+              </Link>
+            ))}
+          </div>
+        </motion.div>
+      )}
+    </header>
+  );
+}

next/components/header/SmallNavbarFetcher.tsx

@@ -0,0 +1,7 @@
+import SmallNavbar from "../header/SmallNavbar";
+import { getHeaderData } from "../header/headerDataFetcher";
+
+export default async function SmallNavbarFetcher() {
+  const headerData = await getHeaderData();
+  return <SmallNavbar data={headerData} />;
+}

next/components/header/header.module.css

@@ -8,7 +8,7 @@
   position: absolute;
   z-index: 30;
   isolation: isolate;
-  height: 8.5rem;
+  height: 8.5rem; /* Hides the header */
 }
 
 .nav {
@@ -31,4 +31,3 @@
     position: relative;
   }
 }
-

next/components/header/header.tsx

@@ -1,41 +1,8 @@
-import { headerSchema } from "@/schemas/single/Header";
 import { getLargestImageUrl } from "@/util/image";
-import fetchStrapi from "@/util/strapi";
 import Image from "next/image";
 import Link from "next/link";
-import { z } from "zod";
 import styles from "./header.module.css";
-
-async function getHeaderData() {
-  const resData = await fetchStrapi("header", headerSchema);
-  const membersData = await fetchStrapi("member-teams", z.any());
-
-  // Ensure membersData is an array and sort in descending order
-  const members = Array.isArray(membersData)
-    ? membersData
-        .map((item: any) => ({
-          ...item,
-          CommitteeYear: Number(item.CommitteeYear), // Convert to number for sorting
-        }))
-        .sort((a, b) => b.CommitteeYear - a.CommitteeYear) // Sort in descending order
-    : []; // Default to an empty array if not an array
-
-  const projects = [
-    {
-      Title: new Date().getFullYear(),
-      slug: "current",
-    },
-    {
-      Title: "Past",
-      slug: "past",
-    },
-  ];
-  return {
-    ...resData,
-    members,
-    projects,
-  };
-}
+import { getHeaderData } from "./headerDataFetcher";
 
 export default async function Header() {
   const data = await getHeaderData();

next/components/header/headerDataFetcher.tsx

@@ -0,0 +1,25 @@
+import fetchStrapi from "@/util/strapi";
+import { headerSchema } from "@/schemas/single/Header";
+import { z } from "zod";
+
+export async function getHeaderData() {
+    const resData = await fetchStrapi("header", headerSchema);
+    const membersData = await fetchStrapi("member-teams", z.any());
+    const members = Array.isArray(membersData)
+        ? membersData.map((item) => ({
+              ...item,
+              CommitteeYear: Number(item.CommitteeYear),
+          })).sort((a, b) => b.CommitteeYear - a.CommitteeYear)
+        : [];
+
+    const projects = [
+        { Title: new Date().getFullYear().toString(), slug: "current" },
+        { Title: "Past", slug: "past" },
+    ];
+
+    return {
+        ...resData,
+        members,
+        projects,
+    };
+}

next/components/header/headerTypes.tsx

@@ -0,0 +1,20 @@
+export type Navigation = {
+  title: string;
+  slug: string;
+};
+
+export type Member = {
+  CommitteeYear: number;
+};
+
+export type Project = {
+  Title: string;
+  slug: string;
+};
+
+export type HeaderData = {
+  navigation: Navigation[];
+  Logo?: any;
+  members: Member[];
+  projects?: Project[];
+};

next/components/svg/Cross.tsx

@@ -0,0 +1,18 @@
+export default function Cross() {
+  return (
+    <svg
+      className={`w-6 h-6 mr-2`}
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M6 18L18 6M6 6l12 12"
+      />
+    </svg>
+  );
+}

next/components/svg/Hamburger.tsx

@@ -0,0 +1,18 @@
+export default function Hamburger() {
+  return (
+    <svg
+      className={`w-6 h-6 mr-2`}
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M4 6h16 M4 12h16 M4 18h16"
+      />
+    </svg>
+  );
+}

next/components/svg/UpArrow.tsx

@@ -0,0 +1,18 @@
+export default function UpArrow({ className = "" }: { className?: String }) {
+  return (
+    <svg
+      className={`w-6 h-6 ml-1 inline ${className}`}
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M6 13 L11 7 L16 13"
+      />
+    </svg>
+  );
+}