import { Fragment } from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import Link from "next/link"; import { useTheme } from "next-themes"; import { Menu, Transition } from "@headlessui/react"; import { mutate } from "swr"; import { Check, ChevronDown, LogOut, Plus, Settings, UserCircle2 } from "lucide-react"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // hooks import useToast from "hooks/use-toast"; // ui import { Avatar, Loader } from "@plane/ui"; // types import { IWorkspace } from "types"; // 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: UserCircle2, link: `/${workspaceSlug}/profile/${userId}`, }, { name: "Settings", icon: Settings, link: "/profile", }, ]; export const WorkspaceSidebarDropdown = observer(() => { const router = useRouter(); const { workspaceSlug } = router.query; // store const { theme: { sidebarCollapsed }, workspace: { workspaces, currentWorkspace: activeWorkspace }, user: { currentUser, updateCurrentUser, isUserInstanceAdmin, signOut }, trackEvent: { setTrackElement }, } = useMobxStore(); // hooks const { setToastAlert } = useToast(); const { setTheme } = useTheme(); const handleWorkspaceNavigation = (workspace: IWorkspace) => { updateCurrentUser({ last_workspace_id: workspace?.id, }) .then(() => { router.push(`/${workspace.slug}/`); }) .catch(() => setToastAlert({ type: "error", title: "Error!", message: "Failed to navigate to the workspace. Please try again.", }) ); }; const handleSignOut = async () => { await signOut() .then(() => { mutate("CURRENT_USER_DETAILS", null); setTheme("system"); router.push("/"); }) .catch(() => setToastAlert({ type: "error", title: "Error!", message: "Failed to sign out. Please try again.", }) ); }; return (
{({ open }) => ( <>
{activeWorkspace?.logo && activeWorkspace.logo !== "" ? ( Workspace Logo ) : ( activeWorkspace?.name?.charAt(0) ?? "..." )}
{!sidebarCollapsed && (

{activeWorkspace?.name ? activeWorkspace.name : "Loading..."}

)}
{!sidebarCollapsed && (
Workspace {workspaces ? (
{workspaces.length > 0 ? ( workspaces.map((workspace: IWorkspace) => ( {() => ( )} )) ) : (

No workspace found!

)}
{ setTrackElement("APP_SIEDEBAR_WORKSPACE_DROPDOWN"); 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() ?? "", currentUser?.id ?? "").map((link, index) => ( { router.push(link.href); }} className="flex w-full cursor-pointer items-center justify-start rounded px-2 py-1 text-sm text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80" > {link.name} ))}
Sign out
)}
{!sidebarCollapsed && (
{currentUser?.email} {profileLinks(workspaceSlug?.toString() ?? "", currentUser?.id ?? "").map((link, index) => ( {link.name} ))}
Sign out
{isUserInstanceAdmin && (
Enter God Mode
)}
)}
); });