Spaces:
Running
Running
File size: 2,797 Bytes
99be3c0 | 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 | ```javascript
import React from 'react';
import { Link, useLocation } from 'react-router-dom';
const Sidebar = ({ active }) => {
const location = useLocation();
const isActive = (path) => {
return location.pathname === path ? 'active-nav-item text-purple-600 bg-purple-50' :
'text-gray-600 hover:bg-purple-50 hover:text-purple-600';
};
return (
<div className="sidebar bg-white w-64 border-r border-gray-200 flex flex-col">
<div className="flex items-center justify-center h-16 px-4 border-b border-gray-200">
<div className="flex items-center">
<i data-feather="box" className="w-6 h-6 text-purple-600"></i>
<span className="ml-2 text-xl font-bold text-gray-800">AppVoyage</span>
</div>
</div>
<div className="flex-1 overflow-y-auto">
<nav className="px-4 py-6 space-y-1">
<Link to="/dashboard" className={`group flex items-center px-3 py-3 text-sm font-medium rounded-md ${isActive('/dashboard')}`}>
<i data-feather="home" className={`flex-shrink-0 h-5 w-5 mr-3 ${isActive('/dashboard').includes('text-purple-600') ? 'text-purple-600' : 'text-gray-400'}`}></i>
Dashboard
</Link>
<Link to="/apps" className={`group flex items-center px-3 py-3 text-sm font-medium rounded-md ${isActive('/apps')}`}>
<i data-feather="grid" className={`flex-shrink-0 h-5 w-5 mr-3 ${isActive('/apps').includes('text-purple-600') ? 'text-purple-600' : 'text-gray-400'}`}></i>
Apps
</Link>
<Link to="/users" className={`group flex items-center px-3 py-3 text-sm font-medium rounded-md ${isActive('/users')}`}>
<i data-feather="users" className={`flex-shrink-0 h-5 w-5 mr-3 ${isActive('/users').includes('text-purple-600') ? 'text-purple-600' : 'text-gray-400'}`}></i>
Users
</Link>
<Link to="#" className="group flex items-center px-3 py-3 text-sm font-medium rounded-md text-gray-600 hover:bg-purple-50 hover:text-purple-600">
<i data-feather="settings" className="flex-shrink-0 h-5 w-5 mr-3 text-gray-400 group-hover:text-purple-600"></i>
Settings
</Link>
</nav>
</div>
<div className="p-4 border-t border-gray-200">
<div className="flex items-center">
<img className="h-9 w-9 rounded-full" src="http://static.photos/people/200x200/10" alt="User avatar" />
<div className="ml-3">
<p className="text-sm font-medium text-gray-700">John Doe</p>
<a href="#" className="text-xs font-medium text-purple-600 hover:text-purple-500">Sign out</a>
</div>
</div>
</div>
</div>
);
};
export default Sidebar;
``` |