navbar changed

src/widgets/navbar/ui/index.tsx

@@ -20,11 +20,7 @@ import { useUserPlagiatStore } from '@/shared/zustand/user';
 const Navbar = () => {
   const t = useTranslations('Navbar');
   const t_cab = useTranslations('Cabinet');
-  const [localUser, setLocalUser] = useState<{
-    id: number;
-    name: string;
-    surname: string;
-  } | null>(null);
+  const [token, setToken] = useState<string | null>(null);
   const user = useUserPlagiatStore((state) => state.user);
 
   const scrollTo = (id: string) => {
@@ -33,11 +29,11 @@ const Navbar = () => {
   };
 
   useEffect(() => {
-    const data = localStorage.getItem('user');
+    const data = localStorage.getItem('access_token');
     if (data) {
-      setLocalUser(JSON.parse(data));
+      setToken(data);
     } else {
-      setLocalUser(null);
+      setToken(null);
     }
   }, [user]);
 
@@ -53,7 +49,7 @@ const Navbar = () => {
     <section className="py-1 flex items-center justify-center w-full ">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
         {/* Desktop Menu */}
-        <nav className="justify-between items-center flex max-sm:flex-col gap-5">
+        <nav className="justify-between items-center md:flex hidden max-sm:flex-col gap-5">
           <div className="flex items-center justify-around gap-2 w-full">
             {/* Logo */}
             <Link
@@ -69,7 +65,7 @@ const Navbar = () => {
               />
             </Link>
 
-            {localUser ? (
+            {token ? (
               <div className="flex items-center gap-2">
                 {navItems.map((item) => (
                   <Link
@@ -106,11 +102,20 @@ const Navbar = () => {
         </nav>
 
         {/* Mobile Menu */}
-        <div className="hidden">
-          <div className="flex items-center justify-between">
+        <div className="md:hidden flex">
+          <div className="flex items-center justify-between w-full">
             {/* Logo */}
-            <Link href={'/'} className="flex items-center gap-2">
-              {t('logo')}
+            <Link
+              href={'/'}
+              className="flex items-center gap-2 text-2xl font-bold "
+            >
+              <Image
+                src={Logo_image}
+                className="min-h-2"
+                alt="Anti-Plagiat.uz"
+                width={140}
+                height={10}
+              />
             </Link>
             <Sheet>
               <div className="space-x-2">
@@ -124,11 +129,48 @@ const Navbar = () => {
               <SheetContent className="overflow-y-auto">
                 <SheetHeader>
                   <SheetTitle>
-                    <Link href={'/'} className="flex items-center gap-2">
-                      {t('logo')}
+                    <Link
+                      href={'/'}
+                      className="flex items-center gap-2 text-2xl font-bold "
+                    >
+                      <Image
+                        src={Logo_image}
+                        className="min-h-2"
+                        alt="Anti-Plagiat.uz"
+                        width={140}
+                        height={10}
+                      />
                     </Link>
                   </SheetTitle>
                 </SheetHeader>
+                {token ? (
+                  <div className="flex flex-col items-start gap-2 pl-2">
+                    {navItems.map((item) => (
+                      <Link
+                        key={item.title}
+                        href={item.href}
+                        className="flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-md hover:bg-muted transition-colors"
+                      >
+                        {item.title}
+                      </Link>
+                    ))}
+                  </div>
+                ) : (
+                  <nav className="flex flex-col items-start gap-1 pl-2">
+                    <button
+                      onClick={() => scrollTo('info-section')}
+                      className="px-3 py-1.5 text-sm font-medium rounded-md hover:bg-muted transition-colors"
+                    >
+                      {t('aboutPlagiat')}
+                    </button>
+                    <button
+                      onClick={() => scrollTo('steps-section')}
+                      className="px-3 py-1.5 text-sm font-medium rounded-md hover:bg-muted transition-colors"
+                    >
+                      {t('howItWorks')}
+                    </button>
+                  </nav>
+                )}
                 <div className="flex flex-col gap-6 p-4">
                   <AuthButtons />
                 </div>