added Navbar structure and some dynamic routes to the app

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@clerk/nextjs": "^5.2.6",
     "babel-plugin-react-compiler": "^0.0.0-experimental-938cd9a-20240601",
     "next": "15.0.0-rc.0",
     "react": "19.0.0-rc-f994737d14-20240522",

src/app/components/MobileMenu.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import Link from "next/link";
+import { useState } from "react";
+
+const MobileMenu = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="md:hidden">
+      <div
+        className="flex flex-col gap-[4.5px] cursor-pointer"
+        onClick={() => setIsOpen((prev) => !prev)}
+      >
+        <div
+          className={`w-6 h-1 bg-blue-500 rounded-sm ${
+            isOpen ? "rotate-45" : ""
+          } origin-left ease-in-out duration-500`}
+        />
+        <div
+          className={`w-6 h-1 bg-blue-500 rounded-sm ${
+            isOpen ? "opacity-0" : ""
+          } origin-left ease-in-out duration-500`}
+        />
+        <div
+          className={`w-6 h-1 bg-blue-500 rounded-sm ${
+            isOpen ? "-rotate-45" : ""
+          } origin-left ease-in-out duration-500`}
+        />
+      </div>
+      {isOpen && (
+        <div className="absolute left-0 top-24 w-full h-[calc(100vh-96px)] bg-white flex flex-col items-center justify-center gap-8 font-medium text-xl z-10">
+          <Link href={"/"}>Home</Link>
+          <Link href={"/"}>Friend</Link>
+          <Link href={"/"}>Groups</Link>
+          <Link href={"/"}>Stories</Link>
+          <Link href={"/"}>Login</Link>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MobileMenu;