From 0846cbc4229c8a94e96f113c666a2a90742fd1eb Mon Sep 17 00:00:00 2001 From: h4yleysh4rpe Date: Fri, 20 Sep 2024 20:41:34 +1200 Subject: [PATCH 01/18] :sparkles: basic closed navbar styling --- next/app/layout.tsx | 6 +- next/components/small_navbar/SmallNavbar.tsx | 107 +++++++++++++++++++ 2 files changed, 112 insertions(+), 1 deletion(-) create mode 100644 next/components/small_navbar/SmallNavbar.tsx diff --git a/next/app/layout.tsx b/next/app/layout.tsx index 5bda8f9..498f4d0 100644 --- a/next/app/layout.tsx +++ b/next/app/layout.tsx @@ -1,5 +1,6 @@ import Footer from "@/components/footer/footer"; import Header from "@/components/header/header"; +import SmallNavbar from "@/components/small_navbar/SmallNavbar"; import "./globals.css"; export const metadata = { @@ -19,7 +20,10 @@ export default async function RootLayout({ {/* @ts-ignore */} -
+ {/*
+
+
*/} +
{children}
diff --git a/next/components/small_navbar/SmallNavbar.tsx b/next/components/small_navbar/SmallNavbar.tsx new file mode 100644 index 0000000..ef67822 --- /dev/null +++ b/next/components/small_navbar/SmallNavbar.tsx @@ -0,0 +1,107 @@ +import Link from "next/link"; +import Image from "next/image"; +import fetchStrapi from "@/util/strapi"; +import { headerSchema } from "@/schemas/single/Header"; +import { getLargestImageUrl } from "@/util/image"; +import { z } from "zod"; + +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, + }; +} + +const SmallNavbar = async () => { + const data = await getHeaderData(); + const logoSrc = getLargestImageUrl(data.Logo); + + return ( +
+
+
+ + Younite Logo + +
+
+ +
+ +
+
+ ); +}; + +export default SmallNavbar; From 9528e626036c5ab371a08f56813aa05e93e0422f Mon Sep 17 00:00:00 2001 From: h4yleysh4rpe Date: Fri, 20 Sep 2024 21:01:38 +1200 Subject: [PATCH 02/18] :lipstick: hide wide header at small widths, hide small header at large widths --- next/components/header/header.module.css | 28 ++++++++++++-------- next/components/small_navbar/SmallNavbar.tsx | 2 +- 2 files changed, 18 insertions(+), 12 deletions(-) diff --git a/next/components/header/header.module.css b/next/components/header/header.module.css index 7d7d420..24c5c87 100644 --- a/next/components/header/header.module.css +++ b/next/components/header/header.module.css @@ -1,14 +1,21 @@ .header { - display: flex; - flex-direction: row; - justify-content: space-between; - width: 100%; - align-items: center; - padding: 0.25rem var(--gutter); - position: absolute; - z-index: 1000; - isolation: isolate; - height: 8.5rem; + display: none; +} + + +@media (min-width: 640px) { + .header { + display: flex; + flex-direction: row; + justify-content: space-between; + width: 100%; + align-items: center; + padding: 0.25rem var(--gutter); + position: absolute; + z-index: 1000; + isolation: isolate; + height: 8.5rem; /* Hides the header */ + } } .nav { @@ -31,4 +38,3 @@ position: relative; } } - diff --git a/next/components/small_navbar/SmallNavbar.tsx b/next/components/small_navbar/SmallNavbar.tsx index ef67822..8fb7f62 100644 --- a/next/components/small_navbar/SmallNavbar.tsx +++ b/next/components/small_navbar/SmallNavbar.tsx @@ -41,7 +41,7 @@ const SmallNavbar = async () => { const logoSrc = getLargestImageUrl(data.Logo); return ( -
+
From 964929a5df1239cadae9898396528c7738080414 Mon Sep 17 00:00:00 2001 From: h4yleysh4rpe Date: Wed, 25 Sep 2024 13:34:52 +1200 Subject: [PATCH 03/18] :lipstick: remove margin at small screen sizes --- next/components/small_navbar/SmallNavbar.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/next/components/small_navbar/SmallNavbar.tsx b/next/components/small_navbar/SmallNavbar.tsx index 8fb7f62..f0b5b6e 100644 --- a/next/components/small_navbar/SmallNavbar.tsx +++ b/next/components/small_navbar/SmallNavbar.tsx @@ -41,8 +41,8 @@ const SmallNavbar = async () => { const logoSrc = getLargestImageUrl(data.Logo); return ( -
-
+
+
{ strokeLinejoin="round" strokeWidth={2} d="M4 6h16 M4 12h16 M4 18h16" - /> + />
From 8441c42a6e5b5f2ffb1d7106067543df364d35cf Mon Sep 17 00:00:00 2001 From: h4yleysh4rpe Date: Wed, 25 Sep 2024 14:14:18 +1200 Subject: [PATCH 04/18] :lipstick: make correct size header visible across pages --- next/app/layout.tsx | 4 ++-- next/components/header/header.module.css | 27 +++++++++--------------- 2 files changed, 12 insertions(+), 19 deletions(-) diff --git a/next/app/layout.tsx b/next/app/layout.tsx index 498f4d0..954f2d1 100644 --- a/next/app/layout.tsx +++ b/next/app/layout.tsx @@ -20,9 +20,9 @@ export default async function RootLayout({ {/* @ts-ignore */} - {/*
+
-
*/} +
{children} diff --git a/next/components/header/header.module.css b/next/components/header/header.module.css index 24c5c87..8a6956e 100644 --- a/next/components/header/header.module.css +++ b/next/components/header/header.module.css @@ -1,21 +1,14 @@ .header { - display: none; -} - - -@media (min-width: 640px) { - .header { - display: flex; - flex-direction: row; - justify-content: space-between; - width: 100%; - align-items: center; - padding: 0.25rem var(--gutter); - position: absolute; - z-index: 1000; - isolation: isolate; - height: 8.5rem; /* Hides the header */ - } + display: flex; + flex-direction: row; + justify-content: space-between; + width: 100%; + align-items: center; + padding: 0.25rem var(--gutter); + position: absolute; + z-index: 1000; + isolation: isolate; + height: 8.5rem; /* Hides the header */ } .nav { From 71c1c365343eb7b67fd10c502bcf2c2f63a5e7ad Mon Sep 17 00:00:00 2001 From: h4yleysh4rpe Date: Tue, 1 Oct 2024 15:04:19 +1300 Subject: [PATCH 05/18] :art: refactor small navbar to server and client components --- next/app/layout.tsx | 4 +- next/components/small_navbar/SmallNavbar.tsx | 67 ++++++++----------- .../small_navbar/SmallNavbarFetcher.tsx | 32 +++++++++ 3 files changed, 63 insertions(+), 40 deletions(-) create mode 100644 next/components/small_navbar/SmallNavbarFetcher.tsx diff --git a/next/app/layout.tsx b/next/app/layout.tsx index 954f2d1..5bac0d0 100644 --- a/next/app/layout.tsx +++ b/next/app/layout.tsx @@ -1,7 +1,7 @@ import Footer from "@/components/footer/footer"; import Header from "@/components/header/header"; -import SmallNavbar from "@/components/small_navbar/SmallNavbar"; import "./globals.css"; +import SmallNavbarFetcher from "@/components/small_navbar/SmallNavbarFetcher"; export const metadata = { title: "Create Next App", @@ -23,7 +23,7 @@ export default async function RootLayout({
- +
{children}
diff --git a/next/components/small_navbar/SmallNavbar.tsx b/next/components/small_navbar/SmallNavbar.tsx index f0b5b6e..3e0929f 100644 --- a/next/components/small_navbar/SmallNavbar.tsx +++ b/next/components/small_navbar/SmallNavbar.tsx @@ -1,44 +1,37 @@ +"use client"; + import Link from "next/link"; import Image from "next/image"; -import fetchStrapi from "@/util/strapi"; -import { headerSchema } from "@/schemas/single/Header"; +import { useState } from "react"; import { getLargestImageUrl } from "@/util/image"; -import { z } from "zod"; - -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 +interface HeaderData { + navigation?: Array<{ + title: string; + slug: string; + }>; + Logo?: any; + members?: Array<{ + CommitteeYear: number; + // Add other member properties + }>; + projects?: Array<{ + Title: string; + slug: string; + }>; +} - const projects = [ - { - Title: new Date().getFullYear(), - slug: "current", - }, - { - Title: "Past", - slug: "past", - }, - ]; - return { - ...resData, - members, - projects, - }; +interface SmallNavbarProps { + data: HeaderData; } +export default function SmallNavbar({ data }: SmallNavbarProps) { + const [menuOpen, setMenuOpen] = useState(false); + const logoSrc = getLargestImageUrl(data?.Logo); -const SmallNavbar = async () => { - const data = await getHeaderData(); - const logoSrc = getLargestImageUrl(data.Logo); + const toggleMenu = () => { + setMenuOpen(!menuOpen); + console.log("state changed"); + }; return (
@@ -56,7 +49,7 @@ const SmallNavbar = async () => {
-
); -}; - -export default SmallNavbar; +} diff --git a/next/components/small_navbar/SmallNavbarFetcher.tsx b/next/components/small_navbar/SmallNavbarFetcher.tsx new file mode 100644 index 0000000..187db07 --- /dev/null +++ b/next/components/small_navbar/SmallNavbarFetcher.tsx @@ -0,0 +1,32 @@ +// HeaderFetcher.jsx +import SmallNavbar from './SmallNavbar'; +import fetchStrapi from "@/util/strapi"; +import { headerSchema } from "@/schemas/single/Header"; +import { z } from "zod"; + +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, + }; +} + +export default async function SmallNavbarFetcher() { + const headerData = await getHeaderData(); + return ; +} From e786454bfb163d0caa4632327d0101816e4e5d08 Mon Sep 17 00:00:00 2001 From: h4yleysh4rpe Date: Tue, 1 Oct 2024 15:40:23 +1300 Subject: [PATCH 06/18] :sparkles: create dropdown off navbar --- next/components/small_navbar/SmallNavbar.tsx | 84 ++++++++++++-------- 1 file changed, 51 insertions(+), 33 deletions(-) diff --git a/next/components/small_navbar/SmallNavbar.tsx b/next/components/small_navbar/SmallNavbar.tsx index 3e0929f..f422f09 100644 --- a/next/components/small_navbar/SmallNavbar.tsx +++ b/next/components/small_navbar/SmallNavbar.tsx @@ -6,12 +6,12 @@ import { useState } from "react"; import { getLargestImageUrl } from "@/util/image"; interface HeaderData { - navigation?: Array<{ - title: string; - slug: string; - }>; - Logo?: any; - members?: Array<{ + navigation: Array<{ + title: string; + slug: string; + }>; + Logo?: any; + members: Array<{ CommitteeYear: number; // Add other member properties }>; @@ -27,14 +27,17 @@ interface SmallNavbarProps { export default function SmallNavbar({ data }: SmallNavbarProps) { const [menuOpen, setMenuOpen] = useState(false); const logoSrc = getLargestImageUrl(data?.Logo); + const links = data?.navigation; const toggleMenu = () => { setMenuOpen(!menuOpen); - console.log("state changed"); + console.log(menuOpen); }; return ( -
+
@@ -66,33 +69,48 @@ export default function SmallNavbar({ data }: SmallNavbarProps) {
- -
+ ))} + +
+ PROJECTS +
+ + Active + + + Past + +
+
+
+
+ )}
); } From 2869ce75429e34a09100c24db3f1fbc622c72333 Mon Sep 17 00:00:00 2001 From: h4yleysh4rpe Date: Tue, 1 Oct 2024 16:00:22 +1300 Subject: [PATCH 07/18] :lipstick: fix styling spacing issues, add projects dropdown --- next/components/small_navbar/SmallNavbar.tsx | 66 +++++++++++--------- 1 file changed, 36 insertions(+), 30 deletions(-) diff --git a/next/components/small_navbar/SmallNavbar.tsx b/next/components/small_navbar/SmallNavbar.tsx index f422f09..7d33fcd 100644 --- a/next/components/small_navbar/SmallNavbar.tsx +++ b/next/components/small_navbar/SmallNavbar.tsx @@ -26,12 +26,17 @@ interface SmallNavbarProps { } export default function SmallNavbar({ data }: SmallNavbarProps) { const [menuOpen, setMenuOpen] = useState(false); + const [projectsOpen, setProjectsOpen] = useState(false); const logoSrc = getLargestImageUrl(data?.Logo); const links = data?.navigation; const toggleMenu = () => { setMenuOpen(!menuOpen); - console.log(menuOpen); + setProjectsOpen(false); + }; + + const toggleProjects = () => { + setProjectsOpen(!projectsOpen); }; return ( @@ -72,41 +77,42 @@ export default function SmallNavbar({ data }: SmallNavbarProps) { {menuOpen && ( -
-
- 0 - ? `/members/${data.members[0].CommitteeYear}` - : "/" - } - > - MEMBERS - +
+
+ 0 + ? `/members/${data.members[0].CommitteeYear}` + : "/" + } + > + MEMBERS + {links.map((link) => ( {link.title.toLocaleUpperCase()} ))} -
- PROJECTS -
- - Active - - - Past - -
+
+ + {projectsOpen && ( +
+ + ACTIVE + + + PAST + +
+ )}
From 1122c6d63fc805678896f98658cab7108fd78f86 Mon Sep 17 00:00:00 2001 From: h4yleysh4rpe Date: Tue, 1 Oct 2024 16:07:15 +1300 Subject: [PATCH 08/18] :sparkles: toggle cross and hamburger icon on dropdown click --- next/components/small_navbar/SmallNavbar.tsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/next/components/small_navbar/SmallNavbar.tsx b/next/components/small_navbar/SmallNavbar.tsx index 7d33fcd..58ef171 100644 --- a/next/components/small_navbar/SmallNavbar.tsx +++ b/next/components/small_navbar/SmallNavbar.tsx @@ -59,7 +59,7 @@ export default function SmallNavbar({ data }: SmallNavbarProps) {
From 0a78ae016579abc2720f59cb4370ab629f9c0aa5 Mon Sep 17 00:00:00 2001 From: h4yleysh4rpe Date: Wed, 2 Oct 2024 14:01:07 +1300 Subject: [PATCH 09/18] :lipstick: add member page dropdown --- next/components/small_navbar/SmallNavbar.tsx | 48 ++++++++++++-------- 1 file changed, 30 insertions(+), 18 deletions(-) diff --git a/next/components/small_navbar/SmallNavbar.tsx b/next/components/small_navbar/SmallNavbar.tsx index 58ef171..d199588 100644 --- a/next/components/small_navbar/SmallNavbar.tsx +++ b/next/components/small_navbar/SmallNavbar.tsx @@ -27,18 +27,25 @@ interface SmallNavbarProps { 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 (
- 0 - ? `/members/${data.members[0].CommitteeYear}` - : "/" - } - > - MEMBERS - +
+ + {membersOpen && ( +
+ {data.members.map( + ({ CommitteeYear }: { CommitteeYear: number }) => ( + + {CommitteeYear} + + ), + )} +
+ )} +
+ {links.map((link) => ( {link.title.toLocaleUpperCase()} @@ -113,16 +131,10 @@ export default function SmallNavbar({ data }: SmallNavbarProps) { {projectsOpen && (
- + ACTIVE - + PAST
From 503e5efd953d470c6e4d87f387948e1073815c1c Mon Sep 17 00:00:00 2001 From: h4yleysh4rpe Date: Wed, 9 Oct 2024 13:40:08 +1300 Subject: [PATCH 10/18] :sparkles: shift page down on open navbar --- next/components/small_navbar/SmallNavbar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/next/components/small_navbar/SmallNavbar.tsx b/next/components/small_navbar/SmallNavbar.tsx index d199588..66b2267 100644 --- a/next/components/small_navbar/SmallNavbar.tsx +++ b/next/components/small_navbar/SmallNavbar.tsx @@ -98,7 +98,7 @@ export default function SmallNavbar({ data }: SmallNavbarProps) {
{menuOpen && ( -
+
{projectsOpen && ( -
+
ACTIVE From 8638c7970196d81f67be74af120a5fa16c2bc38e Mon Sep 17 00:00:00 2001 From: h4yleysh4rpe Date: Wed, 9 Oct 2024 14:03:42 +1300 Subject: [PATCH 11/18] :sparkles: add arrows to indicate open/closed subsections --- next/components/small_navbar/SmallNavbar.tsx | 4 ++++ next/components/svg/DownArrow.tsx | 19 +++++++++++++++++++ next/components/svg/UpArrow.tsx | 19 +++++++++++++++++++ 3 files changed, 42 insertions(+) create mode 100644 next/components/svg/DownArrow.tsx create mode 100644 next/components/svg/UpArrow.tsx diff --git a/next/components/small_navbar/SmallNavbar.tsx b/next/components/small_navbar/SmallNavbar.tsx index 66b2267..1787886 100644 --- a/next/components/small_navbar/SmallNavbar.tsx +++ b/next/components/small_navbar/SmallNavbar.tsx @@ -4,6 +4,8 @@ import Link from "next/link"; import Image from "next/image"; import { useState } from "react"; import { getLargestImageUrl } from "@/util/image"; +import DownArrow from "../svg/DownArrow"; +import UpArrow from "../svg/UpArrow"; interface HeaderData { navigation: Array<{ @@ -104,6 +106,7 @@ export default function SmallNavbar({ data }: SmallNavbarProps) { + {membersOpen ? : } {membersOpen && (
{data.members.map( @@ -129,6 +132,7 @@ export default function SmallNavbar({ data }: SmallNavbarProps) {
+ {projectsOpen ? : } {projectsOpen && (
diff --git a/next/components/svg/DownArrow.tsx b/next/components/svg/DownArrow.tsx new file mode 100644 index 0000000..d890b7f --- /dev/null +++ b/next/components/svg/DownArrow.tsx @@ -0,0 +1,19 @@ +export default function DownArrow() { + return ( + //
+ + + + ); +} diff --git a/next/components/svg/UpArrow.tsx b/next/components/svg/UpArrow.tsx new file mode 100644 index 0000000..9f80662 --- /dev/null +++ b/next/components/svg/UpArrow.tsx @@ -0,0 +1,19 @@ +export default function UpArrow() { + return ( + //
+ + + + ); +} From ca2b846e886a7b1931d27ac49f2bddefb04922fa Mon Sep 17 00:00:00 2001 From: h4yleysh4rpe Date: Wed, 9 Oct 2024 14:09:34 +1300 Subject: [PATCH 12/18] :sparkles: add animation to navbar dropdown --- next/components/small_navbar/SmallNavbar.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/next/components/small_navbar/SmallNavbar.tsx b/next/components/small_navbar/SmallNavbar.tsx index 1787886..f9fddeb 100644 --- a/next/components/small_navbar/SmallNavbar.tsx +++ b/next/components/small_navbar/SmallNavbar.tsx @@ -2,6 +2,7 @@ import Link from "next/link"; import Image from "next/image"; +import { motion } from "framer-motion"; import { useState } from "react"; import { getLargestImageUrl } from "@/util/image"; import DownArrow from "../svg/DownArrow"; @@ -100,7 +101,11 @@ export default function SmallNavbar({ data }: SmallNavbarProps) {
{menuOpen && ( -
+
-
+ )}
); From daf01d57ac864e3c2db03739d485a6d388b77d4b Mon Sep 17 00:00:00 2001 From: h4yleysh4rpe Date: Thu, 10 Oct 2024 16:40:30 +1300 Subject: [PATCH 13/18] :lipstick: hide navbar on change page, adjust header lcoation --- next/components/small_navbar/SmallNavbar.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/next/components/small_navbar/SmallNavbar.tsx b/next/components/small_navbar/SmallNavbar.tsx index f9fddeb..54e302a 100644 --- a/next/components/small_navbar/SmallNavbar.tsx +++ b/next/components/small_navbar/SmallNavbar.tsx @@ -117,6 +117,7 @@ export default function SmallNavbar({ data }: SmallNavbarProps) { {data.members.map( ({ CommitteeYear }: { CommitteeYear: number }) => ( {links.map((link) => ( - + {link.title.toLocaleUpperCase()} ))} @@ -140,7 +141,7 @@ export default function SmallNavbar({ data }: SmallNavbarProps) { {projectsOpen ? : } {projectsOpen && (
- + ACTIVE From 2a392b86b91b3278a8458967fd721d29f13b014b Mon Sep 17 00:00:00 2001 From: h4yleysh4rpe Date: Thu, 10 Oct 2024 16:56:29 +1300 Subject: [PATCH 14/18] :memo: move hamburger/cross icons in --- next/components/small_navbar/SmallNavbar.tsx | 30 +++++++++++++------- 1 file changed, 20 insertions(+), 10 deletions(-) diff --git a/next/components/small_navbar/SmallNavbar.tsx b/next/components/small_navbar/SmallNavbar.tsx index 54e302a..0a40708 100644 --- a/next/components/small_navbar/SmallNavbar.tsx +++ b/next/components/small_navbar/SmallNavbar.tsx @@ -69,7 +69,7 @@ export default function SmallNavbar({ data }: SmallNavbarProps) {
- {membersOpen ? : } + {membersOpen ? : } {membersOpen && (
{data.members.map( @@ -131,17 +132,26 @@ export default function SmallNavbar({ data }: SmallNavbarProps) {
{links.map((link) => ( - + {link.title.toLocaleUpperCase()} ))}
- {projectsOpen ? : } + {projectsOpen ? : } {projectsOpen && (
- + ACTIVE From 5bf0367de5bf266b0266250a3106b59f23c3bc9d Mon Sep 17 00:00:00 2001 From: h4yleysh4rpe Date: Wed, 16 Oct 2024 14:26:05 +1300 Subject: [PATCH 15/18] :lipstick: make arrows clickable, make SVGs components --- next/components/small_navbar/SmallNavbar.tsx | 52 +++++++------------- next/components/svg/Cross.tsx | 18 +++++++ next/components/svg/DownArrow.tsx | 19 ------- next/components/svg/Hamburger.tsx | 18 +++++++ next/components/svg/UpArrow.tsx | 29 ++++++----- 5 files changed, 68 insertions(+), 68 deletions(-) create mode 100644 next/components/svg/Cross.tsx delete mode 100644 next/components/svg/DownArrow.tsx create mode 100644 next/components/svg/Hamburger.tsx diff --git a/next/components/small_navbar/SmallNavbar.tsx b/next/components/small_navbar/SmallNavbar.tsx index 0a40708..cd3c22f 100644 --- a/next/components/small_navbar/SmallNavbar.tsx +++ b/next/components/small_navbar/SmallNavbar.tsx @@ -5,10 +5,11 @@ import Image from "next/image"; import { motion } from "framer-motion"; import { useState } from "react"; import { getLargestImageUrl } from "@/util/image"; -import DownArrow from "../svg/DownArrow"; import UpArrow from "../svg/UpArrow"; +import Hamburger from "../svg/Hamburger"; +import Cross from "../svg/Cross"; -interface HeaderData { +type HeaderData = { navigation: Array<{ title: string; slug: string; @@ -22,7 +23,7 @@ interface HeaderData { Title: string; slug: string; }>; -} +}; interface SmallNavbarProps { data: HeaderData; @@ -68,34 +69,7 @@ export default function SmallNavbar({ data }: SmallNavbarProps) {
@@ -111,8 +85,12 @@ export default function SmallNavbar({ data }: SmallNavbarProps) {
- {membersOpen ? : } {membersOpen && (
{data.members.map( @@ -143,8 +121,14 @@ export default function SmallNavbar({ data }: SmallNavbarProps) { ))}
- - {projectsOpen ? : } + {projectsOpen && (
+ + + ); +} diff --git a/next/components/svg/DownArrow.tsx b/next/components/svg/DownArrow.tsx deleted file mode 100644 index d890b7f..0000000 --- a/next/components/svg/DownArrow.tsx +++ /dev/null @@ -1,19 +0,0 @@ -export default function DownArrow() { - return ( - //
- - - - ); -} diff --git a/next/components/svg/Hamburger.tsx b/next/components/svg/Hamburger.tsx new file mode 100644 index 0000000..124d77a --- /dev/null +++ b/next/components/svg/Hamburger.tsx @@ -0,0 +1,18 @@ +export default function Hamburger() { + return ( + + + + ); +} diff --git a/next/components/svg/UpArrow.tsx b/next/components/svg/UpArrow.tsx index 9f80662..db2114c 100644 --- a/next/components/svg/UpArrow.tsx +++ b/next/components/svg/UpArrow.tsx @@ -1,19 +1,18 @@ -export default function UpArrow() { +export default function UpArrow({ className = "" }: { className?: String }) { return ( - //
- - + 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" + > + + ); } From 35deea65d34846c6bb7258ef6613e9426facc4aa Mon Sep 17 00:00:00 2001 From: h4yleysh4rpe Date: Sun, 20 Oct 2024 18:07:29 +1300 Subject: [PATCH 16/18] :bricks: move header data type, header data fetcher into their own files --- next/components/header/header.tsx | 35 +------------------ next/components/header/headerData.tsx | 20 +++++++++++ next/components/header/headerDataFetcher.tsx | 25 +++++++++++++ next/components/small_navbar/SmallNavbar.tsx | 19 ++-------- .../small_navbar/SmallNavbarFetcher.tsx | 26 +------------- 5 files changed, 49 insertions(+), 76 deletions(-) create mode 100644 next/components/header/headerData.tsx create mode 100644 next/components/header/headerDataFetcher.tsx diff --git a/next/components/header/header.tsx b/next/components/header/header.tsx index b6c14d9..0482e3e 100644 --- a/next/components/header/header.tsx +++ b/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"; // Adjust the path as necessary export default async function Header() { const data = await getHeaderData(); diff --git a/next/components/header/headerData.tsx b/next/components/header/headerData.tsx new file mode 100644 index 0000000..d834a09 --- /dev/null +++ b/next/components/header/headerData.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[]; +}; \ No newline at end of file diff --git a/next/components/header/headerDataFetcher.tsx b/next/components/header/headerDataFetcher.tsx new file mode 100644 index 0000000..4124fd4 --- /dev/null +++ b/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, + }; +} \ No newline at end of file diff --git a/next/components/small_navbar/SmallNavbar.tsx b/next/components/small_navbar/SmallNavbar.tsx index cd3c22f..aef6f10 100644 --- a/next/components/small_navbar/SmallNavbar.tsx +++ b/next/components/small_navbar/SmallNavbar.tsx @@ -8,26 +8,11 @@ import { getLargestImageUrl } from "@/util/image"; import UpArrow from "../svg/UpArrow"; import Hamburger from "../svg/Hamburger"; import Cross from "../svg/Cross"; - -type HeaderData = { - navigation: Array<{ - title: string; - slug: string; - }>; - Logo?: any; - members: Array<{ - CommitteeYear: number; - // Add other member properties - }>; - projects?: Array<{ - Title: string; - slug: string; - }>; -}; - +import { HeaderData } from "../header/headerData"; interface SmallNavbarProps { data: HeaderData; } + export default function SmallNavbar({ data }: SmallNavbarProps) { const [menuOpen, setMenuOpen] = useState(false); const [projectsOpen, setProjectsOpen] = useState(false); diff --git a/next/components/small_navbar/SmallNavbarFetcher.tsx b/next/components/small_navbar/SmallNavbarFetcher.tsx index 187db07..196ae01 100644 --- a/next/components/small_navbar/SmallNavbarFetcher.tsx +++ b/next/components/small_navbar/SmallNavbarFetcher.tsx @@ -1,30 +1,6 @@ // HeaderFetcher.jsx import SmallNavbar from './SmallNavbar'; -import fetchStrapi from "@/util/strapi"; -import { headerSchema } from "@/schemas/single/Header"; -import { z } from "zod"; - -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, - }; -} +import { getHeaderData } from '../header/headerDataFetcher'; export default async function SmallNavbarFetcher() { const headerData = await getHeaderData(); From 21ba57d6656e86b2f047bc6b960416bf9d7ba832 Mon Sep 17 00:00:00 2001 From: h4yleysh4rpe Date: Mon, 21 Oct 2024 12:03:44 +1300 Subject: [PATCH 17/18] :memo: get rid of old outlines for debugging --- next/app/layout.tsx | 2 +- next/components/blocks/ImageWithText.module.css | 8 ++++++++ next/components/blocks/ImageWithText.tsx | 2 +- next/components/members/Chairman.tsx | 2 +- 4 files changed, 11 insertions(+), 3 deletions(-) diff --git a/next/app/layout.tsx b/next/app/layout.tsx index 5bac0d0..a942770 100644 --- a/next/app/layout.tsx +++ b/next/app/layout.tsx @@ -20,7 +20,7 @@ export default async function RootLayout({ {/* @ts-ignore */} -
+
diff --git a/next/components/blocks/ImageWithText.module.css b/next/components/blocks/ImageWithText.module.css index 5314b70..3eef7b7 100644 --- a/next/components/blocks/ImageWithText.module.css +++ b/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 { diff --git a/next/components/blocks/ImageWithText.tsx b/next/components/blocks/ImageWithText.tsx index a37fe87..647b7a9 100644 --- a/next/components/blocks/ImageWithText.tsx +++ b/next/components/blocks/ImageWithText.tsx @@ -17,7 +17,7 @@ export default function ImageWithText({ props }: ImageWithTextProps) { return ( // // grid grid-cols-2 max-h-[80vh] -
+
{/*
*/} {
From 829575ac2b1fee98a18553f5c571de949078ad30 Mon Sep 17 00:00:00 2001 From: h4yleysh4rpe Date: Mon, 21 Oct 2024 12:13:38 +1300 Subject: [PATCH 18/18] :memo: move headers into one folder, rename file, reorder pages in dropdown navbar --- next/app/layout.tsx | 2 +- .../{small_navbar => header}/SmallNavbar.tsx | 36 +++++++++---------- next/components/header/SmallNavbarFetcher.tsx | 7 ++++ next/components/header/header.tsx | 2 +- .../{headerData.tsx => headerTypes.tsx} | 2 +- .../small_navbar/SmallNavbarFetcher.tsx | 8 ----- 6 files changed, 28 insertions(+), 29 deletions(-) rename next/components/{small_navbar => header}/SmallNavbar.tsx (96%) create mode 100644 next/components/header/SmallNavbarFetcher.tsx rename next/components/header/{headerData.tsx => headerTypes.tsx} (98%) delete mode 100644 next/components/small_navbar/SmallNavbarFetcher.tsx diff --git a/next/app/layout.tsx b/next/app/layout.tsx index a942770..78df30b 100644 --- a/next/app/layout.tsx +++ b/next/app/layout.tsx @@ -1,7 +1,7 @@ import Footer from "@/components/footer/footer"; import Header from "@/components/header/header"; import "./globals.css"; -import SmallNavbarFetcher from "@/components/small_navbar/SmallNavbarFetcher"; +import SmallNavbarFetcher from "@/components/header/SmallNavbarFetcher"; export const metadata = { title: "Create Next App", diff --git a/next/components/small_navbar/SmallNavbar.tsx b/next/components/header/SmallNavbar.tsx similarity index 96% rename from next/components/small_navbar/SmallNavbar.tsx rename to next/components/header/SmallNavbar.tsx index aef6f10..8fc973e 100644 --- a/next/components/small_navbar/SmallNavbar.tsx +++ b/next/components/header/SmallNavbar.tsx @@ -1,14 +1,14 @@ "use client"; -import Link from "next/link"; -import Image from "next/image"; +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 { getLargestImageUrl } from "@/util/image"; -import UpArrow from "../svg/UpArrow"; -import Hamburger from "../svg/Hamburger"; import Cross from "../svg/Cross"; -import { HeaderData } from "../header/headerData"; +import Hamburger from "../svg/Hamburger"; +import UpArrow from "../svg/UpArrow"; +import { HeaderData } from "./headerTypes"; interface SmallNavbarProps { data: HeaderData; } @@ -94,17 +94,6 @@ export default function SmallNavbar({ data }: SmallNavbarProps) { )}
- {links.map((link) => ( - - {link.title.toLocaleUpperCase()} - - ))} -
)}
+ + {links.map((link) => ( + + {link.title.toLocaleUpperCase()} + + ))}
)} diff --git a/next/components/header/SmallNavbarFetcher.tsx b/next/components/header/SmallNavbarFetcher.tsx new file mode 100644 index 0000000..7d24c0d --- /dev/null +++ b/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 ; +} diff --git a/next/components/header/header.tsx b/next/components/header/header.tsx index 0482e3e..20c7694 100644 --- a/next/components/header/header.tsx +++ b/next/components/header/header.tsx @@ -2,7 +2,7 @@ import { getLargestImageUrl } from "@/util/image"; import Image from "next/image"; import Link from "next/link"; import styles from "./header.module.css"; -import { getHeaderData } from "./headerDataFetcher"; // Adjust the path as necessary +import { getHeaderData } from "./headerDataFetcher"; export default async function Header() { const data = await getHeaderData(); diff --git a/next/components/header/headerData.tsx b/next/components/header/headerTypes.tsx similarity index 98% rename from next/components/header/headerData.tsx rename to next/components/header/headerTypes.tsx index d834a09..6b8fbe6 100644 --- a/next/components/header/headerData.tsx +++ b/next/components/header/headerTypes.tsx @@ -17,4 +17,4 @@ export type HeaderData = { Logo?: any; members: Member[]; projects?: Project[]; -}; \ No newline at end of file +}; diff --git a/next/components/small_navbar/SmallNavbarFetcher.tsx b/next/components/small_navbar/SmallNavbarFetcher.tsx deleted file mode 100644 index 196ae01..0000000 --- a/next/components/small_navbar/SmallNavbarFetcher.tsx +++ /dev/null @@ -1,8 +0,0 @@ -// HeaderFetcher.jsx -import SmallNavbar from './SmallNavbar'; -import { getHeaderData } from '../header/headerDataFetcher'; - -export default async function SmallNavbarFetcher() { - const headerData = await getHeaderData(); - return ; -}