src/components/Sidebar.js

```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;
```