// Sidebar.jsx
import { useNavigate } from "react-router-dom";
import { menuConfig } from "../constants/menuConfig";

const Sidebar = () => {
  const navigate = useNavigate();

  return (
    <aside className="sidebar">
      <nav>
        {Object.entries(menuConfig).map(([key, section]) => (
          <button
            key={key}
            className="sidebar-link"
            onClick={() => navigate(section.basePath)}
          >
            {section.label}
          </button>
        ))}
      </nav>
    </aside>
  );
};

export default Sidebar;

// import React, { useState } from "react";
// import { NavLink } from "react-router-dom";
// import "./..styles/Sidebar.css";

// export default function Sidebar() {
//   const [collapsed, setCollapsed] = useState(false);

//   return (
//     <div className={`sidebar ${collapsed ? "collapsed" : ""}`}>
//       <div className="sidebar-header">
//         <button className="toggle-btn" onClick={() => setCollapsed(!collapsed)}>
//           ☰
//         </button>
//         {!collapsed && <span className="title">Dashboard</span>}
//       </div>

//       <nav className="sidebar-nav">
//         <NavLink to="/app/dashboard">Dashboards</NavLink>
//         <NavLink to="/app/expenses-to-approve">Expenses to be approved</NavLink>
//         <NavLink to="/app/expenses">Expenses</NavLink>
//         <NavLink to="/app/inventory">Inventory</NavLink>
//         <NavLink to="/app/payroll">Payroll</NavLink>
//         <NavLink to="/app/hotel">Hotel</NavLink>
//       </nav>
//     </div>
//   );
// }