107 Broken Members Dropdown

next/components/header/header.module.css

@@ -23,12 +23,6 @@
   letter-spacing: 1px;
 }
 
-.nav a:last-child {
-  border: 1px solid white;
-  border-radius: 999px;
-  padding: 0.25rem 1rem;
-}
-
 @media (max-width: 800px) {
   .header {
     flex-direction: column;
@@ -37,3 +31,4 @@
     position: relative;
   }
 }
+

next/components/header/header.tsx

@@ -9,9 +9,16 @@ import styles from "./header.module.css";
 async function getHeaderData() {
   const resData = await fetchStrapi("header", headerSchema);
   const membersData = await fetchStrapi("member-teams", z.any());
-  const members = membersData.sort(
-    (a: any, b: any) => a.CommitteeYear - b.CommitteeYear,
-  );
+
+  // 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
 
   return {
     ...resData,
@@ -40,20 +47,28 @@ export default async function Header() {
         <div className="group relative">
           <Link
             href={
-              data.members[0]
+              data.members.length > 0
                 ? `/members/${data.members[0].CommitteeYear}`
                 : "/"
             }
           >
             MEMBERS
           </Link>
-          <div className="group-hover:flex hidden absolute top-full bg-white p-2 rounded-md items-center text-b-dark-blue">
-            {/* @ts-ignore */}
-            {data.members.map(({ CommitteeYear }) => (
-              <Link href={`/members/${CommitteeYear}`} key={CommitteeYear}>
-                {CommitteeYear}
-              </Link>
-            ))}
+          <div
+            className="group-hover:flex hidden absolute top-full bg-white p-2 rounded-md items-center text-b-dark-blue flex-col py-1 px-2">
+            {/* align years vertically */}
+            {/* Render sorted members */}
+            {data.members.map(
+              ({ CommitteeYear }: { CommitteeYear: number }) => (
+                <Link
+                  href={`/members/${CommitteeYear}`}
+                  key={CommitteeYear}
+                  className="my-1 min-w-16 text-center"
+                >
+                  {CommitteeYear}
+                </Link>
+              ),
+            )}
           </div>
         </div>