Monitoring-Speed-App/src/components/layout/Sidebar.jsx
2025-02-14 23:48:37 +07:00

30 lines
1.1 KiB
JavaScript

import { Navbar, Nav } from 'react-bootstrap';
import { Link, useLocation } from 'react-router-dom';
import { FaTachometerAlt, FaDesktop, FaChartBar, FaCog, FaBars } from "react-icons/fa";
import { useState, useEffect } from 'react';
const Sidebar = ({ theme }) => {
const location = useLocation();
return (
<div className={`sidebar-app ${theme}`}>
<Nav className="flex-column w-100">
<Nav.Link as={Link} to="/dashboard" className={location.pathname === "/dashboard" ? "active" : ""}>
<FaTachometerAlt className="me-2" /> Dashboard
</Nav.Link>
<Nav.Link as={Link} to="/devices" className={location.pathname === "/devices" ? "active" : ""}>
<FaDesktop className="me-2" /> Devices
</Nav.Link>
<Nav.Link as={Link} to="/reports" className={location.pathname === "/reports" ? "active" : ""}>
<FaChartBar className="me-2" /> Reports
</Nav.Link>
<Nav.Link as={Link} to="/settings" className={location.pathname === "/settings" ? "active" : ""}>
<FaCog className="me-2" /> Settings
</Nav.Link>
</Nav>
</div>
);
};
export default Sidebar;