mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
55afef204d
* style: responsive profile * style: profile header drop down, sidebar auto show hide depending on the screen width * fix: item tap on white space in the drop down menu in profile header * fix: profile layout breaking on big screens in page visit
43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import React from "react";
|
|
import { useRouter } from "next/router";
|
|
import Link from "next/link";
|
|
|
|
export const ProfilePreferenceSettingsSidebar = () => {
|
|
const router = useRouter();
|
|
|
|
const profilePreferenceLinks: Array<{
|
|
label: string;
|
|
href: string;
|
|
}> = [
|
|
{
|
|
label: "Theme",
|
|
href: `/profile/preferences/theme`,
|
|
},
|
|
{
|
|
label: "Email",
|
|
href: `/profile/preferences/email`,
|
|
},
|
|
];
|
|
return (
|
|
<div className="hidden md:flex w-96 flex-col gap-6 px-8 py-12">
|
|
<div className="flex flex-col gap-4">
|
|
<span className="text-xs font-semibold text-custom-text-400">Preference</span>
|
|
<div className="flex w-full flex-col gap-2">
|
|
{profilePreferenceLinks.map((link) => (
|
|
<Link key={link.href} href={link.href}>
|
|
<div
|
|
className={`rounded-md px-4 py-2 text-sm font-medium ${(link.label === "Import" ? router.asPath.includes(link.href) : router.asPath === link.href)
|
|
? "bg-custom-primary-100/10 text-custom-primary-100"
|
|
: "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
|
|
}`}
|
|
>
|
|
{link.label}
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|