"use client";
import { FC, useEffect, useState } from "react";
import {
Box,
Grid,
Typography,
List,
ListItemButton,
ListItemIcon,
ListItemText,
ListItemSecondaryAction,
Drawer,
Collapse,
useTheme,
useMediaQuery,
} from "@mui/material";
import {
FeaturedPlayList as FeaturedPlayListIcon,
Person as PersonIcon,
Insights as InsightsIcon,
Logout as LogoutIcon,
Cottage as CottageIcon,
Settings as SettingsIcon,
ExpandCircleDown as ExpandCircleDownIcon,
Dvr as DvrIcon,
Assessment as AssessmentIcon,
LibraryBooks as LibraryBooksIcon,
School as SchoolIcon,
} from "@mui/icons-material";
import { usePathname } from "next/navigation";
import Link from "next/link";
import Image from "next/image";
import LinkLogo from "public/link-logo-small.png";
import { useSession, signOut } from "next-auth/react";
import { getOverviewTicketCountsAction } from "app/_actions/overviews";
import { SearchBox } from "./SearchBox";
import { fonts } from "@link-stack/ui";
const MenuItem = ({
name,
href,
Icon,
iconSize,
inset = false,
selected = false,
open = true,
badge,
depth = 0,
target = "_self",
}: any) => {
const { roboto } = fonts;
return (
{iconSize > 0 ? (
) : (
{depth > 0 && (
)}
)}
{open && (
{name}
}
/>
)}
{open && badge && badge > 0 ? (
{badge}
) : null}
);
};
interface SidebarProps {
open: boolean;
setOpen: (open: boolean) => void;
openWidth: number;
closedWidth: number;
leafcutterEnabled?: boolean;
}
export const Sidebar: FC = ({ open, setOpen, openWidth, closedWidth, leafcutterEnabled = false }) => {
const pathname = usePathname();
const { data: session } = useSession();
const [overviewCounts, setOverviewCounts] = useState(null);
const { poppins } = fonts;
const username = session?.user?.name || "";
// @ts-ignore
const roles = session?.user?.roles || [];
useEffect(() => {
const fetchCounts = async () => {
const counts = await getOverviewTicketCountsAction();
setOverviewCounts(counts);
};
fetchCounts();
const interval = setInterval(fetchCounts, 30000);
return () => clearInterval(interval);
}, []);
const theme = useTheme();
const mobile = useMediaQuery(theme.breakpoints.down('sm'));
const logout = () => {
signOut({ callbackUrl: "/login" });
};
return (
{if (mobile) setOpen(false)}}
PaperProps={{
sx: {
width: open ? openWidth : closedWidth,
border: 0,
overflow: open ? "visible" : "hidden",
},
}}
>
{
setOpen!(!open);
}}
>
.
{open && (
CDR Link
)}
Hello
{open
? username
: username
.split(" ")
.map((name) => name.substring(0, 1))
.join("")}
{open && }
{leafcutterEnabled && (
)}
{leafcutterEnabled && (
)}
{roles.includes("admin") && (
<>
{roles.includes("label_studio") && (
)}
)}
);
};