From 2ad104732389ec37bf6c344a16e874ec8a664055 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Mon, 22 Jul 2024 15:16:23 +0530
Subject: [PATCH] [WEB-1982] chore: sidebar navigation item refactor (#5184)

* chore: sidebar navigation item refactor

* chore: module and cycle sidebar padding adjustment
---
 .../(detail)/[projectId]/settings/sidebar.tsx | 14 ++++++------
 .../(projects)/settings/sidebar.tsx           | 20 ++++++++---------
 web/app/profile/sidebar.tsx                   | 22 ++++++++++---------
 .../cycles/analytics-sidebar/root.tsx         |  7 ++++--
 .../components/cycles/cycle-peek-overview.tsx |  1 +
 .../modules/analytics-sidebar/root.tsx        |  7 ++++--
 .../modules/module-peek-overview.tsx          |  1 +
 7 files changed, 40 insertions(+), 32 deletions(-)

diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/sidebar.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/sidebar.tsx
index af5e5355a..0b9a94f82 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/sidebar.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/sidebar.tsx
@@ -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>
               )
           )}
diff --git a/web/app/[workspaceSlug]/(projects)/settings/sidebar.tsx b/web/app/[workspaceSlug]/(projects)/settings/sidebar.tsx
index 642a89bc4..0dc206f2b 100644
--- a/web/app/[workspaceSlug]/(projects)/settings/sidebar.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/sidebar.tsx
@@ -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>
               )
           )}
diff --git a/web/app/profile/sidebar.tsx b/web/app/profile/sidebar.tsx
index 8d4cebbde..751dee61d 100644
--- a/web/app/profile/sidebar.tsx
+++ b/web/app/profile/sidebar.tsx
@@ -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>
               );
diff --git a/web/core/components/cycles/analytics-sidebar/root.tsx b/web/core/components/cycles/analytics-sidebar/root.tsx
index fe6fab9d2..d4ec768cc 100644
--- a/web/core/components/cycles/analytics-sidebar/root.tsx
+++ b/web/core/components/cycles/analytics-sidebar/root.tsx
@@ -33,6 +33,7 @@ type Props = {
   cycleId: string;
   handleClose: () => void;
   isArchived?: boolean;
+  isPeekMode?: boolean;
 };
 
 const defaultValues: Partial<ICycle> = {
@@ -45,7 +46,7 @@ const cycleService = new CycleService();
 
 // TODO: refactor the whole component
 export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
-  const { cycleId, handleClose, isArchived } = props;
+  const { cycleId, handleClose, isArchived, isPeekMode = false } = props;
   // states
   const [archiveCycleModal, setArchiveCycleModal] = useState(false);
   const [cycleDeleteModal, setCycleDeleteModal] = useState(false);
@@ -260,7 +261,9 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
       )}
 
       <>
-        <div className="sticky z-10 pt-20 top-0 flex items-center justify-between bg-custom-sidebar-background-100 pb-5">
+        <div
+          className={`sticky z-10 top-0 flex items-center justify-between bg-custom-sidebar-background-100 pb-5 ${isPeekMode ? "pt-5" : "pt-20"}`}
+        >
           <div>
             <button
               className="flex h-5 w-5 items-center justify-center rounded-full bg-custom-border-300"
diff --git a/web/core/components/cycles/cycle-peek-overview.tsx b/web/core/components/cycles/cycle-peek-overview.tsx
index 1bcfbcf03..11846d774 100644
--- a/web/core/components/cycles/cycle-peek-overview.tsx
+++ b/web/core/components/cycles/cycle-peek-overview.tsx
@@ -51,6 +51,7 @@ export const CyclePeekOverview: React.FC<Props> = observer(({ projectId, workspa
             cycleId={peekCycle?.toString() ?? ""}
             handleClose={handleClose}
             isArchived={isArchived}
+            isPeekMode
           />
         </div>
       )}
diff --git a/web/core/components/modules/analytics-sidebar/root.tsx b/web/core/components/modules/analytics-sidebar/root.tsx
index 9b78d322e..791148595 100644
--- a/web/core/components/modules/analytics-sidebar/root.tsx
+++ b/web/core/components/modules/analytics-sidebar/root.tsx
@@ -63,11 +63,12 @@ type Props = {
   moduleId: string;
   handleClose: () => void;
   isArchived?: boolean;
+  isPeekMode?: boolean;
 };
 
 // TODO: refactor this component
 export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
-  const { moduleId, handleClose, isArchived } = props;
+  const { moduleId, handleClose, isArchived, isPeekMode = false } = props;
   // states
   const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
   const [archiveModuleModal, setArchiveModuleModal] = useState(false);
@@ -309,7 +310,9 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
       )}
       <DeleteModuleModal isOpen={moduleDeleteModal} onClose={() => setModuleDeleteModal(false)} data={moduleDetails} />
       <>
-        <div className="sticky z-10 pt-20 top-0 flex items-center justify-between bg-custom-sidebar-background-100 pb-5">
+        <div
+          className={`sticky z-10 top-0 flex items-center justify-between bg-custom-sidebar-background-100 pb-5 ${isPeekMode ? "pt-5" : "pt-20"}`}
+        >
           <div>
             <button
               className="flex h-5 w-5 items-center justify-center rounded-full bg-custom-border-300"
diff --git a/web/core/components/modules/module-peek-overview.tsx b/web/core/components/modules/module-peek-overview.tsx
index 02fb85747..a03c8ecd3 100644
--- a/web/core/components/modules/module-peek-overview.tsx
+++ b/web/core/components/modules/module-peek-overview.tsx
@@ -51,6 +51,7 @@ export const ModulePeekOverview: React.FC<Props> = observer(({ projectId, worksp
             moduleId={peekModule?.toString() ?? ""}
             handleClose={handleClose}
             isArchived={isArchived}
+            isPeekMode
           />
         </div>
       )}