import { Fragment } from "react"; import { useRouter } from "next/router"; import Link from "next/link"; // headless ui import { Menu, Transition } from "@headlessui/react"; // next-themes import { useTheme } from "next-themes"; // hooks import useUser from "hooks/use-user"; import useThemeHook from "hooks/use-theme"; import useWorkspaces from "hooks/use-workspaces"; import useToast from "hooks/use-toast"; // services import userService from "services/user.service"; import authenticationService from "services/authentication.service"; // components import { Avatar, Icon, Loader } from "components/ui"; // icons import { CheckIcon, PlusIcon } from "@heroicons/react/24/outline"; // helpers import { truncateText } from "helpers/string.helper"; // types import { IWorkspace } from "types"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // Static Data const userLinks = (workspaceSlug: string, userId: string) => [ { name: "Workspace Settings", href: `/${workspaceSlug}/settings`, }, { name: "Workspace Invites", href: "/invitations", }, { name: "My Profile", href: `/${workspaceSlug}/profile/${userId}`, }, ]; const profileLinks = (workspaceSlug: string, userId: string) => [ { name: "View profile", icon: "account_circle", link: `/${workspaceSlug}/profile/${userId}`, }, { name: "Settings", icon: "settings", link: `/${workspaceSlug}/me/profile`, }, ]; export const WorkspaceSidebarDropdown = () => { const store: any = useMobxStore(); const router = useRouter(); const { workspaceSlug } = router.query; const { user, mutateUser } = useUser(); const { collapsed: sidebarCollapse } = useThemeHook(); const { setTheme } = useTheme(); const { setToastAlert } = useToast(); const { activeWorkspace, workspaces } = useWorkspaces(); const handleWorkspaceNavigation = (workspace: IWorkspace) => { userService .updateUser({ last_workspace_id: workspace?.id, }) .then(() => { mutateUser(); router.push(`/${workspace.slug}/`); }) .catch(() => setToastAlert({ type: "error", title: "Error!", message: "Failed to navigate to the workspace. Please try again.", }) ); }; const handleSignOut = async () => { await authenticationService .signOut() .then(() => { mutateUser(undefined); router.push("/"); setTheme("system"); }) .catch(() => setToastAlert({ type: "error", title: "Error!", message: "Failed to sign out. Please try again.", }) ); }; return (
{activeWorkspace?.logo && activeWorkspace.logo !== "" ? ( Workspace Logo ) : ( activeWorkspace?.name?.charAt(0) ?? "..." )}
{!store?.theme?.sidebarCollapsed && (

{activeWorkspace?.name ? truncateText(activeWorkspace.name, 14) : "Loading..."}

)}
Workspace {workspaces ? (
{workspaces.length > 0 ? ( workspaces.map((workspace) => ( {({ active }) => ( )} )) ) : (

No workspace found!

)} { router.push("/create-workspace"); }} className="flex w-full items-center gap-2 px-2 py-1 text-sm text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80" > Create Workspace
) : (
)}
{userLinks(workspaceSlug?.toString() ?? "", user?.id ?? "").map((link, index) => ( {link.name} ))}
Sign out
{!store?.theme?.sidebarCollapsed && (
{user?.email} {profileLinks(workspaceSlug?.toString() ?? "", user?.id ?? "").map( (link, index) => ( {link.name} ) )}
Sign out
)}
); };