import { Fragment, useState } 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, CircleUserRound, LogOut, Mails, PlusSquare, Settings, UserCircle2 } from "lucide-react"; import { usePopper } from "react-popper"; // hooks import { useApplication, useEventTracker, useUser, useWorkspace } from "hooks/store"; // hooks import useToast from "hooks/use-toast"; // ui import { Avatar, Loader } from "@plane/ui"; // types import { IWorkspace } from "@plane/types"; // Static Data const userLinks = (workspaceSlug: string, userId: string) => [ { key: "workspace_invites", name: "Workspace invites", href: "/invitations", icon: Mails, }, { key: "view_profile", name: "View profile", href: `/${workspaceSlug}/profile/${userId}`, icon: CircleUserRound, }, { key: "settings", name: "Settings", href: `/${workspaceSlug}/settings`, icon: Settings, }, ]; 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(() => { // router const router = useRouter(); const { workspaceSlug } = router.query; // store hooks const { theme: { sidebarCollapsed, toggleSidebar }, } = useApplication(); const { setTrackElement } = useEventTracker(); const { currentUser, updateCurrentUser, isUserInstanceAdmin, signOut } = useUser(); const { currentWorkspace: activeWorkspace, workspaces } = useWorkspace(); // hooks const { setToastAlert } = useToast(); const { setTheme } = useTheme(); // popper-js refs const [referenceElement, setReferenceElement] = useState(null); const [popperElement, setPopperElement] = useState(null); // popper-js init const { styles, attributes } = usePopper(referenceElement, popperElement, { placement: "right", modifiers: [ { name: "preventOverflow", options: { padding: 12, }, }, ], }); const handleWorkspaceNavigation = (workspace: IWorkspace) => updateCurrentUser({ last_workspace_id: workspace?.id, }); 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.", }) ); }; const handleItemClick = () => { if (window.innerWidth < 768) { toggleSidebar(); } }; const workspacesList = Object.values(workspaces ?? {}); // TODO: fix workspaces list scroll return (
{({ open }) => ( <>
{activeWorkspace?.logo && activeWorkspace.logo !== "" ? ( Workspace Logo ) : ( activeWorkspace?.name?.charAt(0) ?? "..." )}
{!sidebarCollapsed && (

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

)}
{!sidebarCollapsed && (
{currentUser?.email}
{workspacesList ? (
{workspacesList.length > 0 && workspacesList.map((workspace) => ( { handleWorkspaceNavigation(workspace); handleItemClick(); }} className="w-full" >
{workspace?.logo && workspace.logo !== "" ? ( Workspace Logo ) : ( workspace?.name?.charAt(0) ?? "..." )}
{workspace.name}
{workspace.id === activeWorkspace?.id && ( )}
))}
) : (
)}
setTrackElement("APP_SIDEBAR_WORKSPACE_DROPDOWN")} className="w-full" > Create workspace {userLinks(workspaceSlug?.toString() ?? "", currentUser?.id ?? "").map((link, index) => ( { if (index > 0) handleItemClick(); }} > {link.name} ))}
Sign out
)}
{!sidebarCollapsed && (
{currentUser?.email} {profileLinks(workspaceSlug?.toString() ?? "", currentUser?.id ?? "").map((link, index) => ( { if (index == 0) handleItemClick(); }} > {link.name} ))}
Sign out
{isUserInstanceAdmin && (
Enter God Mode
)}
)}
); });