components/Sidebar.jsx

javascript
import { Link } from 'react-router-dom';

const Sidebar = () => {
  return (
    <div className="bg-white shadow-md h-full p-4">
      <div className="flex items-center justify-center mb-8">
        <h1 className="text-xl font-bold text-gray-800">Dashboard Delight</h1>
      </div>
      <nav>
        <ul className="space-y-2">
          <li>
            <Link to="/" className="flex items-center p-2 text-gray-700 hover:bg-gray-100 rounded-lg">
              <i data-feather="home" className="w-5 h-5 mr-3"></i>
              <span>Dashboard</span>
            </Link>
          </li>
          <li>
            <Link to="/analytics" className="flex items-center p-2 text-gray-700 hover:bg-gray-100 rounded-lg">
              <i data-feather="bar-chart-2" className="w-5 h-5 mr-3"></i>
              <span>Analytics</span>
            </Link>
          </li>
          <li>
            <Link to="/orders" className="flex items-center p-2 text-gray-700 hover:bg-gray-100 rounded-lg">
              <i data-feather="shopping-bag" className="w-5 h-5 mr-3"></i>
              <span>Orders</span>
            </Link>
          </li>
          <li>
            <Link to="/customers" className="flex items-center p-2 text-gray-700 hover:bg-gray-100 rounded-lg">
              <i data-feather="users" className="w-5 h-5 mr-3"></i>
              <span>Customers</span>
            </Link>
          </li>
          <li>
            <Link to="/settings" className="flex items-center p-2 text-gray-700 hover:bg-gray-100 rounded-lg">
              <i data-feather="settings" className="w-5 h-5 mr-3"></i>
              <span>Settings</span>
            </Link>
          </li>
        </ul>
      </nav>
    </div>
  );
};

export default Sidebar;

</html>