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 };