import { useEffect, useRef, useState } from "react"; import { mutate } from "swr"; import Link from "next/link"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import { useTheme } from "next-themes"; import { ChevronLeft, LogOut, MoveLeft, Plus, UserPlus } from "lucide-react"; // hooks import { useApplication, useUser, useWorkspace } from "hooks/store"; import useToast from "hooks/use-toast"; // ui import { Tooltip } from "@plane/ui"; // constants import { PROFILE_ACTION_LINKS } from "constants/profile"; import useOutsideClickDetector from "hooks/use-outside-click-detector"; const WORKSPACE_ACTION_LINKS = [ { key: "create-workspace", Icon: Plus, label: "Create workspace", href: "/create-workspace", }, { key: "invitations", Icon: UserPlus, label: "Invitations", href: "/invitations", }, ]; export const ProfileLayoutSidebar = observer(() => { // states const [isSigningOut, setIsSigningOut] = useState(false); // router const router = useRouter(); // next themes const { setTheme } = useTheme(); // toast const { setToastAlert } = useToast(); // store hooks const { theme: { sidebarCollapsed, toggleSidebar, toggleMobileSidebar }, } = useApplication(); const { currentUser, currentUserSettings, signOut } = useUser(); const { workspaces } = useWorkspace(); const workspacesList = Object.values(workspaces ?? {}); // redirect url for normal mode const redirectWorkspaceSlug = currentUserSettings?.workspace?.last_workspace_slug || currentUserSettings?.workspace?.fallback_workspace_slug || ""; const ref = useRef(null); useOutsideClickDetector(ref, () => { if (sidebarCollapsed === false) { if (window.innerWidth < 768) { toggleSidebar(); } } }); useEffect(() => { const handleResize = () => { if (window.innerWidth <= 768) { toggleSidebar(true); } }; handleResize(); window.addEventListener("resize", handleResize); return () => { window.removeEventListener("resize", handleResize); }; }, [toggleSidebar]); const handleItemClick = () => { if (window.innerWidth < 768) { toggleMobileSidebar(); } }; const handleSignOut = async () => { setIsSigningOut(true); 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.", }) ) .finally(() => setIsSigningOut(false)); }; return (
{!sidebarCollapsed && (

Profile settings

)}
{!sidebarCollapsed && (
Your account
)}
{PROFILE_ACTION_LINKS.map((link) => { if (link.key === "change-password" && currentUser?.is_password_autoset) return null; return (
{} {!sidebarCollapsed && link.label}
); })}
{!sidebarCollapsed && (
Workspaces
)} {workspacesList && workspacesList.length > 0 && (
{workspacesList.map((workspace) => ( {workspace?.logo && workspace.logo !== "" ? ( Workspace Logo ) : ( workspace?.name?.charAt(0) ?? "..." )} {!sidebarCollapsed && (

{workspace.name}

)}
))}
)}
{WORKSPACE_ACTION_LINKS.map((link) => (
{} {!sidebarCollapsed && link.label}
))}
); });