Spaces:
Build error
Build error
File size: 5,720 Bytes
663837d 6332bec 663837d 6332bec 663837d 6332bec 663837d 6332bec 663837d 6332bec 663837d 6332bec 663837d 6332bec 663837d 6332bec 663837d |
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 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 |
import React, { useState } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router';
import {
LayoutDashboard,
FolderKanban,
CheckSquare,
Users,
BarChart2,
Calendar,
MessageSquare,
Settings,
LogOut,
X,
ChevronDown,
HelpCircle
} from 'lucide-react';
const navigation = [
{ name: 'Dashboard', href: '/', icon: LayoutDashboard, current: true },
{ name: 'Projects', href: '/projects', icon: FolderKanban, current: false },
{ name: 'Tasks', href: '/tasks', icon: CheckSquare, current: false },
{ name: 'Team', href: '/team', icon: Users, current: false },
{ name: 'Analytics', href: '/analytics', icon: BarChart2, current: false },
{ name: 'Messages', href: '/messages', icon: MessageSquare, current: false, count: 3 },
{ name: 'Calendar', href: '/calendar', icon: Calendar, current: false },
];
const secondaryNavigation = [
{ name: 'Settings', href: '/settings', icon: Settings },
{ name: 'Help & Support', href: '/help', icon: HelpCircle },
];
export default function Sidebar({ isOpen, onClose }) {
const router = useRouter();
const SidebarContent = () => (
<div className="flex flex-col h-full bg-white dark:bg-dark-surface border-r border-gray-200 dark:border-dark-border">
<div className="flex items-center justify-between h-16 px-6 border-b border-gray-200 dark:border-dark-border">
<div className="flex items-center gap-2">
<div className="w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center text-white font-bold shadow-lg shadow-primary-500/30">
N
</div>
<span className="text-xl font-bold text-gray-900 dark:text-white tracking-tight">
Nexus
</span>
</div>
<button
onClick={onClose}
className="lg:hidden text-gray-400 hover:text-gray-500"
>
<X className="w-6 h-6" />
</button>
</div>
<div className="flex-1 overflow-y-auto py-4 px-3 space-y-1">
<div className="px-3 mb-2 text-xs font-semibold text-gray-400 uppercase tracking-wider">
Main Menu
</div>
{navigation.map((item) => (
<Link key={item.name} href={item.href}>
<div
className={`group flex items-center justify-between px-3 py-2 text-sm font-medium rounded-md transition-all duration-200 ${
router.pathname === item.href
? 'bg-primary-50 text-primary-700 dark:bg-primary-900/20 dark:text-primary-400 shadow-sm'
: 'text-gray-700 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-white'
}`}
>
<div className="flex items-center">
<item.icon
className={`mr-3 h-5 w-5 flex-shrink-0 transition-colors ${
router.pathname === item.href
? 'text-primary-500'
: 'text-gray-400 group-hover:text-gray-500'
}`}
aria-hidden="true"
/>
{item.name}
</div>
{item.count && (
<span className="bg-primary-100 text-primary-600 py-0.5 px-2 rounded-full text-xs font-medium dark:bg-primary-900 dark:text-primary-300 ring-1 ring-inset ring-primary-700/10">
{item.count}
</span>
)}
</div>
</Link>
))}
<div className="px-3 mt-8 mb-2 text-xs font-semibold text-gray-400 uppercase tracking-wider">
System
</div>
{secondaryNavigation.map((item) => (
<Link key={item.name} href={item.href}>
<div className="group flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-white transition-colors duration-200">
<item.icon
className="mr-3 h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
aria-hidden="true"
/>
{item.name}
</div>
</Link>
))}
</div>
<div className="border-t border-gray-200 dark:border-dark-border p-4 bg-gray-50 dark:bg-gray-800/50">
<div className="flex items-center">
<img
className="h-9 w-9 rounded-full object-cover border-2 border-white dark:border-gray-600 shadow-sm"
src="https://picsum.photos/seed/user1/200/200"
alt=""
/>
<div className="ml-3">
<p className="text-sm font-medium text-gray-700 dark:text-gray-200">Alex Morgan</p>
<p className="text-xs text-gray-500 dark:text-gray-400">Product Manager</p>
</div>
</div>
<button className="mt-3 w-full flex items-center justify-center px-3 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600 transition-colors">
<LogOut className="w-4 h-4 mr-2" />
Sign Out
</button>
</div>
</div>
);
return (
<>
<div className={`fixed inset-0 z-50 lg:hidden ${isOpen ? 'block' : 'hidden'}`}>
<div className="fixed inset-0 bg-gray-600 bg-opacity-75" onClick={onClose}></div>
<div className="fixed inset-y-0 left-0 flex flex-col w-64 max-w-xs animate-slide-up">
<SidebarContent />
</div>
</div>
<div className="hidden lg:fixed lg:inset-y-0 lg:flex lg:w-64 lg:flex-col">
<SidebarContent />
</div>
</>
);
} |