import Image from "next/image"; import { useRouter } from "next/router"; import React, { useState } from "react"; import { ToastContainer } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; const Sidebar = () => { const router = useRouter(); const [collapsed, setCollapsed] = useState(false); const toggleSidebar = () => { setCollapsed(!collapsed); }; return ( <div className={`sidebar ${collapsed ? "collapsed" : ""}`}> <ToastContainer position="bottom-right"></ToastContainer> {/* <button className="toggle-btn" onClick={toggleSidebar}> Toggle Sidebar </button> */} <ul> <li className={router.pathname === "/vendor/dashboard" ? "active" : ""}> <a href="/vendor/dashboard"> <Image alt="" width={22} height={15} src="/images/vendor/icon-dashboard.svg" /> <span>Dashboard</span> </a> </li> <li className={router.pathname === "/vendor/orders" ? "active" : ""}> <a href="/vendor/orders"> <Image alt="" width={22} height={15} src="/images/vendor/icon-orders.svg" /> <span>Orders</span> </a> </li> <li className={router.pathname === "/vendor/activities" ? "active" : ""}> <a href="/vendor/activities"> <Image alt="" width={22} height={15} src="/images/vendor/icon-activities.svg" /> <span>Activities</span> </a> </li> </ul> </div> ); }; export default Sidebar;