@aqcodes12/sidebar

A reusable, responsive Sidebar component built with React, Tailwind CSS v3, and Lucide icons — perfect for dashboards, admin panels, and SaaS apps.

⚙️ Example Setup (App.jsx)

Here’s a complete example showing how to use the Sidebar inside your React project with React Router v6:

import { Sidebar } from "@aqcodes12/sidebar";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

function App() {
  // Dummy components for demo
  const HomePage = () => (
    <div className="text-center text-xl mt-10">📊 Home Page</div>
  );
  const Dashboard = () => (
    <div className="text-center text-xl mt-10">📊 Dashboard Page</div>
  );
  const Inbox = () => (
    <div className="text-center text-xl mt-10">📥 Inbox Page</div>
  );
  const Users = () => (
    <div className="text-center text-xl mt-10">👥 Users Page</div>
  );
  const Products = () => (
    <div className="text-center text-xl mt-10">🛍️ Products Page</div>
  );
  const Login = () => (
    <div className="text-center text-xl mt-10">🔐 Login Page</div>
  );
  const Signup = () => (
    <div className="text-center text-xl mt-10">🧾 Signup Page</div>
  );
  const Logout = () => (
    <div className="text-center text-xl mt-10">🚪 Logout Page</div>
  );
  const Profile = () => (
    <div className="text-center text-xl mt-10">👤 Profile Page</div>
  );
  const Settings = () => (
    <div className="text-center text-xl mt-10">⚙️ Settings Page</div>
  );

  return (
    <Router>
      <Routes>
        {/* Sidebar wrapper */}
        <Route element={<Sidebar />}>
          <Route path="/" element={<HomePage />} />
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/inbox" element={<Inbox />} />
          <Route path="/users" element={<Users />} />
          <Route path="/products" element={<Products />} />
          <Route path="/login" element={<Login />} />
          <Route path="/signup" element={<Signup />} />
          <Route path="/logout" element={<Logout />} />
          <Route path="/profile" element={<Profile />} />
          <Route path="/settings" element={<Settings />} />
        </Route>
      </Routes>
    </Router>
  );
}

export default App;