feat: add mobile menu component and integrate with navigation bar for improved accessibility

package-lock.json

@@ -43,6 +43,7 @@
         "date-fns": "^4.1.0",
         "dotenv": "^16.4.5",
         "embla-carousel-react": "^8.2.0",
+        "framer-motion": "^11.11.17",
         "lucide-react": "^0.428.0",
         "next": "^14.2.15",
         "next-themes": "^0.3.0",
@@ -6953,6 +6954,31 @@
         "node": ">=12.20.0"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.11.17",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.11.17.tgz",
+      "integrity": "sha512-O8QzvoKiuzI5HSAHbcYuL6xU+ZLXbrH7C8Akaato4JzQbX2ULNeniqC2Vo5eiCtFktX9XsJ+7nUhxcl2E2IjpA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",

package.json

@@ -45,6 +45,7 @@
     "date-fns": "^4.1.0",
     "dotenv": "^16.4.5",
     "embla-carousel-react": "^8.2.0",
+    "framer-motion": "^11.11.17",
     "lucide-react": "^0.428.0",
     "next": "^14.2.15",
     "next-themes": "^0.3.0",

src/components/mobileMenu.tsx

@@ -0,0 +1,27 @@
+"use client";
+import { useState } from "react";
+import { Menu, X } from "lucide-react";
+import { Button } from "./ui/button";
+import { motion } from "framer-motion";
+
+export function MobileMenu() {
+  const [isVisible, setIsVisible] = useState(false);
+  return (
+    <div>
+      <Button onClick={() => setIsVisible((prev) => !prev)}>
+        <Menu />
+      </Button>
+      {isVisible && (
+        <motion.div
+          initial={{ x: "-100%" }}
+          animate={{ x: 0 }}
+          exit={{ x: "-100%" }}
+          transition={{ duration: 0.3 }}
+          className="fixed top-0 left-0 w-full bg-gray-800 text-white"
+        >
+          <X className="cursor-pointer" onClick={() => setIsVisible(false)} />
+        </motion.div>
+      )}
+    </div>
+  );
+}

src/components/navigationBar/nav.tsx

@@ -21,6 +21,8 @@ import { createSupabaseClient } from "@/lib/supabase/serverComponentClient";
 import { getUserId } from "@/lib/supabase/actions/getUserId";
 import { getUnreadNotificationCountByUserId } from "@/lib/data/notificationQuery";
 
+import { MobileMenu } from "../mobileMenu";
+
 const ListItem = React.forwardRef<React.ElementRef<"a">, React.ComponentPropsWithoutRef<"a">>(
   ({ className, title, children, ...props }, ref) => {
     return (
@@ -97,8 +99,10 @@ export async function NavigationBar() {
               </span>
             </Link>
           </div>
-
-          <div className="flex items-center">
+          <div className="md:hidden">
+            <MobileMenu />
+          </div>
+          <div className="hidden md:flex items-center ">
             <NavigationMenu>
               <NavigationMenuList>
                 <NavigationMenuItem>
@@ -146,7 +150,7 @@ export async function NavigationBar() {
               </NavigationMenuList>
             </NavigationMenu>
 
-            <div className="flex gap-2 pl-2">
+            <div className="hidden md:flex gap-2 pl-2">
               <div className="mt-1">
                 <ThemeToggle />
               </div>