[WEB-4328] feat: sidebar revamp

apps/web/app/(all)/[workspaceSlug]/(projects)/_sidebar.tsx

@@ -0,0 +1,63 @@
+"use client";
+import { FC, useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { SIDEBAR_WIDTH } from "@plane/constants";
+import { useLocalStorage } from "@plane/hooks";
+// hooks
+import { ResizableSidebar } from "@/components/sidebar";
+import { useAppTheme } from "@/hooks/store";
+import { useAppRail } from "@/hooks/use-app-rail";
+// local imports
+import { ExtendedAppSidebar } from "./extended-sidebar";
+import { AppSidebar } from "./sidebar";
+
+export const ProjectAppSidebar: FC = observer(() => {
+  // store hooks
+  const {
+    sidebarCollapsed,
+    toggleSidebar,
+    sidebarPeek,
+    toggleSidebarPeek,
+    isExtendedSidebarOpened,
+    isAnySidebarDropdownOpen,
+  } = useAppTheme();
+  const { storedValue, setValue } = useLocalStorage("sidebarWidth", SIDEBAR_WIDTH);
+  // states
+  const [sidebarWidth, setSidebarWidth] = useState<number>(storedValue ?? SIDEBAR_WIDTH);
+  // hooks
+  const { shouldRenderAppRail } = useAppRail();
+  // derived values
+  const isAnyExtendedSidebarOpen = isExtendedSidebarOpened;
+
+  // handlers
+  const handleWidthChange = (width: number) => setValue(width);
+
+  return (
+    <>
+      <ResizableSidebar
+        showPeek={sidebarPeek}
+        defaultWidth={storedValue ?? 250}
+        width={sidebarWidth}
+        setWidth={setSidebarWidth}
+        defaultCollapsed={sidebarCollapsed}
+        peekDuration={1500}
+        onWidthChange={handleWidthChange}
+        onCollapsedChange={toggleSidebar}
+        isCollapsed={sidebarCollapsed}
+        toggleCollapsed={toggleSidebar}
+        togglePeek={toggleSidebarPeek}
+        extendedSidebar={
+          <>
+            <ExtendedAppSidebar />
+          </>
+        }
+        isAnyExtendedSidebarExpanded={isAnyExtendedSidebarOpen}
+        isAnySidebarDropdownOpen={isAnySidebarDropdownOpen}
+        disablePeekTrigger={shouldRenderAppRail}
+      >
+        <AppSidebar />
+      </ResizableSidebar>
+    </>
+  );
+});

apps/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx

@@ -8,14 +8,14 @@ import { Plus, Search } from "lucide-react";
 import { EUserPermissions, EUserPermissionsLevel, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { setToast, TOAST_TYPE, Tooltip } from "@plane/ui";
-import { cn, copyUrlToClipboard, orderJoinedProjects } from "@plane/utils";
+import { copyUrlToClipboard, orderJoinedProjects } from "@plane/utils";
 // components
 import { CreateProjectModal } from "@/components/project";
 import { SidebarProjectsListItem } from "@/components/workspace";
 // hooks
 import { useAppTheme, useProject, useUserPermissions } from "@/hooks/store";
-import useExtendedSidebarOutsideClickDetector from "@/hooks/use-extended-sidebar-overview-outside-click";
 import { TProject } from "@/plane-web/types";
+import { ExtendedSidebarWrapper } from "./extended-sidebar-wrapper";
 
 export const ExtendedProjectSidebar = observer(() => {
   // refs
@@ -27,7 +27,7 @@ export const ExtendedProjectSidebar = observer(() => {
   const { workspaceSlug } = useParams();
   // store hooks
   const { t } = useTranslation();
-  const { sidebarCollapsed, extendedProjectSidebarCollapsed, toggleExtendedProjectSidebar } = useAppTheme();
+  const { isExtendedProjectSidebarOpened, toggleExtendedProjectSidebar } = useAppTheme();
   const { getPartialProjectById, joinedProjectIds: joinedProjects, updateProjectView } = useProject();
   const { allowPermissions } = useUserPermissions();
 
@@ -74,15 +74,7 @@ export const ExtendedProjectSidebar = observer(() => {
     EUserPermissionsLevel.WORKSPACE
   );
 
-  useExtendedSidebarOutsideClickDetector(
-    extendedProjectSidebarRef,
-    () => {
-      if (!isProjectModalOpen) {
-        toggleExtendedProjectSidebar(false);
-      }
-    },
-    "extended-project-sidebar-toggle"
-  );
+  const handleClose = () => toggleExtendedProjectSidebar(false);
 
   const handleCopyText = (projectId: string) => {
     copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/issues`).then(() => {
@@ -103,17 +95,11 @@ export const ExtendedProjectSidebar = observer(() => {
           workspaceSlug={workspaceSlug.toString()}
         />
       )}
-      <div
-        ref={extendedProjectSidebarRef}
-        className={cn(
-          "absolute top-0 h-full z-[19] flex flex-col gap-2 w-[300px] transform transition-all duration-300 ease-in-out bg-custom-sidebar-background-100 border-r border-custom-sidebar-border-200 shadow-md",
-          {
-            "translate-x-0 opacity-100 pointer-events-auto": extendedProjectSidebarCollapsed,
-            "-translate-x-full opacity-0 pointer-events-none": !extendedProjectSidebarCollapsed,
-            "left-[70px]": sidebarCollapsed,
-            "left-[250px]": !sidebarCollapsed,
-          }
-        )}
+      <ExtendedSidebarWrapper
+        isExtendedSidebarOpened={!!isExtendedProjectSidebarOpened}
+        extendedSidebarRef={extendedProjectSidebarRef}
+        handleClose={handleClose}
+        excludedElementId="extended-project-sidebar-toggle"
       >
         <div className="flex flex-col gap-1 w-full sticky top-4 pt-0 px-4">
           <div className="flex items-center justify-between">
@@ -159,7 +145,7 @@ export const ExtendedProjectSidebar = observer(() => {
             />
           ))}
         </div>
-      </div>
+      </ExtendedSidebarWrapper>
     </>
   );
 });

apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import React, { FC } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { EXTENDED_SIDEBAR_WIDTH, SIDEBAR_WIDTH } from "@plane/constants";
+import { useLocalStorage } from "@plane/hooks";
+import { cn } from "@plane/utils";
+// hooks
+import useExtendedSidebarOutsideClickDetector from "@/hooks/use-extended-sidebar-overview-outside-click";
+
+type Props = {
+  children: React.ReactNode;
+  extendedSidebarRef: React.RefObject<HTMLDivElement>;
+  isExtendedSidebarOpened: boolean;
+  handleClose: () => void;
+  excludedElementId: string;
+};
+
+export const ExtendedSidebarWrapper: FC<Props> = observer((props) => {
+  const { children, extendedSidebarRef, isExtendedSidebarOpened, handleClose, excludedElementId } = props;
+  // store hooks
+  const { storedValue } = useLocalStorage("sidebarWidth", SIDEBAR_WIDTH);
+
+  useExtendedSidebarOutsideClickDetector(extendedSidebarRef, handleClose, excludedElementId);
+
+  return (
+    <div
+      id={excludedElementId}
+      ref={extendedSidebarRef}
+      className={cn(
+        `absolute h-full z-[19] flex flex-col py-2 transform transition-all duration-300 ease-in-out bg-custom-background-100 border-r border-custom-sidebar-border-200 p-4 shadow-sm`,
+        {
+          "translate-x-0 opacity-100": isExtendedSidebarOpened,
+          [`-translate-x-[${EXTENDED_SIDEBAR_WIDTH}px] opacity-0 hidden`]: !isExtendedSidebarOpened,
+        }
+      )}
+      style={{
+        left: `${storedValue ?? SIDEBAR_WIDTH}px`,
+        width: `${isExtendedSidebarOpened ? EXTENDED_SIDEBAR_WIDTH : 0}px`,
+      }}
+    >
+      {children}
+    </div>
+  );
+});

apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar.tsx

@@ -6,20 +6,19 @@ import { useParams } from "next/navigation";
 // plane imports
 import { WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS_LINKS } from "@plane/constants";
 import { EUserWorkspaceRoles } from "@plane/types";
-import { cn } from "@plane/utils";
 // hooks
 import { useAppTheme, useWorkspace } from "@/hooks/store";
-import useExtendedSidebarOutsideClickDetector from "@/hooks/use-extended-sidebar-overview-outside-click";
 // plane-web imports
 import { ExtendedSidebarItem } from "@/plane-web/components/workspace/sidebar";
+import { ExtendedSidebarWrapper } from "./extended-sidebar-wrapper";
 
 export const ExtendedAppSidebar = observer(() => {
   // refs
   const extendedSidebarRef = useRef<HTMLDivElement | null>(null);
   // routers
   const { workspaceSlug } = useParams();
   // store hooks
-  const { sidebarCollapsed, extendedSidebarCollapsed, toggleExtendedSidebar } = useAppTheme();
+  const { isExtendedSidebarOpened, toggleExtendedSidebar } = useAppTheme();
   const { updateSidebarPreference, getNavigationPreferences } = useWorkspace();
 
   // derived values
@@ -95,24 +94,14 @@ export const ExtendedAppSidebar = observer(() => {
       });
   };
 
-  useExtendedSidebarOutsideClickDetector(
-    extendedSidebarRef,
-    () => toggleExtendedSidebar(true),
-    "extended-sidebar-toggle"
-  );
+  const handleClose = () => toggleExtendedSidebar(false);
 
   return (
-    <div
-      ref={extendedSidebarRef}
-      className={cn(
-        "absolute top-0 h-full z-[19] flex flex-col gap-0.5 w-[300px] transform transition-all duration-300 ease-in-out bg-custom-sidebar-background-100 border-r border-custom-sidebar-border-200 p-4 shadow-md pb-6",
-        {
-          "-translate-x-full opacity-0 pointer-events-none": extendedSidebarCollapsed,
-          "translate-x-0 opacity-100 pointer-events-auto": !extendedSidebarCollapsed,
-          "left-[70px]": sidebarCollapsed,
-          "left-[250px]": !sidebarCollapsed,
-        }
-      )}
+    <ExtendedSidebarWrapper
+      isExtendedSidebarOpened={!!isExtendedSidebarOpened}
+      extendedSidebarRef={extendedSidebarRef}
+      handleClose={handleClose}
+      excludedElementId="extended-sidebar-toggle"
     >
       {sortedNavigationItems.map((item, index) => (
         <ExtendedSidebarItem
@@ -122,6 +111,6 @@ export const ExtendedAppSidebar = observer(() => {
           handleOnNavigationItemDrop={handleOnNavigationItemDrop}
         />
       ))}
-    </div>
+    </ExtendedSidebarWrapper>
   );
 });

apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { observer } from "mobx-react";
 import Image from "next/image";
 import { useTheme } from "next-themes";
 import { Home } from "lucide-react";
@@ -16,16 +17,17 @@ import { BreadcrumbLink } from "@/components/common";
 // hooks
 import { captureElementAndEvent } from "@/helpers/event-tracker.helper";
 
-export const WorkspaceDashboardHeader = () => {
+export const WorkspaceDashboardHeader = observer(() => {
   // hooks
   const { resolvedTheme } = useTheme();
+
   const { t } = useTranslation();
 
   return (
     <>
       <Header>
         <Header.LeftItem>
-          <div>
+          <div className="flex items-center gap-2">
             <Breadcrumbs>
               <Breadcrumbs.Item
                 component={
@@ -65,4 +67,4 @@ export const WorkspaceDashboardHeader = () => {
       </Header>
     </>
   );
-};
+});

apps/web/app/(all)/[workspaceSlug]/(projects)/layout.tsx

@@ -2,20 +2,21 @@
 
 import { CommandPalette } from "@/components/command-palette";
 import { AuthenticationWrapper } from "@/lib/wrappers";
-// plane web components
 import { WorkspaceAuthWrapper } from "@/plane-web/layouts/workspace-wrapper";
-import { AppSidebar } from "./sidebar";
+import { ProjectAppSidebar } from "./_sidebar";
 
 export default function WorkspaceLayout({ children }: { children: React.ReactNode }) {
   return (
     <AuthenticationWrapper>
       <CommandPalette />
       <WorkspaceAuthWrapper>
-        <div className="relative flex h-screen w-full overflow-hidden">
-          <AppSidebar />
-          <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
-            {children}
-          </main>
+        <div className="relative flex flex-col h-full w-full overflow-hidden rounded-lg border border-custom-border-200">
+          <div className="relative flex size-full overflow-hidden">
+            <ProjectAppSidebar />
+            <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
+              {children}
+            </main>
+          </div>
         </div>
       </WorkspaceAuthWrapper>
     </AuthenticationWrapper>