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

* chore: sidebar navigation item refactor

* chore: module and cycle sidebar padding adjustment

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>
               )
           )}

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>
               )
           )}

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>
               );

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"

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>
       )}

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"

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>
       )}