feat(frontend): add mobile bottom nav and redesign profile

src/components/Navbar.tsx

@@ -1,39 +1,30 @@
 "use client";
 
-import { useMemo, useState } from 'react';
-import { Link, NavLink, useNavigate } from '@/lib/router';
-import { Menu, ChevronDown } from 'lucide-react';
-import { useAuth } from '@/contexts/AuthContext';
-import { Button } from '@/components/ui/button';
-import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
-import ModeToggle from '@/components/ModeToggle';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
+import type { ReactNode } from "react";
+import { useMemo } from "react";
+import { Link, NavLink } from "@/lib/router";
+import { useAuth } from "@/contexts/AuthContext";
+import ModeToggle from "@/components/ModeToggle";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 
 const NavItem = ({
   to,
   children,
-  onClick,
 }: {
   to: string;
-  children: React.ReactNode;
-  onClick?: () => void;
+  children: ReactNode;
 }) => (
   <NavLink
     to={to}
-    onClick={onClick}
     className={({ isActive }) =>
-      [
-        'px-2 py-1 rounded-md transition-colors',
-        isActive ? 'text-primary' : 'text-muted-foreground hover:text-foreground',
-      ].join(' ')
+      cn(
+        "rounded-full px-3 py-2 text-sm font-medium transition-colors",
+        isActive
+          ? "bg-primary text-primary-foreground"
+          : "text-muted-foreground hover:bg-muted hover:text-foreground",
+      )
     }
   >
     {children}
@@ -41,164 +32,81 @@ const NavItem = ({
 );
 
 export default function Navbar() {
-  const navigate = useNavigate();
   const { user, isAuthenticated } = useAuth();
-  const isAdminUser = isAuthenticated && ((user?.is_staff || user?.is_superuser) ?? false);
-  const [open, setOpen] = useState(false);
+  const isAdminUser = isAuthenticated && Boolean(user?.is_staff || user?.is_superuser);
 
   const avatarInitials = useMemo(
-    () => (user?.first_name?.[0] || user?.last_name?.[0] || user?.username?.[0] || '?').toUpperCase(),
+    () =>
+      (user?.first_name?.[0] ||
+        user?.last_name?.[0] ||
+        user?.username?.[0] ||
+        "?").toUpperCase(),
     [user?.first_name, user?.last_name, user?.username],
   );
 
-  const UserDropdown = () => (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <button
-          type="button"
-          className="flex items-center gap-2 rounded-full border border-border/60 bg-muted/40 px-2 py-1 pr-2.5 transition hover:bg-muted"
-        >
-          <Avatar className="h-9 w-9">
-            <AvatarImage src={user?.profile_picture || undefined} alt={user?.username || 'profile'} />
-            <AvatarFallback>{avatarInitials}</AvatarFallback>
-          </Avatar>
-          <ChevronDown className="h-4 w-4 text-muted-foreground" />
-        </button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="w-56 text-right">
-        <DropdownMenuLabel className="text-xs text-muted-foreground">
-          {user?.first_name || user?.last_name ? `${user?.first_name || ''} ${user?.last_name || ''}`.trim() : user?.username}
-        </DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem asChild>
-          <Link to="/profile">پروفایل</Link>
-        </DropdownMenuItem>
-        {isAdminUser && (
-          <DropdownMenuItem asChild>
-            <Link to="/admin">داشبورد مدیریت</Link>
-          </DropdownMenuItem>
-        )}
-        <DropdownMenuItem
-          onSelect={(e) => e.preventDefault()}
-          className="flex items-center justify-between gap-2"
-        >
-          <span>حالت نمایش</span>
-          <ModeToggle />
-        </DropdownMenuItem>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem
-          onSelect={(e) => {
-            e.preventDefault();
-            navigate('/logout');
-          }}
-          className="text-red-600 focus:text-red-600"
-        >
-          خروج
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-
   return (
-    <nav className="sticky top-0 z-40 border-b bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60" dir="rtl">
+    <nav
+      className="sticky top-0 z-40 border-b bg-background/75 backdrop-blur-xl supports-[backdrop-filter]:bg-background/55"
+      dir="rtl"
+    >
       <div className="container mx-auto px-4 py-3">
-        <div className="flex flex-row-reverse items-center justify-between gap-3">
-          <Link to="/" className="order-2 flex items-center gap-2">
-            <span className="sm:inline text-2xl font-bold text-primary">
-              انجمن علمی کامپیوتر گیلان
-            </span>
+        <div className="flex items-center justify-between gap-4">
+          <Link to="/" className="flex min-w-0 items-center gap-3">
+            <div className="hidden h-10 w-10 items-center justify-center rounded-2xl border border-border/70 bg-background/90 shadow-sm sm:flex">
+              <span className="text-lg font-bold text-primary">گ</span>
+            </div>
+            <div className="min-w-0">
+              <p className="truncate text-sm font-semibold text-foreground sm:text-base">
+                انجمن علمی کامپیوتر گیلان
+              </p>
+              <p className="hidden text-xs text-muted-foreground sm:block">
+                رویدادها، بلاگ و حساب کاربری
+              </p>
+            </div>
           </Link>
 
-          <div className="order-1 hidden md:flex items-center gap-2">
+          <div className="hidden items-center gap-2 md:flex">
             <NavItem to="/">خانه</NavItem>
             <NavItem to="/blog">بلاگ</NavItem>
             <NavItem to="/events">رویدادها</NavItem>
+            <ModeToggle />
+
             {isAuthenticated ? (
-              <UserDropdown />
+              <Link
+                to="/profile"
+                className="flex items-center gap-3 rounded-full border border-border/70 bg-background/85 px-2 py-1.5 transition hover:bg-muted/70"
+              >
+                <Avatar className="h-9 w-9">
+                  <AvatarImage
+                    src={
+                      user?.profile_picture_preview_url ||
+                      user?.profile_picture ||
+                      undefined
+                    }
+                    alt={user?.username || "profile"}
+                  />
+                  <AvatarFallback>{avatarInitials}</AvatarFallback>
+                </Avatar>
+                <div className="min-w-0 text-right">
+                  <p className="max-w-36 truncate text-sm font-medium text-foreground">
+                    {user?.first_name || user?.last_name
+                      ? `${user?.first_name || ""} ${user?.last_name || ""}`.trim()
+                      : user?.username}
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    {isAdminUser ? "پروفایل و مدیریت حساب" : "پروفایل من"}
+                  </p>
+                </div>
+              </Link>
             ) : (
-              <>
-                <Link to="/auth">
-                  <Button size="sm">ورود / ثبت‌نام</Button>
-                </Link>
-                <ModeToggle />
-              </>
+              <Link to="/auth">
+                <Button className="rounded-full px-5">ورود / ثبت‌نام</Button>
+              </Link>
             )}
           </div>
 
-          <div className="order-1 md:hidden">
-            <Sheet open={open} onOpenChange={setOpen}>
-              <SheetTrigger asChild>
-                <Button variant="outline" size="icon" aria-label="U.U+U^">
-                  <Menu className="h-5 w-5" />
-                </Button>
-              </SheetTrigger>
-              <SheetContent side="right" className="w-[80vw] sm:w-[360px]" dir="rtl">
-                <div className="mt-6 flex flex-col gap-4 text-right">
-                  <Link
-                    to="/"
-                    onClick={() => setOpen(false)}
-                    className="flex items-center gap-2"
-                  >
-                    <img src="/favicon.ico" alt="لوگو" className="h-8 w-auto" height={32} width={32} />
-                    <span className="text-xl font-semibold text-primary">انجمن علمی کامپیوتر گیلان</span>
-                  </Link>
-
-                  <div className="grid gap-2">
-                    <NavItem to="/"        onClick={() => setOpen(false)}>خانه</NavItem>
-                    <NavItem to="/blog"    onClick={() => setOpen(false)}>بلاگ</NavItem>
-                    <NavItem to="/events"  onClick={() => setOpen(false)}>رویدادها</NavItem>
-                  </div>
-
-                  <div className="pt-4 border-t grid gap-3">
-                    {isAuthenticated ? (
-                      <>
-                        <div className="flex items-center gap-3 rounded-md border px-3 py-2">
-                          <Avatar className="h-10 w-10">
-                            <AvatarImage src={user?.profile_picture || undefined} alt={user?.username || 'profile'} />
-                            <AvatarFallback>{avatarInitials}</AvatarFallback>
-                          </Avatar>
-                          <div className="flex-1 text-right">
-                            <div className="font-medium">{user?.username}</div>
-                            {user?.email ? <div className="text-xs text-muted-foreground">{user.email}</div> : null}
-                          </div>
-                        </div>
-                        <div className="grid gap-2">
-                          <Button variant="ghost" className="justify-between" asChild onClick={() => setOpen(false)}>
-                            <Link to="/profile">پروفایل</Link>
-                          </Button>
-                          {isAdminUser && (
-                            <Button variant="ghost" className="justify-between" asChild onClick={() => setOpen(false)}>
-                              <Link to="/admin">داشبورد مدیریت</Link>
-                            </Button>
-                          )}
-                          <div className="flex items-center justify-between rounded-md border px-3 py-2">
-                            <span className="text-sm text-muted-foreground">حالت نمایش</span>
-                            <ModeToggle />
-                          </div>
-                          <Button
-                            variant="outline"
-                            className="justify-between text-red-600 border-red-600 hover:bg-red-50 dark:text-red-400 dark:border-red-400 dark:hover:bg-red-950/30"
-                            onClick={() => { setOpen(false); navigate('/logout'); }}
-                          >
-                            خروج
-                          </Button>
-                        </div>
-                      </>
-                    ) : (
-                      <div className="grid gap-2">
-                        <Link to="/auth" onClick={() => setOpen(false)}>
-                          <Button className="w-full">ورود / ثبت‌نام</Button>
-                        </Link>
-                        <div className="flex items-center justify-between rounded-md border px-3 py-2">
-                          <span className="text-sm text-muted-foreground">حالت نمایش</span>
-                          <ModeToggle />
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </SheetContent>
-            </Sheet>
+          <div className="flex items-center gap-2 md:hidden">
+            <ModeToggle />
           </div>
         </div>
       </div>