shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: switch workspace

Browse Source
This commit is contained in:
Henry
2024-03-16 11:43:49 +00:00
parent 5f05d5ca84
commit aa590078de
4 changed files with 106 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/app/components/SideNavigation.tsx
View File

@@ -8,8 +8,7 @@ import settingsIcon from "~/app/assets/settings.json";
import ReactiveButton from "~/app/components/ReactiveButton";
import UserMenu from "~/app/components/UserMenu";
import { useWorkspace } from "~/app/providers/workspace";
import WorkspaceMenu from "~/app/components/WorkspaceMenu";
interface SideNavigationProps {
user: UserType;
@@ -22,7 +21,6 @@ interface UserType {
export default function SideNavigation({ user }: SideNavigationProps) {
const pathname = usePathname();
const { workspace } = useWorkspace();
const navigation = [
{ name: "Boards", href: "/boards", icon: boardsIcon },
@@ -35,19 +33,10 @@ export default function SideNavigation({ user }: SideNavigationProps) {
];
return (
<nav className="flex w-72 flex-col justify-between border-r border-dark-600 px-5 py-5">
<nav className="flex w-72 flex-col justify-between border-r border-dark-600 px-3 pb-3 pt-5">
<div>
<div className="-mx-2 mb-4 flex items-center rounded-[5px] p-1.5 hover:bg-dark-200">
<span className="inline-flex h-6 w-6 items-center justify-center rounded-[5px] bg-dark-400">
<span className="text-xs font-medium leading-none text-white">
{workspace?.name.charAt(0).toUpperCase()}
</span>
</span>
<span className="ml-2 text-sm font-medium text-dark-1000">
{workspace?.name}
</span>
</div>
<ul role="list" className="-mx-2 my-3 space-y-1">
<WorkspaceMenu />
<ul role="list" className="space-y-1">
{navigation.map((item) => (
<li key={item.name}>
<ReactiveButton

8
src/app/components/UserMenu.tsx
View File

@@ -15,7 +15,7 @@ export default function UserMenu({ imageUrl, email }: UserMenuProps) {
return (
<Menu as="div" className="relative inline-block w-full text-left">
<div>
<Menu.Button className="-mx-2 flex items-center rounded-md p-1.5 text-dark-900 hover:bg-dark-200 hover:text-dark-1000">
<Menu.Button className="flex w-full items-center rounded-md p-1.5 text-dark-900 hover:bg-dark-200 hover:text-dark-1000">
{imageUrl ? (
<Image
src={imageUrl ?? ""}
@@ -48,13 +48,13 @@ export default function UserMenu({ imageUrl, email }: UserMenuProps) {
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="absolute bottom-[50px] right-[-10px] z-10 mt-2 w-[225px] origin-bottom-right rounded-md border border-dark-400 bg-dark-300 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<div className="flex">
<Menu.Items className="absolute bottom-[40px] left-0 z-10 mt-2 w-full origin-top-left rounded-md border border-dark-500 bg-dark-300 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<div className="flex w-full">
<Menu.Item>
{() => (
<button
onClick={() => signOut({ callbackUrl: "/boards" })}
className="m-1 flex w-full items-center rounded-[5px] px-3 py-2 text-left text-sm text-dark-1000 hover:bg-dark-400"
className="m-1 flex w-full items-center rounded-[5px] px-3 py-2 text-left text-xs text-dark-1000 hover:bg-dark-400"
>
<HiOutlineLogout size={18} className="mr-2" />
Logout

59
src/app/components/WorkspaceMenu.tsx Normal file
View File

@@ -0,0 +1,59 @@
"use client";
import { Fragment } from "react";
import { Menu, Transition } from "@headlessui/react";
import { useWorkspace } from "~/app/providers/workspace";
export default function UserMenu() {
const { workspace, availableWorkspaces, switchWorkspace } = useWorkspace();
return (
<Menu as="div" className="relative inline-block w-full pb-3 text-left">
<div>
<Menu.Button className="mb-1 flex w-full items-center rounded-[5px] p-1.5 hover:bg-dark-200">
<span className="inline-flex h-6 w-6 items-center justify-center rounded-[5px] bg-indigo-700">
<span className="text-xs font-bold leading-none text-white">
{workspace?.name.charAt(0).toUpperCase()}
</span>
</span>
<span className="ml-2 text-sm font-bold text-dark-1000">
{workspace?.name}
</span>
</Menu.Button>
</div>
<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-10 w-full origin-top-left rounded-md border border-dark-500 bg-dark-300 p-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
{availableWorkspaces.map((availableWorkspace) => (
<div key={availableWorkspace.publicId} className="flex">
<Menu.Item>
<button
onClick={() => switchWorkspace(availableWorkspace)}
className="flex w-full items-center rounded-[5px] px-3 py-2 text-left text-sm text-dark-1000 hover:bg-dark-400"
>
<span className="inline-flex h-5 w-5 items-center justify-center rounded-[5px] bg-indigo-700">
<span className="text-xs font-medium leading-none text-white">
{availableWorkspace?.name.charAt(0).toUpperCase()}
</span>
</span>
<span className="ml-2 text-xs font-medium text-dark-1000">
{availableWorkspace?.name}
</span>
</button>
</Menu.Item>
</div>
))}
</Menu.Items>
</Transition>
</Menu>
);
}