navbar changed

src/widgets/navbar/ui/authButtons.tsx

@@ -0,0 +1,59 @@
+'use client';
+import { useLoginModal } from '@/features/auth/login/lib/togle';
+import { Link } from '@/shared/config/i18n/navigation';
+import { Button } from '@/shared/ui/button';
+import { useUserLogin } from '@/shared/zustand/userLogin';
+import {
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuTrigger,
+} from '@/shared/ui/navigation-menu';
+import SubMenuLink from './SubMenuLink';
+import { ChangeLang } from './ChangeLang';
+
+function AuthButtons() {
+  const auth = {
+    login: { title: 'Login', url: '#' },
+    signup: { title: 'Sign up', url: '#' },
+  };
+
+  const userItem = [
+    { title: 'Profile', url: '/profile' },
+    { title: 'Logout', url: '#' },
+  ];
+
+  const toggleLoginModal = useLoginModal((state) => state.toggleLoginModal);
+  const user = useUserLogin((state) => state.user);
+
+  if (user) {
+    return (
+      <NavigationMenuItem>
+        <NavigationMenuTrigger>{user.name}</NavigationMenuTrigger>
+        <NavigationMenuContent className="bg-popover text-popover-foreground">
+          {userItem.map((subItem) => (
+            <NavigationMenuLink asChild key={subItem.title} className="w-80">
+              <SubMenuLink item={subItem} />
+            </NavigationMenuLink>
+          ))}
+        </NavigationMenuContent>
+      </NavigationMenuItem>
+    );
+  }
+
+  return (
+    <div className="flex lg:flex-row flex-col gap-3">
+      <div className="lg:flex hidden">
+        <ChangeLang />
+      </div>
+      <Button asChild variant="outline" onClick={toggleLoginModal}>
+        <Link href={auth.login.url}>{auth.login.title}</Link>
+      </Button>
+      <Button asChild>
+        <Link href={auth.signup.url}>{auth.signup.title}</Link>
+      </Button>
+    </div>
+  );
+}
+
+export { AuthButtons };

src/widgets/navbar/ui/index.tsx

@@ -18,13 +18,9 @@ import RenderMenuItem from './RenderItem';
 import RenderMobileMenuItem from './RenderMobileMenuItem';
 import { ChangeLang } from './ChangeLang';
 import Link from 'next/link';
+import { AuthButtons } from './authButtons';
 
 const Navbar = () => {
-  const auth = {
-    login: { title: 'Login', url: '#' },
-    signup: { title: 'Sign up', url: '#' },
-  };
-
   return (
     <section className="py-4">
       <div className="custom-container">
@@ -50,15 +46,7 @@ const Navbar = () => {
               </NavigationMenu>
             </div>
           </div>
-          <div className="flex gap-2">
-            <ChangeLang />
-            <Button asChild variant="outline">
-              <Link href={auth.login.url}>{auth.login.title}</Link>
-            </Button>
-            <Button asChild>
-              <Link href={auth.signup.url}>{auth.signup.title}</Link>
-            </Button>
-          </div>
+          <AuthButtons />
         </nav>
 
         {/* Mobile Menu */}
@@ -101,15 +89,7 @@ const Navbar = () => {
                   >
                     {menu.map((item) => RenderMobileMenuItem(item))}
                   </Accordion>
-
-                  <div className="flex flex-col gap-3">
-                    <Button asChild variant="outline">
-                      <Link href={auth.login.url}>{auth.login.title}</Link>
-                    </Button>
-                    <Button asChild>
-                      <Link href={auth.signup.url}>{auth.signup.title}</Link>
-                    </Button>
-                  </div>
+                  <AuthButtons />
                 </div>
               </SheetContent>
             </Sheet>