🐛 fix broken members dropdown

next/components/header/header.module.css

@@ -37,3 +37,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,16 +47,23 @@ 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 }) => (
+          <div
+            className="group-hover:flex hidden absolute top-full bg-white p-2 rounded-md items-center text-b-dark-blue"
+            style={{
+              flexDirection: "column",       // Stack the years vertically
+              alignItems: "center",          // Center the text horizontally
+              padding: "0.25rem 0.5rem",     // Adjust padding to fit the text better
+            }}
+          >
+            {/* Render sorted members */}
+            {data.members.map(({ CommitteeYear }: { CommitteeYear: number }) => (
               <Link href={`/members/${CommitteeYear}`} key={CommitteeYear}>
                 {CommitteeYear}
               </Link>