import React from "react"; import { useRouter } from "next/router"; import Link from "next/link"; // hooks import useTheme from "hooks/use-theme"; // icons import { ChartBarIcon } from "@heroicons/react/24/outline"; import { GridViewIcon, AssignmentClipboardIcon, TickMarkIcon, SettingIcon } from "components/icons"; export const WorkspaceSidebarMenu = () => { const router = useRouter(); const { workspaceSlug } = router.query; // theme context const { collapsed: sidebarCollapse } = useTheme(); const workspaceLinks = (workspaceSlug: string) => [ { icon: GridViewIcon, name: "Dashboard", href: `/${workspaceSlug}`, }, { icon: ChartBarIcon, name: "Analytics", href: `/${workspaceSlug}/analytics`, }, { icon: AssignmentClipboardIcon, name: "Projects", href: `/${workspaceSlug}/projects`, }, { icon: TickMarkIcon, name: "My Issues", href: `/${workspaceSlug}/me/my-issues`, }, { icon: SettingIcon, name: "Settings", href: `/${workspaceSlug}/settings`, }, ]; return (
{workspaceLinks(workspaceSlug as string).map((link, index) => { const isActive = link.name === "Settings" ? router.asPath.includes(link.href) : router.asPath === link.href; return ( {!sidebarCollapse && link.name} ); })}
); };