Merge pull request #136 from devxtra-community/feat-ajay

feat:navbar dropdown

Author: ajeaiexecutes

apps/web/components/Navbar.tsx

@@ -4,11 +4,11 @@ import React, { useState, useEffect, useRef } from "react";
 import Link from "next/link";
 import Image from "next/image";
 import { usePathname, useRouter } from "next/navigation";
-import { 
-  Menu, 
-  X, 
-  LogOut, 
-  LayoutDashboard, 
+import {
+  Menu,
+  X,
+  LogOut,
+  LayoutDashboard,
   ChevronDown,
   User as UserIcon
 } from "lucide-react";
@@ -92,12 +92,11 @@ export default function Navbar() {
   const dashboardPath = user?.role === "INFLUENCER" ? "/influencer-dashboard" : "/brand-dashboard";
 
   return (
-    <motion.nav 
+    <motion.nav
       layout
       initial={false}
-      className={`fixed top-6 left-1/2 -translate-x-1/2 w-[92%] sm:w-[95%] max-w-[1400px] z-50 bg-white/80 backdrop-blur-xl border border-white/40 shadow-[0_8px_32px_0_rgba(0,0,0,0.1)] transition-all duration-500 ${
-        isMenuOpen ? "rounded-[32px] overflow-hidden" : "rounded-full overflow-visible"
-      } ${isVisible ? "translate-y-0 opacity-100" : "-translate-y-32 opacity-0"}`}
+      className={`fixed top-6 left-1/2 -translate-x-1/2 w-[92%] sm:w-[95%] max-w-[1400px] z-50 bg-white/80 backdrop-blur-xl border border-white/40 shadow-[0_8px_32px_0_rgba(0,0,0,0.1)] transition-all duration-500 ${isMenuOpen ? "rounded-[32px] overflow-hidden" : "rounded-full overflow-visible"
+        } ${isVisible ? "translate-y-0 opacity-100" : "-translate-y-32 opacity-0"}`}
       transition={{
         type: "spring",
         stiffness: 400,
@@ -222,9 +221,9 @@ export default function Navbar() {
               </AnimatePresence>
             </div>
           )}
-          
+
           {/* Mobile Menu Toggle */}
-          <button 
+          <button
             onClick={() => setIsMenuOpen(!isMenuOpen)}
             className="lg:hidden w-10 h-10 flex items-center justify-center text-slate-600 hover:bg-slate-50 rounded-full transition-colors"
           >
@@ -242,7 +241,7 @@ export default function Navbar() {
             exit={{ height: 0, opacity: 0 }}
             className="lg:hidden overflow-hidden bg-white border-t border-slate-100 rounded-b-[2rem] px-6"
           >
-            <motion.div 
+            <motion.div
               initial="closed"
               animate="open"
               exit="closed"
@@ -260,8 +259,8 @@ export default function Navbar() {
                     closed: { opacity: 0, x: -10 }
                   }}
                 >
-                  <Link 
-                    href={item.href} 
+                  <Link
+                    href={item.href}
                     onClick={() => setIsMenuOpen(false)}
                     className="text-lg font-bold text-slate-900 hover:text-emerald-600 transition-colors"
                   >
@@ -278,15 +277,15 @@ export default function Navbar() {
                 </Link>
               ) : (
                 <div className="flex flex-col gap-4">
-                  <Link 
+                  <Link
                     href={dashboardPath}
                     onClick={() => setIsMenuOpen(false)}
                     className="flex items-center gap-3 text-lg font-bold text-slate-900"
                   >
                     <LayoutDashboard className="w-5 h-5 text-emerald-500" />
                     Dashboard
                   </Link>
-                  <button 
+                  <button
                     onClick={handleLogout}
                     className="flex items-center gap-3 text-lg font-bold text-red-500"
                   >