import React from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; interface SidebarProps { companyName?: string; collapsed?: boolean; } export default function Sidebar({ companyName = "Zitlac Media", collapsed = false }: SidebarProps) { const location = useLocation(); const navigate = useNavigate(); const navItems = [ { icon: ( ), label: "Company Wiki", path: "/company-wiki", active: location.pathname === "/company-wiki" }, { icon: ( ), label: "Submissions", path: "/submissions", active: location.pathname === "/submissions" }, { icon: ( ), label: "Reports", path: "/reports", active: location.pathname === "/reports" || location.pathname === "/" }, { icon: ( ), label: "Chat", path: "/chat", active: location.pathname === "/chat" }, { icon: ( ), label: "Help", path: "/help", active: location.pathname === "/help" } ]; const settingsIcon = ( ); const handleNavClick = (path: string) => { navigate(path); }; return (
{/* Header Section */}
{/* Company Selector */}
{companyName}
{/* Navigation Items */}
{navItems.map((item, index) => (
handleNavClick(item.path)} className={`w-60 px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2 cursor-pointer ${item.active ? 'bg-[--Neutrals-NeutralSlate100]' : 'hover:bg-[--Neutrals-NeutralSlate50]' }`} >
{React.cloneElement(item.icon, { stroke: item.active ? "var(--Brand-Orange, #5E48FC)" : "var(--Neutrals-NeutralSlate400, #A4A7AE)" })}
{item.label}
))}
{/* Bottom Section */}
{/* Settings */}
handleNavClick("/settings")} className="w-60 px-4 py-2.5 rounded-[34px] inline-flex justify-start items-center gap-2 cursor-pointer hover:bg-[--Neutrals-NeutralSlate50]" >
{settingsIcon}
Settings
{/* Build Report Card */}
Build [Company]'s Report
Share this form with your team members to capture valuable info about your company to train Auditly.
Invite
Copy
); }