binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: move all sidebar links to constant file. (#3414)

Browse source 
* chore: move all workspace, project and profile links constants into their own constants file.

* chore: sidebar menu links improvement.
This commit is contained in:
Prateek Shourya 2024-01-19 16:05:52 +05:30 • committed by sriram veeraghanta
parent 06a7bdffd7
commit 7f5028a4f6
9 changed files with 296 additions and 184 deletions
Download patch file Download diff file Expand all files Collapse all files

33
web/layouts/settings-layout/profile/sidebar.tsx
View file

@ -4,39 +4,14 @@ import Link from "next/link";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { useTheme } from "next-themes";
import { Activity, ChevronLeft, CircleUser, KeyRound, LogOut, MoveLeft, Plus, Settings2, UserPlus } from "lucide-react";
import { ChevronLeft, LogOut, MoveLeft, Plus, UserPlus } from "lucide-react";
// hooks
import { useApplication, useUser, useWorkspace } from "hooks/store";
import useToast from "hooks/use-toast";
// ui
import { Tooltip } from "@plane/ui";
const PROFILE_ACTION_LINKS = [
{
key: "profile",
label: "Profile",
href: `/profile`,
Icon: CircleUser,
},
{
key: "change-password",
label: "Change password",
href: `/profile/change-password`,
Icon: KeyRound,
},
{
key: "activity",
label: "Activity",
href: `/profile/activity`,
Icon: Activity,
},
{
key: "preferences",
label: "Preferences",
href: `/profile/preferences`,
Icon: Settings2,
},
];
// constants
import { PROFILE_ACTION_LINKS } from "constants/profile";
const WORKSPACE_ACTION_LINKS = [
{
@ -130,7 +105,7 @@ export const ProfileLayoutSidebar = observer(() => {
<Tooltip tooltipContent={link.label} position="right" className="ml-2" disabled={!sidebarCollapsed}>
<div
className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
router.pathname === link.href
link.highlight(router.pathname)
? "bg-custom-primary-100/10 text-custom-primary-100"
: "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
} ${sidebarCollapsed ? "justify-center" : ""}`}

76
web/layouts/settings-layout/project/sidebar.tsx
View file

@ -1,66 +1,42 @@
import React from "react";
import { useRouter } from "next/router";
import Link from "next/link";
// hooks
import { useUser } from "hooks/store";
// constants
import { EUserProjectRoles, PROJECT_SETTINGS_LINKS } from "constants/project";
export const ProjectSettingsSidebar = () => {
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
// mobx store
const {
membership: { currentProjectRole },
} = useUser();
const projectMemberInfo = currentProjectRole || EUserProjectRoles.GUEST;
const projectLinks: Array<{
label: string;
href: string;
}> = [
{
label: "General",
href: `/${workspaceSlug}/projects/${projectId}/settings`,
},
{
label: "Members",
href: `/${workspaceSlug}/projects/${projectId}/settings/members`,
},
{
label: "Features",
href: `/${workspaceSlug}/projects/${projectId}/settings/features`,
},
{
label: "States",
href: `/${workspaceSlug}/projects/${projectId}/settings/states`,
},
{
label: "Labels",
href: `/${workspaceSlug}/projects/${projectId}/settings/labels`,
},
{
label: "Integrations",
href: `/${workspaceSlug}/projects/${projectId}/settings/integrations`,
},
{
label: "Estimates",
href: `/${workspaceSlug}/projects/${projectId}/settings/estimates`,
},
{
label: "Automations",
href: `/${workspaceSlug}/projects/${projectId}/settings/automations`,
},
];
return (
<div className="flex w-80 flex-col gap-6 px-5">
<div className="flex flex-col gap-2">
<span className="text-xs font-semibold text-custom-sidebar-text-400">SETTINGS</span>
<div className="flex w-full flex-col gap-1">
{projectLinks.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>
))}
{PROJECT_SETTINGS_LINKS.map(
(link) =>
projectMemberInfo >= link.access && (
<Link key={link.key} href={`/${workspaceSlug}/projects/${projectId}${link.href}`}>
<div
className={`rounded-md px-4 py-2 text-sm font-medium ${
link.highlight(router.asPath, `/${workspaceSlug}/projects/${projectId}`)
? "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>

4
web/layouts/settings-layout/workspace/sidebar.tsx
View file

@ -25,11 +25,11 @@ export const WorkspaceSettingsSidebar = () => {
{WORKSPACE_SETTINGS_LINKS.map(
(link) =>
workspaceMemberInfo >= link.access && (
<Link key={link.href} href={`/${workspaceSlug}${link.href}`}>
<Link key={link.key} href={`/${workspaceSlug}${link.href}`}>
<span>
<div
className={`rounded-md px-4 py-2 text-sm font-medium ${
router.pathname.split("/")?.[3] === link.href.split("/")?.[2]
link.highlight(router.asPath, `/${workspaceSlug}`)
? "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"
}`}