github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2025-08-07 19:59:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

[WEB-1982] chore: sidebar navigation item refactor (#5184)

Browse Source 
* chore: sidebar navigation item refactor

* chore: module and cycle sidebar padding adjustment
This commit is contained in:
Anmol Singh Bhatia
2024-07-22 15:16:23 +05:30
committed by GitHub
parent 1956da2b90
commit 2ad1047323
7 changed files with 40 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/sidebar.tsx
View File

@@ -5,6 +5,8 @@ import Link from "next/link";
import { useParams, usePathname } from "next/navigation";
// ui
import { Loader } from "@plane/ui";
// components
import { SidebarNavItem } from "@/components/sidebar";
// constants
import { EUserProjectRoles, PROJECT_SETTINGS_LINKS } from "@/constants/project";
// hooks
@@ -44,15 +46,13 @@ export const ProjectSettingsSidebar = () => {
(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(pathname, `/${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"
}`}
<SidebarNavItem
key={link.key}
isActive={link.highlight(pathname, `/${workspaceSlug}/projects/${projectId}`)}
className="text-sm font-medium px-4 py-2"
>
{link.label}
</div>
</SidebarNavItem>
</Link>
)
)}

20
web/app/[workspaceSlug]/(projects)/settings/sidebar.tsx
View File

@@ -4,6 +4,8 @@ import React from "react";
import { observer } from "mobx-react";
import Link from "next/link";
import { useParams, usePathname } from "next/navigation";
// components
import { SidebarNavItem } from "@/components/sidebar";
// constants
import { EUserWorkspaceRoles } from "@/constants/workspace";
// hooks
@@ -31,17 +33,13 @@ export const WorkspaceSettingsSidebar = observer(() => {
(link) =>
workspaceMemberInfo >= link.access && (
<Link key={link.key} href={`/${workspaceSlug}${link.href}`}>
<span>
<div
className={`rounded-md px-4 py-2 text-sm font-medium ${
link.highlight(pathname, `/${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"
}`}
>
{link.label}
</div>
</span>
<SidebarNavItem
key={link.key}
isActive={link.highlight(pathname, `/${workspaceSlug}`)}
className="text-sm font-medium px-4 py-2"
>
{link.label}
</SidebarNavItem>
</Link>
)
)}

22
web/app/profile/sidebar.tsx
View File

@@ -8,6 +8,8 @@ import { usePathname } from "next/navigation";
import { ChevronLeft, LogOut, MoveLeft, Plus, UserPlus } from "lucide-react";
// ui
import { TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
// components
import { SidebarNavItem } from "@/components/sidebar";
// constants
import { PROFILE_ACTION_LINKS } from "@/constants/profile";
// hooks
@@ -119,7 +121,7 @@ export const ProfileLayoutSidebar = observer(() => {
{!sidebarCollapsed && (
<h6 className="rounded px-1.5 text-sm font-semibold text-custom-sidebar-text-400">Your account</h6>
)}
<div className="vertical-scrollbar scrollbar-sm mt-2 h-full space-y-1.5 overflow-y-auto">
<div className="vertical-scrollbar scrollbar-sm mt-2 h-full space-y-1 overflow-y-auto">
{PROFILE_ACTION_LINKS.map((link) => {
if (link.key === "change-password" && currentUser?.is_password_autoset) return null;
@@ -132,16 +134,16 @@ export const ProfileLayoutSidebar = observer(() => {
disabled={!sidebarCollapsed}
isMobile={isMobile}
>
<div
className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
link.highlight(pathname)
? "bg-custom-primary-100/10 text-custom-primary-100"
: "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
} ${sidebarCollapsed ? "justify-center" : ""}`}
<SidebarNavItem
key={link.key}
className={`${sidebarCollapsed ? "p-0 size-8 aspect-square justify-center mx-auto" : ""}`}
isActive={link.highlight(pathname)}
>
{<link.Icon className="h-4 w-4" />}
{!sidebarCollapsed && link.label}
</div>
<div className="flex items-center gap-1.5 py-[1px]">
<link.Icon className="size-4" />
{!sidebarCollapsed && <p className="text-sm leading-5 font-medium">{link.label}</p>}
</div>
</SidebarNavItem>
</Tooltip>
</Link>
);