fix(navbar): wire MobileNavMenu onClose

components/reputation/__tests__/my-claims.test.ts

@@ -1,36 +1,58 @@
-import { CLAIM_SECTIONS, getClaimsBySection, normalizeStatus, type MyClaim } from "@/components/reputation/my-claims";
+import {
+  CLAIM_SECTIONS,
+  getClaimsBySection,
+  normalizeStatus,
+  type MyClaim,
+} from "@/components/reputation/my-claims";
 
 describe("My Claims helpers", () => {
-    it("normalizes status values consistently", () => {
-        expect(normalizeStatus(" In Review ")).toBe("in-review");
-        expect(normalizeStatus("UNDER_REVIEW")).toBe("under-review");
-        expect(normalizeStatus("in_review")).toBe("in-review");
-    });
+  it("normalizes status values consistently", () => {
+    expect(normalizeStatus(" In Review ")).toBe("in-review");
+    expect(normalizeStatus("UNDER_REVIEW")).toBe("under-review");
+    expect(normalizeStatus("in_review")).toBe("in-review");
+  });
 
-    it("groups claims into Active Claims, In Review, and Completed by status", () => {
-        const claims: MyClaim[] = [
-            { bountyId: "1", title: "Active A", status: "active" },
-            { bountyId: "2", title: "Active B", status: "claimed" },
-            { bountyId: "3", title: "Review A", status: "in review" },
-            { bountyId: "4", title: "Review B", status: "UNDER_REVIEW" },
-            { bountyId: "5", title: "Completed A", status: "completed" },
-            { bountyId: "6", title: "Completed B", status: "closed" },
-            { bountyId: "7", title: "Unknown", status: "queued" },
-        ];
+  it("groups claims into Active Claims, In Review, and Completed by status", () => {
+    const claims: MyClaim[] = [
+      { bountyId: "1", title: "Active A", status: "active" },
+      { bountyId: "2", title: "Active B", status: "claimed" },
+      { bountyId: "3", title: "Review A", status: "in review" },
+      { bountyId: "4", title: "Review B", status: "UNDER_REVIEW" },
+      { bountyId: "5", title: "Completed A", status: "completed" },
+      { bountyId: "6", title: "Completed B", status: "closed" },
+      { bountyId: "7", title: "Unknown", status: "queued" },
+    ];
 
-        const groups = getClaimsBySection(claims);
+    const groups = getClaimsBySection(claims);
 
-        expect(groups).toHaveLength(CLAIM_SECTIONS.length);
+    expect(groups).toHaveLength(CLAIM_SECTIONS.length);
 
-        const activeGroup = groups.find((group) => group.section.title === "Active Claims");
-        const reviewGroup = groups.find((group) => group.section.title === "In Review");
-        const completedGroup = groups.find((group) => group.section.title === "Completed");
+    const activeGroup = groups.find(
+      (group) => group.section.title === "Active Claims",
+    );
+    const reviewGroup = groups.find(
+      (group) => group.section.title === "In Review",
+    );
+    const completedGroup = groups.find(
+      (group) => group.section.title === "Completed",
+    );
 
-        expect(activeGroup?.claims.map((claim) => claim.bountyId)).toEqual(["1", "2"]);
-        expect(reviewGroup?.claims.map((claim) => claim.bountyId)).toEqual(["3", "4"]);
-        expect(completedGroup?.claims.map((claim) => claim.bountyId)).toEqual(["5", "6"]);
+    expect(activeGroup?.claims.map((claim) => claim.bountyId)).toEqual([
+      "1",
+      "2",
+    ]);
+    expect(reviewGroup?.claims.map((claim) => claim.bountyId)).toEqual([
+      "3",
+      "4",
+    ]);
+    expect(completedGroup?.claims.map((claim) => claim.bountyId)).toEqual([
+      "5",
+      "6",
+    ]);
 
-        const groupedIds = new Set(groups.flatMap((group) => group.claims.map((claim) => claim.bountyId)));
-        expect(groupedIds.has("7")).toBe(false);
-    });
+    const groupedIds = new Set(
+      groups.flatMap((group) => group.claims.map((claim) => claim.bountyId)),
+    );
+    expect(groupedIds.has("7")).toBe(false);
+  });
 });

components/ui/resizable-navbar.tsx

@@ -75,9 +75,9 @@ export const Navbar = ({ children, className }: NavbarProps) => {
       {React.Children.map(children, (child) =>
         React.isValidElement(child)
           ? React.cloneElement(
-            child as React.ReactElement<{ visible?: boolean }>,
-            { visible },
-          )
+              child as React.ReactElement<{ visible?: boolean }>,
+              { visible },
+            )
           : child,
       )}
     </motion.div>
@@ -196,7 +196,6 @@ export const MobileNavMenu = ({
   children,
   className,
   isOpen,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   onClose,
 }: MobileNavMenuProps) => {
   return (
@@ -211,6 +210,14 @@ export const MobileNavMenu = ({
             className,
           )}
         >
+          <button
+            type="button"
+            aria-label="Close mobile menu"
+            onClick={onClose}
+            className="self-end inline-flex h-9 w-9 items-center justify-center rounded-full text-black transition hover:bg-gray-100 dark:text-white dark:hover:bg-neutral-800"
+          >
+            <IconX className="h-4 w-4" />
+          </button>
           {children}
         </motion.div>
       )}
@@ -263,9 +270,9 @@ export const NavbarButton = ({
   className?: string;
   variant?: "primary" | "secondary" | "dark" | "gradient";
 } & (
-    | React.ComponentPropsWithoutRef<"a">
-    | React.ComponentPropsWithoutRef<"button">
-  )) => {
+  | React.ComponentPropsWithoutRef<"a">
+  | React.ComponentPropsWithoutRef<"button">
+)) => {
   const baseStyles =
     "px-4 py-2 rounded-md bg-white button bg-white text-black text-sm font-bold relative cursor-pointer hover:-translate-y-0.5 transition duration-200 inline-block text-center";