Hamza/musadeq
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💎 Luxury dark redesign + API integration for Trojan Horse and Elite Dashboard

Browse Source
This commit is contained in:
Hamza-Ayed
2026-04-22 02:01:08 +03:00
parent 2e900e395f
commit 660c551098
8 changed files with 548 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/src/components/layout/Sidebar.tsx
View File

@@ -1,16 +1,16 @@
/**
* ════════════════════════════════════════════════════════════
* مُصادَق (Musadaq) — Premium Sidebar
* مُصادَق (Musadaq) — Premium Dark Sidebar
* ════════════════════════════════════════════════════════════
*/
import { NavLink, useNavigate } from 'react-router-dom';
import {
LayoutDashboard,
FileText,
Building2,
Users,
Settings,
import {
LayoutDashboard,
FileText,
Building2,
Users,
Settings,
LogOut,
Crown
} from 'lucide-react';
@@ -35,16 +35,21 @@ export const Sidebar = () => {
};
return (
<aside className="w-64 h-screen glass border-l border-slate-200 sticky top-0 flex flex-col p-4">
<aside className="w-64 h-screen bg-slate-950 border-l border-slate-800/60 sticky top-0 flex flex-col p-4">
{/* Brand */}
<div className="flex items-center gap-3 px-2 py-6">
<div className="w-10 h-10 bg-primary-600 rounded-xl flex items-center justify-center shadow-lg shadow-primary-500/30">
<div className="w-10 h-10 bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-xl flex items-center justify-center shadow-lg shadow-emerald-500/20">
<FileText className="text-white w-6 h-6" />
</div>
<h1 className="text-xl font-bold bg-gradient-to-br from-slate-900 to-slate-500 bg-clip-text text-transparent">
مُصادَق
</h1>
<div>
<h1 className="text-xl font-bold text-white">
مُصادَق
</h1>
<p className="text-[10px] text-slate-500 font-medium tracking-wider">ELITE ACCOUNTANT HUB</p>
</div>
</div>
{/* Navigation */}
<nav className="flex-1 mt-4 space-y-1">
{menuItems.map((item) => (
<NavLink
@@ -52,9 +57,9 @@ export const Sidebar = () => {
to={item.path}
className={({ isActive }) =>
`flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200 group ${
isActive
? 'bg-primary-50 text-primary-600 shadow-sm border border-primary-100'
: 'text-slate-500 hover:bg-slate-50 hover:text-slate-900'
isActive
? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20'
: 'text-slate-400 hover:bg-slate-800/60 hover:text-slate-200 border border-transparent'
}`
}
>
@@ -64,10 +69,11 @@ export const Sidebar = () => {
))}
</nav>
<div className="pt-4 border-t border-slate-100">
{/* Logout */}
<div className="pt-4 border-t border-slate-800/60">
<button
onClick={handleLogout}
className="flex items-center gap-3 px-4 py-3 w-full rounded-xl text-red-500 hover:bg-red-50 transition-all group"
className="flex items-center gap-3 px-4 py-3 w-full rounded-xl text-red-400 hover:bg-red-500/10 transition-all group border border-transparent hover:border-red-500/20"
>
<LogOut className="w-5 h-5 group-hover:-translate-x-1 transition-transform" />
<span className="font-medium">تسجيل الخروج</span>