2024-01-23 12:19:22 +00:00
|
|
|
import { FC, ReactNode } from "react";
|
|
|
|
// layout
|
2024-02-08 12:19:26 +00:00
|
|
|
import Link from "next/link";
|
|
|
|
import { useRouter } from "next/router";
|
2024-03-06 13:09:14 +00:00
|
|
|
import { ChevronDown } from "lucide-react";
|
|
|
|
import { CustomMenu } from "@plane/ui";
|
2024-03-19 14:38:35 +00:00
|
|
|
import { SidebarHamburgerToggle } from "@/components/core/sidebar/sidebar-menu-hamburger-toggle";
|
|
|
|
import { useApplication } from "@/hooks/store";
|
|
|
|
import { ProfileSettingsLayout } from "@/layouts/settings-layout";
|
2024-03-06 13:09:14 +00:00
|
|
|
import { ProfilePreferenceSettingsSidebar } from "./sidebar";
|
2024-01-23 12:19:22 +00:00
|
|
|
|
|
|
|
interface IProfilePreferenceSettingsLayout {
|
|
|
|
children: ReactNode;
|
|
|
|
header?: ReactNode;
|
|
|
|
}
|
|
|
|
|
|
|
|
export const ProfilePreferenceSettingsLayout: FC<IProfilePreferenceSettingsLayout> = (props) => {
|
|
|
|
const { children, header } = props;
|
2024-02-08 12:19:26 +00:00
|
|
|
const router = useRouter();
|
2024-02-14 09:25:33 +00:00
|
|
|
const { theme: themeStore } = useApplication();
|
2024-02-08 12:19:26 +00:00
|
|
|
|
|
|
|
const showMenuItem = () => {
|
2024-02-16 14:37:04 +00:00
|
|
|
const item = router.asPath.split("/");
|
2024-02-08 12:19:26 +00:00
|
|
|
let splittedItem = item[item.length - 1];
|
|
|
|
splittedItem = splittedItem.replace(splittedItem[0], splittedItem[0].toUpperCase());
|
|
|
|
return splittedItem;
|
2024-02-16 14:37:04 +00:00
|
|
|
};
|
2024-02-08 12:19:26 +00:00
|
|
|
|
|
|
|
const profilePreferenceLinks: Array<{
|
|
|
|
label: string;
|
|
|
|
href: string;
|
|
|
|
}> = [
|
2024-02-16 14:37:04 +00:00
|
|
|
{
|
|
|
|
label: "Theme",
|
|
|
|
href: `/profile/preferences/theme`,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: "Email",
|
|
|
|
href: `/profile/preferences/email`,
|
|
|
|
},
|
|
|
|
];
|
2024-01-23 12:19:22 +00:00
|
|
|
|
|
|
|
return (
|
2024-02-16 14:37:04 +00:00
|
|
|
<ProfileSettingsLayout
|
|
|
|
header={
|
|
|
|
<div className="md:hidden flex flex-shrink-0 gap-4 items-center justify-start border-b border-custom-border-200 p-4">
|
|
|
|
<SidebarHamburgerToggle onClick={() => themeStore.toggleSidebar()} />
|
|
|
|
<CustomMenu
|
|
|
|
maxHeight={"md"}
|
|
|
|
className="flex flex-grow justify-center text-custom-text-200 text-sm"
|
|
|
|
placement="bottom-start"
|
|
|
|
customButton={
|
|
|
|
<div className="flex gap-2 items-center px-2 py-1.5 border rounded-md border-custom-border-400">
|
|
|
|
<span className="flex flex-grow justify-center text-custom-text-200 text-sm">{showMenuItem()}</span>
|
|
|
|
<ChevronDown className="w-4 h-4 text-custom-text-400" />
|
|
|
|
</div>
|
|
|
|
}
|
|
|
|
customButtonClassName="flex flex-grow justify-start text-custom-text-200 text-sm"
|
|
|
|
>
|
|
|
|
<></>
|
|
|
|
{profilePreferenceLinks.map((link) => (
|
|
|
|
<CustomMenu.MenuItem className="flex items-center gap-2">
|
|
|
|
<Link key={link.href} href={link.href} className="text-custom-text-300 w-full">
|
|
|
|
{link.label}
|
|
|
|
</Link>
|
|
|
|
</CustomMenu.MenuItem>
|
|
|
|
))}
|
|
|
|
</CustomMenu>
|
|
|
|
</div>
|
|
|
|
}
|
|
|
|
>
|
2024-01-23 12:19:22 +00:00
|
|
|
<div className="relative flex h-screen w-full overflow-hidden">
|
|
|
|
<ProfilePreferenceSettingsSidebar />
|
|
|
|
<main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
|
|
|
|
{header}
|
2024-03-11 15:39:41 +00:00
|
|
|
<div className="h-full w-full overflow-hidden">{children}</div>
|
2024-01-23 12:19:22 +00:00
|
|
|
</main>
|
|
|
|
</div>
|
|
|
|
</ProfileSettingsLayout>
|
|
|
|
);
|
|
|
|
};
|