github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: profile dropdown in the sidebar (#1737)

Browse Source 
* chore: profile dropdown in the sidebar

* style: update spacing and font sizes
This commit is contained in:
Aaryan Khandelwal 2023-08-01 13:31:16 +05:30 committed by GitHub
parent 92b22dc99e
commit 85a7a7df2b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 167 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
apps/app/components/workspace/sidebar-dropdown.tsx
View File

@ -16,7 +16,7 @@ import useToast from "hooks/use-toast";
import userService from "services/user.service"; import userService from "services/user.service";
import authenticationService from "services/authentication.service"; import authenticationService from "services/authentication.service";
// components // components
import { Avatar, Loader } from "components/ui"; import { Avatar, Icon, Loader } from "components/ui";
// icons // icons
import { CheckIcon, PlusIcon } from "@heroicons/react/24/outline"; import { CheckIcon, PlusIcon } from "@heroicons/react/24/outline";
// helpers // helpers
@ -40,6 +40,19 @@ const userLinks = (workspaceSlug: string, userId: string) => [
}, },
]; ];
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 = () => { export const WorkspaceSidebarDropdown = () => {
const router = useRouter(); const router = useRouter();
const { workspaceSlug } = router.query; const { workspaceSlug } = router.query;
@ -90,8 +103,8 @@ export const WorkspaceSidebarDropdown = () => {
}; };
return ( return (
<Menu as="div" className="relative col-span-4 inline-block w-full px-4 pt-4 text-left"> <div className="inline-flex items-center gap-2 px-4 pt-4">
<div className="flex items-center justify-between gap-2"> <Menu as="div" className="relative col-span-4 inline-block w-full text-left">
<Menu.Button className="text-custom-sidebar-text-200 flex w-full items-center rounded-sm text-sm font-medium focus:outline-none"> <Menu.Button className="text-custom-sidebar-text-200 flex w-full items-center rounded-sm text-sm font-medium focus:outline-none">
<div <div
className={`flex w-full items-center gap-x-2 rounded-sm bg-custom-sidebar-background-80 p-1 ${ className={`flex w-full items-center gap-x-2 rounded-sm bg-custom-sidebar-background-80 p-1 ${
@ -118,17 +131,6 @@ export const WorkspaceSidebarDropdown = () => {
</div> </div>
</Menu.Button> </Menu.Button>
{!sidebarCollapse && (
<Link href={`/${workspaceSlug}/profile/${user?.id}`}>
<a>
<div className="flex flex-grow justify-end">
<Avatar user={user} height="28px" width="28px" fontSize="14px" />
</div>
</a>
</Link>
)}
</div>
<Transition <Transition
as={Fragment} as={Fragment}
enter="transition ease-out duration-100" enter="transition ease-out duration-100"
@ -240,5 +242,55 @@ export const WorkspaceSidebarDropdown = () => {
</Menu.Items> </Menu.Items>
</Transition> </Transition>
</Menu> </Menu>
{!sidebarCollapse && (
<Menu as="div" className="relative flex-shrink-0">
<Menu.Button className="grid place-items-center outline-none">
<Avatar user={user} height="28px" width="28px" fontSize="14px" />
</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 flex-col w-52 origin-top-left rounded-md
border border-custom-sidebar-border-200 bg-custom-sidebar-background-90 p-2 divide-y divide-custom-sidebar-border-200 shadow-lg text-xs outline-none"
>
<div className="flex flex-col space-y-2 pb-2">
{profileLinks(workspaceSlug?.toString() ?? "", user?.id ?? "").map(
(link, index) => (
<Menu.Item key={index} as="button" type="button">
<Link href={link.link}>
<a className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80">
<Icon iconName={link.icon} className="!text-base" />
{link.name}
</a>
</Link>
</Menu.Item>
)
)}
</div>
<div className="pt-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}
>
<Icon iconName="logout" className="!text-base" />
Log out
</Menu.Item>
</div>
</Menu.Items>
</Transition>
</Menu>
)}
</div>
); );
}; };