fix: redesign

2026-07-10 16:01:27 +03:30
parent 05262b7636
commit a447222201
31 changed files with 1426 additions and 1738 deletions
@@ -0,0 +1,132 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useAuth } from '@/contexts/AuthContext';
+import { useState } from 'react';
+import {
+    UsersIcon,
+    CubeIcon,
+    TagIcon,
+    BellIcon,
+    GiftIcon,
+    PowerIcon,
+    ShoppingBagIcon,
+    HomeIcon,
+    Bars3Icon,
+    XMarkIcon,
+} from '@heroicons/react/24/outline';
+import { MegaphoneIcon } from 'lucide-react';
+import ThemeToggle from '@/components/ThemeToggle';
+
+const navItems = [
+    { href: '/admin/dashboard', label: 'داشبورد', Icon: HomeIcon },
+    { href: '/admin/users', label: 'کاربران', Icon: UsersIcon },
+    { href: '/admin/purchases', label: 'خریدها', Icon: ShoppingBagIcon },
+    { href: '/admin/packages', label: 'پکیج‌ها', Icon: CubeIcon },
+    { href: '/admin/products', label: 'محصولات', Icon: TagIcon },
+    { href: '/admin/reminders', label: 'یادآوری‌ها', Icon: BellIcon },
+    { href: '/admin/promotions', label: 'تبلیغات', Icon: MegaphoneIcon },
+    { href: '/admin/referral-rewards', label: 'پاداش معرفی', Icon: GiftIcon },
+];
+
+export default function Sidebar() {
+    const pathname = usePathname();
+    const { logout, user } = useAuth();
+    const [mobileOpen, setMobileOpen] = useState(false);
+
+    const isActive = (href: string) => {
+        if (href === '/admin/dashboard') return pathname === href;
+        return pathname.startsWith(href);
+    };
+
+    const navContent = (
+        <div className="flex flex-col h-full">
+            {/* Logo / Brand */}
+            <div className="flex items-center gap-3 px-5 py-5 border-b border-gray-200 dark:border-gray-800">
+                <div className="flex-shrink-0 h-9 w-9 rounded-xl bg-indigo-600 flex items-center justify-center shadow-sm shadow-indigo-500/20">
+                    <span className="text-white font-bold text-sm">A</span>
+                </div>
+                <div className="min-w-0">
+                    <p className="text-sm font-bold text-gray-900 dark:text-gray-100 truncate">اپروایجنسی</p>
+                    <p className="text-xs text-gray-500 dark:text-gray-400 truncate">پنل مدیریت</p>
+                </div>
+            </div>
+
+            {/* Navigation */}
+            <nav className="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
+                {navItems.map(({ href, label, Icon }) => {
+                    const active = isActive(href);
+                    return (
+                        <Link
+                            key={href}
+                            href={href}
+                            onClick={() => setMobileOpen(false)}
+                            className={`flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all duration-150 ${
+                                active
+                                    ? 'bg-indigo-50 text-indigo-700 dark:bg-indigo-500/10 dark:text-indigo-400 shadow-sm'
+                                    : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200'
+                            }`}
+                        >
+                            <Icon className={`h-5 w-5 flex-shrink-0 ${active ? 'text-indigo-600 dark:text-indigo-400' : ''}`} />
+                            {label}
+                        </Link>
+                    );
+                })}
+            </nav>
+
+            {/* User, Theme & Logout */}
+            <div className="border-t border-gray-200 dark:border-gray-800 px-3 py-4 space-y-1">
+                <ThemeToggle withLabel className="w-full justify-start px-3 py-2.5 rounded-xl text-sm font-medium" />
+                {user && (
+                    <div className="px-3 py-2">
+                        <p className="text-xs text-gray-500 dark:text-gray-400 truncate" dir="ltr">{user.email}</p>
+                    </div>
+                )}
+                <button
+                    onClick={logout}
+                    className="flex items-center gap-3 w-full px-3 py-2.5 rounded-xl text-sm font-medium text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-500/10 transition-colors"
+                >
+                    <PowerIcon className="h-5 w-5" />
+                    خروج
+                </button>
+            </div>
+        </div>
+    );
+
+    return (
+        <>
+            {/* Mobile hamburger */}
+            <button
+                onClick={() => setMobileOpen(true)}
+                className="lg:hidden fixed top-4 right-4 z-50 p-2 rounded-xl bg-white dark:bg-gray-900 shadow-lg ring-1 ring-gray-200 dark:ring-gray-800 text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+            >
+                <Bars3Icon className="h-6 w-6" />
+            </button>
+
+            {/* Mobile overlay */}
+            {mobileOpen && (
+                <div className="lg:hidden fixed inset-0 z-40">
+                    <div
+                        className="absolute inset-0 bg-black/40 dark:bg-black/60 backdrop-blur-sm"
+                        onClick={() => setMobileOpen(false)}
+                    />
+                    <div className="absolute inset-y-0 right-0 w-72 bg-white dark:bg-gray-950 shadow-2xl">
+                        <button
+                            onClick={() => setMobileOpen(false)}
+                            className="absolute top-4 left-4 p-1 rounded-lg text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
+                        >
+                            <XMarkIcon className="h-5 w-5" />
+                        </button>
+                        {navContent}
+                    </div>
+                </div>
+            )}
+
+            {/* Desktop sidebar */}
+            <aside className="hidden lg:flex lg:fixed lg:inset-y-0 lg:right-0 lg:z-30 lg:w-64 lg:flex-col bg-white dark:bg-gray-950 border-l border-gray-200 dark:border-gray-800">
+                {navContent}
+            </aside>
+        </>
+    );
+}