navbar changed

src/widgets/navbar/lib/data.ts

@@ -1,77 +1,23 @@
-import { Book, Sunset, Trees, Zap } from 'lucide-react';
 import { MenuItem } from './model';
 import { LanguageRoutes } from '@/shared/config/i18n/types';
 
 const menu: MenuItem[] = [
-  { title: 'Home', url: '#' },
+  { title: 'About Site', url: '/about' },
+  // {
+  //   title: 'Products',
+  //   url: '#',
+  //   items: [
+  //     {
+  //       title: 'Blog',
+  //       description: 'The latest industry news, updates, and info',
+  //       icon: Book,
+  //       url: '#',
+  //     },
+  //   ],
+  // },
   {
-    title: 'Products',
-    url: '#',
-    items: [
-      {
-        title: 'Blog',
-        description: 'The latest industry news, updates, and info',
-        icon: Book,
-        url: '#',
-      },
-      {
-        title: 'Company',
-        description: 'Our mission is to innovate and empower the world',
-        icon: Trees,
-        url: '#',
-      },
-      {
-        title: 'Careers',
-        description: 'Browse job listing and discover our workspace',
-        icon: Sunset,
-        url: '#',
-      },
-      {
-        title: 'Support',
-        description:
-          'Get in touch with our support team or visit our community forums',
-        icon: Zap,
-        url: '#',
-      },
-    ],
-  },
-  {
-    title: 'Resources',
-    url: '#',
-    items: [
-      {
-        title: 'Help Center',
-        description: 'Get all the answers you need right here',
-        icon: Zap,
-        url: '#',
-      },
-      {
-        title: 'Contact Us',
-        description: 'We are here to help you with any questions you have',
-        icon: Sunset,
-        url: '#',
-      },
-      {
-        title: 'Status',
-        description: 'Check the current status of our services and APIs',
-        icon: Trees,
-        url: '#',
-      },
-      {
-        title: 'Terms of Service',
-        description: 'Our terms and conditions for using our services',
-        icon: Book,
-        url: '#',
-      },
-    ],
-  },
-  {
-    title: 'Pricing',
-    url: '#',
-  },
-  {
-    title: 'Blog',
-    url: '#',
+    title: 'Contact',
+    url: '/contact',
   },
 ];
 
@@ -81,8 +27,8 @@ const languages: { name: string; key: LanguageRoutes }[] = [
     key: LanguageRoutes.UZ,
   },
   {
-    name: 'Ўзбекча',
-    key: LanguageRoutes.KI,
+    name: 'English',
+    key: LanguageRoutes.EN,
   },
   {
     name: 'Русский',

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>