plane/web/components/instance/sidebar-dropdown.tsx
sriram veeraghanta 3d09a69d58
fix: eslint issues and reconfiguring (#3891)
* fix: eslint fixes

---------

Co-authored-by: gurusainath <gurusainath007@gmail.com>
2024-03-06 18:39:14 +05:30

156 lines
5.5 KiB
TypeScript

import { Fragment } from "react";
import { observer } from "mobx-react-lite";
import Link from "next/link";
import { useRouter } from "next/router";
import { useTheme } from "next-themes";
import { mutate } from "swr";
// components
import { Menu, Transition } from "@headlessui/react";
// icons
import { LogIn, LogOut, Settings, UserCog2 } from "lucide-react";
// hooks
import { Avatar, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
import { useApplication, useUser } from "hooks/store";
// ui
// Static Data
const PROFILE_LINKS = [
{
key: "settings",
name: "Settings",
icon: Settings,
link: `/profile`,
},
];
export const InstanceSidebarDropdown = observer(() => {
// router
const router = useRouter();
// store hooks
const {
theme: { sidebarCollapsed },
router: { workspaceSlug },
} = useApplication();
const { signOut, currentUser, currentUserSettings } = useUser();
// hooks
const { setTheme } = useTheme();
// redirect url for normal mode
const redirectWorkspaceSlug =
workspaceSlug ||
currentUserSettings?.workspace?.last_workspace_slug ||
currentUserSettings?.workspace?.fallback_workspace_slug ||
"";
const handleSignOut = async () => {
await signOut()
.then(() => {
mutate("CURRENT_USER_DETAILS", null);
setTheme("system");
router.push("/");
})
.catch(() =>
setToast({
type: TOAST_TYPE.ERROR,
title: "Error!",
message: "Failed to sign out. Please try again.",
})
);
};
return (
<div className="flex max-h-[3.75rem] items-center gap-x-5 gap-y-2 border-b border-custom-sidebar-border-200 px-4 py-3.5">
<div className="h-full w-full truncate">
<div
className={`flex flex-grow items-center gap-x-2 truncate rounded py-1 ${
sidebarCollapsed ? "justify-center" : ""
}`}
>
<div className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded bg-custom-sidebar-background-80">
<UserCog2 className="h-5 w-5 text-custom-text-200" />
</div>
{!sidebarCollapsed && (
<div className="flex w-full gap-2">
<h4 className="grow truncate text-base font-medium text-custom-text-200">Instance admin</h4>
<Tooltip position="bottom-left" tooltipContent="Exit God Mode">
<div className="flex-shrink-0">
<Link href={`/${redirectWorkspaceSlug}`}>
<span>
<LogIn className="h-5 w-5 rotate-180 text-custom-text-200" />
</span>
</Link>
</div>
</Tooltip>
</div>
)}
</div>
</div>
{!sidebarCollapsed && (
<Menu as="div" className="relative flex-shrink-0">
<Menu.Button className="grid place-items-center outline-none">
<Avatar
name={currentUser?.display_name}
src={currentUser?.avatar}
size={24}
shape="square"
className="!text-base"
/>
</Menu.Button>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items
className="absolute left-0 z-20 mt-1.5 flex w-52 flex-col divide-y
divide-custom-sidebar-border-100 rounded-md border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-1 py-2 text-xs shadow-lg outline-none"
>
<div className="flex flex-col gap-2.5 pb-2">
<span className="px-2 text-custom-sidebar-text-200">{currentUser?.email}</span>
{PROFILE_LINKS.map((link) => (
<Menu.Item key={link.key} as="button" type="button">
<Link href={link.link}>
<span className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80">
<link.icon className="h-4 w-4 stroke-[1.5]" />
{link.name}
</span>
</Link>
</Menu.Item>
))}
</div>
<div className="py-2">
<Menu.Item
as="button"
type="button"
className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
onClick={handleSignOut}
>
<LogOut className="h-4 w-4 stroke-[1.5]" />
Sign out
</Menu.Item>
</div>
<div className="p-2 pb-0">
<Menu.Item as="button" type="button" className="w-full">
<Link href={`/${redirectWorkspaceSlug}`}>
<span className="flex w-full items-center justify-center rounded bg-custom-primary-100/20 px-2 py-1 text-sm font-medium text-custom-primary-100 hover:bg-custom-primary-100/30 hover:text-custom-primary-200">
Exit God Mode
</span>
</Link>
</Menu.Item>
</div>
</Menu.Items>
</Transition>
</Menu>
)}
</div>
);
});