133 lines
4.5 KiB
JavaScript
133 lines
4.5 KiB
JavaScript
import { NavLink } from 'react-router-dom'
|
|
import {
|
|
Home,
|
|
Users,
|
|
BarChart3,
|
|
FileText,
|
|
Settings,
|
|
X,
|
|
Building2,
|
|
TrendingUp,
|
|
PieChart,
|
|
CreditCard
|
|
} from 'lucide-react'
|
|
import { useTheme } from '../contexts/ThemeContext'
|
|
|
|
const Sidebar = ({ isOpen, onClose }) => {
|
|
const { isDark } = useTheme()
|
|
|
|
const navigation = [
|
|
{ name: 'Dashboard', href: '/dashboard', icon: Home },
|
|
{ name: 'Users', href: '/users', icon: Users },
|
|
{ name: 'Analytics', href: '/analytics', icon: BarChart3 },
|
|
{ name: 'Reports', href: '/reports', icon: FileText },
|
|
{ name: 'Payments', href: '/payments', icon: CreditCard },
|
|
{ name: 'Settings', href: '/settings', icon: Settings },
|
|
]
|
|
|
|
const quickStats = [
|
|
{ name: 'Total Users', value: '1,234', icon: Users, change: '+12%' },
|
|
{ name: 'API Calls Today', value: '45,678', icon: TrendingUp, change: '+8%' },
|
|
{ name: 'Reports Generated', value: '89', icon: FileText, change: '+23%' },
|
|
]
|
|
|
|
return (
|
|
<>
|
|
{/* Mobile backdrop */}
|
|
{isOpen && (
|
|
<div
|
|
className="fixed inset-0 z-40 bg-gray-600 bg-opacity-75 lg:hidden"
|
|
onClick={onClose}
|
|
/>
|
|
)}
|
|
|
|
{/* Sidebar */}
|
|
<div className={`
|
|
fixed inset-y-0 left-0 z-50 w-64 bg-white dark:bg-gray-800 shadow-lg transform transition-transform duration-300 ease-in-out lg:translate-x-0 lg:static lg:inset-0
|
|
${isOpen ? 'translate-x-0' : '-translate-x-full'}
|
|
`}>
|
|
<div className="flex items-center justify-between h-16 px-6 border-b border-gray-200 dark:border-gray-700">
|
|
<div className="flex items-center space-x-2">
|
|
<Building2 className="h-8 w-8 text-primary-600" />
|
|
<span className="text-lg font-bold text-gray-900 dark:text-white">
|
|
Dubai Analytics
|
|
</span>
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className="lg:hidden p-2 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700"
|
|
>
|
|
<X className="h-6 w-6" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Navigation */}
|
|
<nav className="mt-8 px-4">
|
|
<div className="space-y-2">
|
|
{navigation.map((item) => (
|
|
<NavLink
|
|
key={item.name}
|
|
to={item.href}
|
|
className={({ isActive }) =>
|
|
`sidebar-item ${isActive ? 'active' : ''}`
|
|
}
|
|
onClick={onClose}
|
|
>
|
|
<item.icon className="h-5 w-5" />
|
|
{item.name}
|
|
</NavLink>
|
|
))}
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Quick Stats */}
|
|
<div className="mt-8 px-4">
|
|
<h3 className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-4">
|
|
Quick Stats
|
|
</h3>
|
|
<div className="space-y-3">
|
|
{quickStats.map((stat) => (
|
|
<div key={stat.name} className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
|
<div className="flex items-center space-x-3">
|
|
<stat.icon className="h-5 w-5 text-primary-600" />
|
|
<div>
|
|
<p className="text-xs font-medium text-gray-900 dark:text-white">
|
|
{stat.value}
|
|
</p>
|
|
<p className="text-xs text-gray-500 dark:text-gray-400">
|
|
{stat.name}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<span className="text-xs font-medium text-green-600 dark:text-green-400">
|
|
{stat.change}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="absolute bottom-0 w-full p-4 border-t border-gray-200 dark:border-gray-700">
|
|
<div className="flex items-center space-x-3">
|
|
<div className="w-8 h-8 bg-primary-600 rounded-full flex items-center justify-center">
|
|
<span className="text-sm font-medium text-white">A</span>
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-xs font-medium text-gray-900 dark:text-white truncate">
|
|
Admin User
|
|
</p>
|
|
<p className="text-xs text-gray-500 dark:text-gray-400 truncate">
|
|
admin@dubai-analytics.com
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Sidebar
|
|
|