Spaces:
Sleeping
Sleeping
File size: 4,253 Bytes
eb4179c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | import { useState, useEffect } from 'react';
import { Outlet, Navigate, NavLink, useNavigate } from 'react-router-dom';
import { FiHome, FiBox, FiShoppingCart, FiSettings, FiLogOut, FiMenu, FiX } from 'react-icons/fi';
export default function Layout() {
const [sidebarOpen, setSidebarOpen] = useState(false);
const navigate = useNavigate();
const isAuthenticated = localStorage.getItem('admin_token') !== null;
if (!isAuthenticated) {
return <Navigate to="/login" replace />;
}
const handleLogout = () => {
localStorage.removeItem('admin_token');
navigate('/login');
};
const links = [
{ path: '/', icon: FiHome, label: 'Dashboard' },
{ path: '/orders', icon: FiShoppingCart, label: 'Buyurtmalar' },
{ path: '/products', icon: FiBox, label: 'Mahsulotlar' },
{ path: '/settings', icon: FiSettings, label: 'Sozlamalar' },
];
return (
<div className="min-h-screen bg-gray-950 text-gray-100 flex">
{/* Mobile Header */}
<div className="lg:hidden fixed top-0 left-0 right-0 h-16 bg-gray-900 border-b border-gray-800 flex items-center justify-between px-4 z-20">
<span className="font-bold text-xl tracking-wider text-white">M-TEXTILE<span className="text-blue-500">.</span></span>
<button
onClick={() => setSidebarOpen(!sidebarOpen)}
className="text-gray-400 hover:text-white p-2"
>
{sidebarOpen ? <FiX size={24} /> : <FiMenu size={24} />}
</button>
</div>
{/* Sidebar */}
<aside className={`
fixed inset-y-0 left-0 z-10 w-64 bg-gray-900 border-r border-gray-800 transform transition-transform duration-300 ease-in-out
lg:translate-x-0 ${sidebarOpen ? 'translate-x-0 pt-16' : '-translate-x-full pt-16'} lg:pt-0
`}>
<div className="hidden lg:flex h-16 items-center px-6 border-b border-gray-800">
<span className="font-bold text-xl tracking-wider text-white">M-TEXTILE<span className="text-blue-500">.</span></span>
</div>
<nav className="flex-1 px-4 py-6 space-y-2">
{links.map((link) => (
<NavLink
key={link.path}
to={link.path}
onClick={() => setSidebarOpen(false)}
className={({ isActive }) => `
flex items-center gap-3 px-4 py-3 rounded-lg transition-colors font-medium
${isActive
? 'bg-blue-600/10 text-blue-500'
: 'text-gray-400 hover:text-white hover:bg-gray-800'}
`}
>
<link.icon size={20} />
{link.label}
</NavLink>
))}
</nav>
<div className="absolute bottom-0 w-full p-4 border-t border-gray-800 bg-gray-900">
<button
onClick={handleLogout}
className="flex items-center gap-3 px-4 py-3 rounded-lg w-full text-red-400 hover:bg-red-500/10 hover:text-red-500 transition-colors font-medium"
>
<FiLogOut size={20} />
Chiqish
</button>
</div>
</aside>
{/* Main Content */}
<main className="flex-1 lg:ml-64 pt-16 lg:pt-0 min-h-screen flex flex-col">
<div className="flex-1 p-4 lg:p-8">
<Outlet />
</div>
</main>
{/* Mobile Overlay */}
{sidebarOpen && (
<div
className="fixed inset-0 bg-black/50 z-0 lg:hidden backdrop-blur-sm"
onClick={() => setSidebarOpen(false)}
/>
)}
</div>
);
}
|