"use client";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { signOut } from "next-auth/react";
import type React from "react"; // No hooks needed since state is now managed by parent
import { useId } from "react";
import { SimpleThemeToggle } from "@/components/ui/theme-toggle";
// Icons for the sidebar
const DashboardIcon = () => (
);
const CompanyIcon = () => (
);
const UsersIcon = () => (
);
const SessionsIcon = () => (
);
const LogoutIcon = () => (
);
const MinimalToggleIcon = ({ isExpanded }: { isExpanded: boolean }) => (
);
export interface SidebarProps {
isExpanded: boolean;
onToggle: () => void;
isMobile?: boolean; // Add this property to indicate mobile viewport
onNavigate?: () => void; // Function to call when navigating to a new page
}
interface NavItemProps {
href: string;
label: string;
icon: React.ReactNode;
isExpanded: boolean;
isActive: boolean;
onNavigate?: () => void; // Function to call when navigating to a new page
}
const NavItem: React.FC = ({
href,
label,
icon,
isExpanded,
isActive,
onNavigate,
}) => (
{
if (onNavigate) {
onNavigate();
}
}}
>
{icon}
{isExpanded ? (
{label}
) : (
{label}
)}
);
export default function Sidebar({
isExpanded,
onToggle,
isMobile = false,
onNavigate,
}: SidebarProps) {
const sidebarId = useId();
const pathname = usePathname() || "";
const handleLogout = () => {
signOut({ callbackUrl: "/login" });
};
return (
<>
{/* Backdrop overlay when sidebar is expanded on mobile */}
{isExpanded && isMobile && (
{
if (e.key === "Escape") {
onToggle();
}
}}
role="button"
tabIndex={0}
aria-label="Close sidebar"
/>
)}
);
}