From ff89d2201a92cc671cdbaf0a9f2f4d2f9e2450fd Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Thu, 12 Jun 2025 17:59:06 +0530
Subject: [PATCH 01/47] chore: sidebar peek state added to theme store

---
 web/core/store/theme.store.ts | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/web/core/store/theme.store.ts b/web/core/store/theme.store.ts
index b37fb0ef5f3..331c3ea322d 100644
--- a/web/core/store/theme.store.ts
+++ b/web/core/store/theme.store.ts
@@ -3,6 +3,7 @@ import { action, observable, makeObservable, runInAction } from "mobx";
 export interface IThemeStore {
   // observables
   sidebarCollapsed: boolean | undefined;
+  sidebarPeek: boolean | undefined;
   extendedSidebarCollapsed: boolean | undefined;
   extendedProjectSidebarCollapsed: boolean | undefined;
   profileSidebarCollapsed: boolean | undefined;
@@ -13,6 +14,7 @@ export interface IThemeStore {
   projectOverviewSidebarCollapsed: boolean | undefined;
   // actions
   toggleSidebar: (collapsed?: boolean) => void;
+  toggleSidebarPeek: (peek?: boolean) => void;
   toggleExtendedSidebar: (collapsed?: boolean) => void;
   toggleExtendedProjectSidebar: (collapsed?: boolean) => void;
   toggleProfileSidebar: (collapsed?: boolean) => void;
@@ -26,7 +28,8 @@ export interface IThemeStore {
 export class ThemeStore implements IThemeStore {
   // observables
   sidebarCollapsed: boolean | undefined = undefined;
-  extendedSidebarCollapsed: boolean | undefined = true;
+  sidebarPeek: boolean | undefined = undefined;
+  extendedSidebarCollapsed: boolean | undefined = undefined;
   extendedProjectSidebarCollapsed: boolean | undefined = undefined;
   profileSidebarCollapsed: boolean | undefined = undefined;
   workspaceAnalyticsSidebarCollapsed: boolean | undefined = undefined;
@@ -39,6 +42,7 @@ export class ThemeStore implements IThemeStore {
     makeObservable(this, {
       // observable
       sidebarCollapsed: observable.ref,
+      sidebarPeek: observable.ref,
       extendedSidebarCollapsed: observable.ref,
       extendedProjectSidebarCollapsed: observable.ref,
       profileSidebarCollapsed: observable.ref,
@@ -49,6 +53,7 @@ export class ThemeStore implements IThemeStore {
       projectOverviewSidebarCollapsed: observable.ref,
       // action
       toggleSidebar: action,
+      toggleSidebarPeek: action,
       toggleExtendedSidebar: action,
       toggleExtendedProjectSidebar: action,
       toggleProfileSidebar: action,
@@ -73,6 +78,18 @@ export class ThemeStore implements IThemeStore {
     localStorage.setItem("app_sidebar_collapsed", this.sidebarCollapsed.toString());
   };
 
+  /**
+   * Toggle the sidebar peek state
+   * @param peek
+   */
+  toggleSidebarPeek = (peek?: boolean) => {
+    if (peek === undefined) {
+      this.sidebarPeek = !this.sidebarPeek;
+    } else {
+      this.sidebarPeek = peek;
+    }
+  };
+
   /**
    * Toggle the extended sidebar collapsed state
    * @param collapsed

From 1fa543050fa5b787f921994aec0736032003cee5 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Mon, 16 Jun 2025 15:29:42 +0530
Subject: [PATCH 02/47] chore: extended sidebar wrapper added

---
 .../(projects)/extended-sidebar-wrapper.tsx   | 50 +++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx

diff --git a/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx b/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx
new file mode 100644
index 00000000000..dba9fb2ed17
--- /dev/null
+++ b/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import React, { FC } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { useLocalStorage } from "@plane/hooks";
+import { cn } from "@plane/utils";
+// hooks
+import { useAppTheme } from "@/hooks/store";
+import useExtendedSidebarOutsideClickDetector from "@/hooks/use-extended-sidebar-overview-outside-click";
+
+type Props = {
+  children: React.ReactNode;
+  extendedSidebarRef: React.RefObject<HTMLDivElement>;
+  extendedSidebarCollapsed: boolean;
+  handleClose: () => void;
+  excludedElementId: string;
+};
+
+export const ExtendedSidebarWrapper: FC<Props> = observer((props) => {
+  const { children, extendedSidebarRef, extendedSidebarCollapsed, handleClose, excludedElementId } = props;
+  // store hooks
+  const { sidebarPeek } = useAppTheme();
+  const { storedValue } = useLocalStorage("sidebarWidth", 250);
+
+  useExtendedSidebarOutsideClickDetector(extendedSidebarRef, handleClose, excludedElementId);
+
+  return (
+    <div
+      id={excludedElementId}
+      ref={extendedSidebarRef}
+      className={cn(
+        `fixed top-0 h-full z-[19] flex flex-col w-[300px]  transform transition-all duration-300 ease-in-out bg-custom-background-100 border-r border-custom-sidebar-border-200 p-4 shadow-md`,
+        {
+          "translate-x-0 opacity-100": extendedSidebarCollapsed,
+          "-translate-x-[600px] opacity-0": !extendedSidebarCollapsed,
+          "border border-l-none shadow-lg rounded-tr-md rounded-br-md": sidebarPeek,
+        }
+      )}
+      style={{
+        top: sidebarPeek ? "3rem" : "0",
+        bottom: sidebarPeek ? "3rem" : "0",
+        left: `${storedValue}px`,
+        height: sidebarPeek ? "calc(100% - 6rem)" : "100%",
+      }}
+    >
+      {children}
+    </div>
+  );
+});

From bbab8f3c514c26089e2158762e4dd937f12544d7 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Mon, 16 Jun 2025 15:30:35 +0530
Subject: [PATCH 03/47] chore: resizeable sidebar component added

---
 .../(projects)/resizeable-sidebar.tsx         | 294 ++++++++++++++++++
 1 file changed, 294 insertions(+)
 create mode 100644 web/app/(all)/[workspaceSlug]/(projects)/resizeable-sidebar.tsx

diff --git a/web/app/(all)/[workspaceSlug]/(projects)/resizeable-sidebar.tsx b/web/app/(all)/[workspaceSlug]/(projects)/resizeable-sidebar.tsx
new file mode 100644
index 00000000000..e6a998a3d63
--- /dev/null
+++ b/web/app/(all)/[workspaceSlug]/(projects)/resizeable-sidebar.tsx
@@ -0,0 +1,294 @@
+"use client";
+
+import React, { Dispatch, ReactElement, SetStateAction, useCallback, useEffect, useState, useRef } from "react";
+// helpers
+import { cn } from "@/helpers/common.helper";
+
+interface ResizableSidebarProps {
+  showPeek?: boolean;
+  togglePeek: (value?: boolean) => void;
+  isCollapsed?: boolean;
+  width: number;
+  setWidth: Dispatch<SetStateAction<number>>;
+  defaultWidth?: number;
+  minWidth?: number;
+  maxWidth?: number;
+  defaultCollapsed?: boolean;
+  peekDuration?: number;
+  toggleCollapsed: (value?: boolean) => void;
+  onWidthChange?: (width: number) => void;
+  onCollapsedChange?: (collapsed: boolean) => void;
+  className?: string;
+  children?: ReactElement;
+  extendedSidebar?: ReactElement;
+  isAnyExtendedSidebarExpanded?: boolean;
+}
+
+export function ResizableSidebar({
+  showPeek = false,
+  togglePeek,
+  peekDuration = 1000,
+  isCollapsed = false,
+  toggleCollapsed: toggleCollapsedProp,
+  onCollapsedChange,
+  width,
+  setWidth,
+  onWidthChange,
+  minWidth = 236,
+  maxWidth = 350,
+  className = "",
+  children,
+  extendedSidebar,
+  isAnyExtendedSidebarExpanded = false,
+}: ResizableSidebarProps) {
+  // states
+  const [isResizing, setIsResizing] = useState(false);
+  const [isHoveringTrigger, setIsHoveringTrigger] = useState(false);
+  // refs
+  const peekTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
+
+  // handlers
+  const setShowPeek = useCallback(
+    (value: boolean) => {
+      togglePeek(value);
+    },
+    [togglePeek]
+  );
+
+  const handleResize = useCallback(
+    (e: MouseEvent) => {
+      if (!isResizing) return;
+      const newWidth = Math.min(Math.max(e.clientX, minWidth), maxWidth);
+      setWidth(newWidth);
+    },
+    [isResizing, minWidth, maxWidth, setWidth]
+  );
+
+  const startResizing = useCallback(() => {
+    setIsResizing(true);
+  }, []);
+
+  const stopResizing = useCallback(() => {
+    setIsResizing(false);
+  }, []);
+
+  const toggleCollapsed = useCallback(() => {
+    toggleCollapsedProp();
+    setShowPeek(false);
+    setIsHoveringTrigger(false);
+    if (peekTimeoutRef.current) {
+      clearTimeout(peekTimeoutRef.current);
+    }
+  }, [toggleCollapsedProp, setShowPeek]);
+
+  const handleTriggerEnter = useCallback(() => {
+    if (isCollapsed) {
+      setIsHoveringTrigger(true);
+      setShowPeek(true);
+      if (peekTimeoutRef.current) {
+        clearTimeout(peekTimeoutRef.current);
+      }
+    }
+  }, [isCollapsed, setShowPeek]);
+
+  const handleTriggerLeave = useCallback(() => {
+    if (isCollapsed && !isAnyExtendedSidebarExpanded) {
+      setIsHoveringTrigger(false);
+      peekTimeoutRef.current = setTimeout(() => {
+        setShowPeek(false);
+      }, peekDuration);
+    }
+  }, [isCollapsed, peekDuration, setShowPeek, isAnyExtendedSidebarExpanded]);
+
+  const handlePeekEnter = useCallback(() => {
+    if (isCollapsed && showPeek) {
+      if (peekTimeoutRef.current) {
+        clearTimeout(peekTimeoutRef.current);
+      }
+    }
+  }, [isCollapsed, showPeek]);
+
+  const handlePeekLeave = useCallback(() => {
+    if (isCollapsed && !isAnyExtendedSidebarExpanded) {
+      peekTimeoutRef.current = setTimeout(() => {
+        setShowPeek(false);
+      }, peekDuration);
+    }
+  }, [isCollapsed, peekDuration, setShowPeek, isAnyExtendedSidebarExpanded]);
+
+  // Set up event listeners for resizing
+  useEffect(() => {
+    if (isResizing) {
+      document.addEventListener("mousemove", handleResize);
+      document.addEventListener("mouseup", stopResizing);
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+    }
+
+    return () => {
+      document.removeEventListener("mousemove", handleResize);
+      document.removeEventListener("mouseup", stopResizing);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+  }, [isResizing, handleResize, stopResizing]);
+
+  // Clean up timeout on unmount
+  useEffect(
+    () => () => {
+      if (peekTimeoutRef.current) {
+        clearTimeout(peekTimeoutRef.current);
+      }
+    },
+    []
+  );
+
+  // Reset peek when sidebar is expanded
+  useEffect(() => {
+    if (!isCollapsed) {
+      setShowPeek(false);
+      setIsHoveringTrigger(false);
+      if (peekTimeoutRef.current) {
+        clearTimeout(peekTimeoutRef.current);
+      }
+    }
+  }, [isCollapsed, setShowPeek]);
+
+  // Call external handlers when state changes
+  useEffect(() => {
+    onWidthChange?.(width);
+  }, [width, onWidthChange]);
+
+  useEffect(() => {
+    onCollapsedChange?.(isCollapsed);
+  }, [isCollapsed, onCollapsedChange]);
+
+  return (
+    <>
+      {/* Main Sidebar */}
+      <div
+        className={cn(
+          "h-full z-20 bg-white border-r border-gray-200",
+          !isResizing && "transition-all duration-300 ease-in-out",
+          isCollapsed ? "translate-x-[-100%] opacity-0 w-0" : "translate-x-0 opacity-100",
+          className
+        )}
+        style={{ width: `${isCollapsed ? 0 : width}px` }}
+        role="complementary"
+        aria-label="Main sidebar"
+      >
+        <aside
+          className={cn(
+            "group/sidebar h-full w-full bg-custom-background-100 overflow-hidden relative flex flex-col pt-4",
+            isAnyExtendedSidebarExpanded && "rounded-none",
+            !isResizing && "border-r border-custom-sidebar-border-200 "
+          )}
+        >
+          {children}
+
+          {/* Resize Handle */}
+          <div
+            className={cn(
+              "transition-all duration-200 cursor-ew-resize absolute h-full w-1 z-[20]",
+              !isResizing && "hover:bg-custom-background-90",
+              isResizing && "w-1.5 bg-custom-background-80",
+              "top-0 right-0"
+            )}
+            // onDoubleClick toggle sidebar
+            onDoubleClick={() => toggleCollapsed()}
+            onMouseDown={startResizing}
+            role="separator"
+            aria-label="Resize sidebar"
+          />
+        </aside>
+      </div>
+
+      {/* Peek Trigger Area */}
+      {isCollapsed && (
+        <div
+          className={cn(
+            "fixed top-0 left-0 w-6 h-full z-50 bg-transparent",
+            "transition-opacity duration-200",
+            isHoveringTrigger ? "opacity-100" : "opacity-0"
+          )}
+          onMouseEnter={handleTriggerEnter}
+          onMouseLeave={handleTriggerLeave}
+          role="button"
+          aria-label="Show sidebar peek"
+        />
+      )}
+
+      {/* Peek View */}
+      <div
+        className={cn(
+          "fixed left-0 z-30 bg-custom-background-100 shadow-xl",
+          !isResizing && "transition-all duration-300 ease-in-out",
+          isCollapsed && showPeek ? "translate-x-0 opacity-100" : "translate-x-[-100%] opacity-0",
+          "pointer-events-none",
+          isCollapsed && showPeek && "pointer-events-auto",
+          !showPeek ? "w-0" : "w-full"
+        )}
+        style={{
+          width: `${width}px`,
+          height: "calc(100% - 6rem)",
+          top: "3rem",
+        }}
+        onMouseEnter={handlePeekEnter}
+        onMouseLeave={handlePeekLeave}
+        role="complementary"
+        aria-label="Sidebar peek view"
+      >
+        <aside
+          className={cn(
+            "group/sidebar h-full w-full bg-custom-background-100 overflow-hidden relative flex flex-col z-20 pt-4",
+            "self-center border-y shadow-lg rounded-md rounded-tl-none rounded-bl-none",
+            isAnyExtendedSidebarExpanded && "rounded-none",
+            !isResizing && "border-r border-custom-sidebar-border-200 "
+          )}
+        >
+          {children}
+          {/* Resize Handle */}
+          <div
+            className={cn(
+              "transition-all duration-200 cursor-ew-resize absolute h-full w-1 z-[20]",
+              !isResizing && "hover:bg-custom-background-90",
+              isResizing && "w-1.5 bg-custom-background-80",
+              "top-0 right-0"
+            )}
+            // onDoubleClick toggle sidebar
+            onDoubleClick={() => toggleCollapsed()}
+            onMouseDown={startResizing}
+            role="separator"
+            aria-label="Resize sidebar"
+          />
+        </aside>
+      </div>
+
+      {/* Toggle Button */}
+      <button
+        onClick={toggleCollapsed}
+        className={cn(
+          "fixed top-4 right-4 z-40 p-2 bg-white rounded-md shadow-md border border-gray-200",
+          "hover:bg-gray-50 transition-all duration-200",
+          "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
+          "transform transition-transform duration-300",
+          isCollapsed ? "translate-x-0" : "translate-x-[-100%]"
+        )}
+        aria-label={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+        aria-expanded={!isCollapsed}
+      >
+        <svg
+          className={cn("w-5 h-5 transition-transform duration-300", isCollapsed ? "rotate-180" : "rotate-0")}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
+        </svg>
+      </button>
+
+      {/* Extended Sidebar */}
+      {extendedSidebar && extendedSidebar}
+    </>
+  );
+}

From 12c1ae6eadf9c05fb69d8ae5019b6629b15deabc Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Mon, 16 Jun 2025 15:31:18 +0530
Subject: [PATCH 04/47] chore: appsidebar root component

---
 .../[workspaceSlug]/(projects)/_sidebar.tsx   | 59 +++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 web/app/(all)/[workspaceSlug]/(projects)/_sidebar.tsx

diff --git a/web/app/(all)/[workspaceSlug]/(projects)/_sidebar.tsx b/web/app/(all)/[workspaceSlug]/(projects)/_sidebar.tsx
new file mode 100644
index 00000000000..06be475cd6c
--- /dev/null
+++ b/web/app/(all)/[workspaceSlug]/(projects)/_sidebar.tsx
@@ -0,0 +1,59 @@
+"use client";
+import { FC, useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { useLocalStorage } from "@plane/hooks";
+// hooks
+import { useAppTheme } from "@/hooks/store";
+// local imports
+import { ExtendedProjectSidebar } from "./extended-project-sidebar";
+import { ExtendedAppSidebar } from "./extended-sidebar";
+import { ResizableSidebar } from "./resizeable-sidebar";
+import { AppSidebar } from "./sidebar";
+
+export const ProjectAppSidebar: FC = observer(() => {
+  // store hooks
+  const {
+    sidebarCollapsed,
+    toggleSidebar,
+    sidebarPeek,
+    toggleSidebarPeek,
+    extendedSidebarCollapsed,
+    extendedProjectSidebarCollapsed,
+  } = useAppTheme();
+  const { storedValue, setValue } = useLocalStorage("sidebarWidth", 250);
+  // states
+  const [sidebarWidth, setSidebarWidth] = useState<number>(storedValue ?? 250);
+  // derived values
+  const anyExtendedSidebarCollapsed = extendedSidebarCollapsed || extendedProjectSidebarCollapsed;
+
+  // 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 />
+            <ExtendedProjectSidebar />
+          </>
+        }
+        isAnyExtendedSidebarExpanded={anyExtendedSidebarCollapsed}
+      >
+        <AppSidebar />
+      </ResizableSidebar>
+    </>
+  );
+});

From ed86b800c9daffcd4c0c751c0b0754a10f82c5cd Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Mon, 16 Jun 2025 15:34:34 +0530
Subject: [PATCH 05/47] chore: updated sidebar and applied necessary changes
 across codebase

---
 .../(projects)/extended-project-sidebar.tsx   |  40 ++-
 .../(projects)/extended-sidebar.tsx           |  32 +--
 .../[workspaceSlug]/(projects)/header.tsx     |  25 +-
 .../[workspaceSlug]/(projects)/layout.tsx     |   5 +-
 .../[workspaceSlug]/(projects)/sidebar.tsx    |  76 ++----
 .../sidebar/project-navigation-root.tsx       |   7 +-
 .../workspace/sidebar/app-search.tsx          |  12 +-
 .../sidebar/extended-sidebar-item.tsx         |   3 -
 .../workspace/sidebar/sidebar-item.tsx        |  39 +--
 .../notification-app-sidebar-option.tsx       |   6 +-
 .../components/workspace/sidebar/dropdown.tsx |  44 +---
 .../sidebar/favorites/favorite-folder.tsx     | 194 ++++++--------
 .../common/favorite-item-title.tsx            |  14 +-
 .../common/favorite-item-wrapper.tsx          |  29 +--
 .../sidebar/favorites/favorite-items/root.tsx |  31 +--
 .../sidebar/favorites/favorites-menu.tsx      | 169 +++++-------
 .../workspace/sidebar/help-section.tsx        |  40 +--
 .../workspace/sidebar/project-navigation.tsx  |  26 +-
 .../workspace/sidebar/projects-list-item.tsx  | 240 ++++++++----------
 .../workspace/sidebar/projects-list.tsx       | 119 +++------
 .../workspace/sidebar/quick-actions.tsx       |  17 +-
 .../workspace/sidebar/sidebar-menu-items.tsx  |  17 +-
 .../workspace/sidebar/user-menu-item.tsx      |  39 +--
 .../workspace/sidebar/user-menu.tsx           |  11 +-
 .../sidebar/workspace-menu-header.tsx         |  16 +-
 .../workspace/sidebar/workspace-menu-item.tsx |  48 ++--
 .../workspace/sidebar/workspace-menu.tsx      |  19 +-
 27 files changed, 472 insertions(+), 846 deletions(-)

diff --git a/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx b/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx
index b96f008ab69..fb92c5d3aba 100644
--- a/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx
+++ b/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx
@@ -8,15 +8,15 @@ import { Plus, Search } from "lucide-react";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { setToast, TOAST_TYPE, Tooltip } from "@plane/ui";
-import { cn, copyUrlToClipboard } from "@plane/utils";
+import { copyUrlToClipboard } from "@plane/utils";
 // components
 import { CreateProjectModal } from "@/components/project";
 import { SidebarProjectsListItem } from "@/components/workspace";
 // hooks
 import { orderJoinedProjects } from "@/helpers/project.helper";
 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
@@ -28,7 +28,8 @@ export const ExtendedProjectSidebar = observer(() => {
   const { workspaceSlug } = useParams();
   // store hooks
   const { t } = useTranslation();
-  const { sidebarCollapsed, extendedProjectSidebarCollapsed, toggleExtendedProjectSidebar } = useAppTheme();
+  const { sidebarPeek, toggleSidebarPeek, extendedProjectSidebarCollapsed, toggleExtendedProjectSidebar } =
+    useAppTheme();
   const { getPartialProjectById, joinedProjectIds: joinedProjects, updateProjectView } = useProject();
   const { allowPermissions } = useUserPermissions();
 
@@ -75,15 +76,12 @@ export const ExtendedProjectSidebar = observer(() => {
     EUserPermissionsLevel.WORKSPACE
   );
 
-  useExtendedSidebarOutsideClickDetector(
-    extendedProjectSidebarRef,
-    () => {
-      if (!isProjectModalOpen) {
-        toggleExtendedProjectSidebar(false);
-      }
-    },
-    "extended-project-sidebar-toggle"
-  );
+  const handleClose = () => {
+    if (sidebarPeek) toggleSidebarPeek(false);
+    if (!isProjectModalOpen) {
+      toggleExtendedProjectSidebar(false);
+    }
+  };
 
   const handleCopyText = (projectId: string) => {
     copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/issues`).then(() => {
@@ -104,17 +102,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
+        extendedSidebarCollapsed={!!extendedProjectSidebarCollapsed}
+        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 +151,7 @@ export const ExtendedProjectSidebar = observer(() => {
             />
           ))}
         </div>
-      </div>
+      </ExtendedSidebarWrapper>
     </>
   );
 });
diff --git a/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar.tsx b/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar.tsx
index baa41eb9fb9..a1eaf4a34e6 100644
--- a/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar.tsx
+++ b/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar.tsx
@@ -5,12 +5,11 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
 import { EUserWorkspaceRoles, WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS_LINKS } from "@plane/constants";
-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
@@ -18,7 +17,7 @@ export const ExtendedAppSidebar = observer(() => {
   // routers
   const { workspaceSlug } = useParams();
   // store hooks
-  const { sidebarCollapsed, extendedSidebarCollapsed, toggleExtendedSidebar } = useAppTheme();
+  const { sidebarPeek, toggleSidebarPeek, extendedSidebarCollapsed, toggleExtendedSidebar } = useAppTheme();
   const { updateSidebarPreference, getNavigationPreferences } = useWorkspace();
 
   // derived values
@@ -94,24 +93,17 @@ export const ExtendedAppSidebar = observer(() => {
       });
   };
 
-  useExtendedSidebarOutsideClickDetector(
-    extendedSidebarRef,
-    () => toggleExtendedSidebar(true),
-    "extended-sidebar-toggle"
-  );
+  const handleClose = () => {
+    if (sidebarPeek) toggleSidebarPeek(false);
+    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
+      extendedSidebarCollapsed={!!extendedSidebarCollapsed}
+      extendedSidebarRef={extendedSidebarRef}
+      handleClose={handleClose}
+      excludedElementId="extended-sidebar-toggle"
     >
       {sortedNavigationItems.map((item, index) => (
         <ExtendedSidebarItem
@@ -121,6 +113,6 @@ export const ExtendedAppSidebar = observer(() => {
           handleOnNavigationItemDrop={handleOnNavigationItemDrop}
         />
       ))}
-    </div>
+    </ExtendedSidebarWrapper>
   );
 });
diff --git a/web/app/(all)/[workspaceSlug]/(projects)/header.tsx b/web/app/(all)/[workspaceSlug]/(projects)/header.tsx
index 16c106dad4a..da1007447dd 100644
--- a/web/app/(all)/[workspaceSlug]/(projects)/header.tsx
+++ b/web/app/(all)/[workspaceSlug]/(projects)/header.tsx
@@ -1,8 +1,9 @@
 "use client";
 
+import { observer } from "mobx-react";
 import Image from "next/image";
 import { useTheme } from "next-themes";
-import { Home } from "lucide-react";
+import { Home, MenuIcon } from "lucide-react";
 // images
 import githubBlackImage from "/public/logos/github-black.png";
 import githubWhiteImage from "/public/logos/github-white.png";
@@ -14,19 +15,33 @@ import { Breadcrumbs, Header } from "@plane/ui";
 import { BreadcrumbLink } from "@/components/common";
 // constants
 // hooks
-import { useEventTracker } from "@/hooks/store";
+import { useAppTheme, useEventTracker } from "@/hooks/store";
 
-export const WorkspaceDashboardHeader = () => {
+export const WorkspaceDashboardHeader = observer(() => {
   // hooks
   const { captureEvent } = useEventTracker();
   const { resolvedTheme } = useTheme();
+  const { sidebarCollapsed, toggleSidebar, sidebarPeek, toggleSidebarPeek } = useAppTheme();
+
   const { t } = useTranslation();
 
   return (
     <>
       <Header>
         <Header.LeftItem>
-          <div>
+          <div className="flex items-center gap-2">
+            {sidebarCollapsed && (
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  if (sidebarPeek) toggleSidebarPeek(false);
+                  toggleSidebar(false);
+                }}
+              >
+                <MenuIcon className="size-5 text-custom-text-300" />
+              </button>
+            )}
             <Breadcrumbs>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
@@ -61,4 +76,4 @@ export const WorkspaceDashboardHeader = () => {
       </Header>
     </>
   );
-};
+});
diff --git a/web/app/(all)/[workspaceSlug]/(projects)/layout.tsx b/web/app/(all)/[workspaceSlug]/(projects)/layout.tsx
index 340ec57d0d0..1e09ef39027 100644
--- a/web/app/(all)/[workspaceSlug]/(projects)/layout.tsx
+++ b/web/app/(all)/[workspaceSlug]/(projects)/layout.tsx
@@ -4,7 +4,8 @@ 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";
+// local imports
+import { ProjectAppSidebar } from "./_sidebar";
 
 export default function WorkspaceLayout({ children }: { children: React.ReactNode }) {
   return (
@@ -12,7 +13,7 @@ export default function WorkspaceLayout({ children }: { children: React.ReactNod
       <CommandPalette />
       <WorkspaceAuthWrapper>
         <div className="relative flex h-screen w-full overflow-hidden">
-          <AppSidebar />
+          <ProjectAppSidebar />
           <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
             {children}
           </main>
diff --git a/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx b/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx
index 27a73137e47..dbf99334507 100644
--- a/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx
+++ b/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx
@@ -8,8 +8,6 @@ import { useOutsideClickDetector } from "@plane/hooks";
 import { SidebarDropdown, SidebarHelpSection, SidebarProjectsList, SidebarQuickActions } from "@/components/workspace";
 import { SidebarFavoritesMenu } from "@/components/workspace/sidebar/favorites/favorites-menu";
 import { SidebarMenuItems } from "@/components/workspace/sidebar/sidebar-menu-items";
-// helpers
-import { cn } from "@/helpers/common.helper";
 // hooks
 import { useAppTheme, useUserPermissions } from "@/hooks/store";
 import { useFavorite } from "@/hooks/store/use-favorite";
@@ -17,8 +15,6 @@ import useSize from "@/hooks/use-window-size";
 // plane web components
 import { SidebarAppSwitcher } from "@/plane-web/components/sidebar";
 import { SidebarTeamsList } from "@/plane-web/components/workspace/sidebar/teams-sidebar-list";
-import { ExtendedProjectSidebar } from "./extended-project-sidebar";
-import { ExtendedAppSidebar } from "./extended-sidebar";
 
 export const AppSidebar: FC = observer(() => {
   // store hooks
@@ -52,60 +48,26 @@ export const AppSidebar: FC = observer(() => {
 
   return (
     <>
-      <div
-        className={cn(
-          "fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300 w-[250px] md:relative md:ml-0",
-          {
-            "w-[70px] -ml-[250px]": sidebarCollapsed,
-          }
-        )}
-      >
-        <div
-          ref={ref}
-          className={cn("size-full flex flex-col flex-1 pt-4 pb-0", {
-            "p-2 pt-4": sidebarCollapsed,
-          })}
-        >
-          <div
-            className={cn("px-2", {
-              "px-4": !sidebarCollapsed,
-            })}
-          >
-            {/* Workspace switcher and settings */}
-            <SidebarDropdown />
-            <div className="flex-shrink-0 h-4" />
-            {/* App switcher */}
-            {canPerformWorkspaceMemberActions && <SidebarAppSwitcher />}
-            {/* Quick actions */}
-            <SidebarQuickActions />
-          </div>
-          <hr
-            className={cn("flex-shrink-0 border-custom-sidebar-border-300 h-[0.5px] w-3/5 mx-auto my-1", {
-              "opacity-0": !sidebarCollapsed,
-            })}
-          />
-          <div
-            className={cn("overflow-x-hidden scrollbar-sm h-full w-full overflow-y-auto px-2 py-0.5", {
-              "vertical-scrollbar px-4": !sidebarCollapsed,
-            })}
-          >
-            <SidebarMenuItems />
-            {sidebarCollapsed && (
-              <hr className="flex-shrink-0 border-custom-sidebar-border-300 h-[0.5px] w-3/5 mx-auto my-1" />
-            )}
-            {/* Favorites Menu */}
-            {canPerformWorkspaceMemberActions && !isFavoriteEmpty && <SidebarFavoritesMenu />}
-            {/* Teams List */}
-            <SidebarTeamsList />
-            {/* Projects List */}
-            <SidebarProjectsList />
-          </div>
-          {/* Help Section */}
-          <SidebarHelpSection />
-        </div>
+      <div className="px-4">
+        {/* Workspace switcher and settings */}
+        <SidebarDropdown />
+        <div className="flex-shrink-0 h-4" />
+        {/* App switcher */}
+        {canPerformWorkspaceMemberActions && <SidebarAppSwitcher />}
+        {/* Quick actions */}
+        <SidebarQuickActions />
       </div>
-      <ExtendedAppSidebar />
-      <ExtendedProjectSidebar />
+      <div className="flex flex-col gap-1 overflow-x-hidden scrollbar-sm h-full w-full overflow-y-auto pt-3 pb-0.5 vertical-scrollbar px-4">
+        <SidebarMenuItems />
+        {/* Favorites Menu */}
+        {canPerformWorkspaceMemberActions && !isFavoriteEmpty && <SidebarFavoritesMenu />}
+        {/* Teams List */}
+        <SidebarTeamsList />
+        {/* Projects List */}
+        <SidebarProjectsList />
+      </div>
+      {/* Help Section */}
+      <SidebarHelpSection />
     </>
   );
 });
diff --git a/web/ce/components/sidebar/project-navigation-root.tsx b/web/ce/components/sidebar/project-navigation-root.tsx
index 6b269a0a014..25a0dd9d8ca 100644
--- a/web/ce/components/sidebar/project-navigation-root.tsx
+++ b/web/ce/components/sidebar/project-navigation-root.tsx
@@ -7,12 +7,9 @@ import { ProjectNavigation } from "@/components/workspace";
 type TProjectItemsRootProps = {
   workspaceSlug: string;
   projectId: string;
-  isSidebarCollapsed: boolean;
 };
 
 export const ProjectNavigationRoot: FC<TProjectItemsRootProps> = (props) => {
-  const { workspaceSlug, projectId, isSidebarCollapsed } = props;
-  return (
-    <ProjectNavigation workspaceSlug={workspaceSlug} projectId={projectId} isSidebarCollapsed={isSidebarCollapsed} />
-  );
+  const { workspaceSlug, projectId } = props;
+  return <ProjectNavigation workspaceSlug={workspaceSlug} projectId={projectId} />;
 };
diff --git a/web/ce/components/workspace/sidebar/app-search.tsx b/web/ce/components/workspace/sidebar/app-search.tsx
index 1ba0ea72c2a..6b8a94f6ba2 100644
--- a/web/ce/components/workspace/sidebar/app-search.tsx
+++ b/web/ce/components/workspace/sidebar/app-search.tsx
@@ -2,14 +2,11 @@ import { observer } from "mobx-react";
 import { Search } from "lucide-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-// helpers
-import { cn } from "@/helpers/common.helper";
 // hooks
-import { useAppTheme, useCommandPalette } from "@/hooks/store";
+import { useCommandPalette } from "@/hooks/store";
 
 export const AppSearch = observer(() => {
   // store hooks
-  const { sidebarCollapsed } = useAppTheme();
   const { toggleCommandPaletteModal } = useCommandPalette();
   // translation
   const { t } = useTranslation();
@@ -17,12 +14,7 @@ export const AppSearch = observer(() => {
   return (
     <button
       type="button"
-      className={cn(
-        "flex-shrink-0 size-8 aspect-square grid place-items-center rounded hover:bg-custom-sidebar-background-90 outline-none",
-        {
-          "border-[0.5px] border-custom-sidebar-border-300": !sidebarCollapsed,
-        }
-      )}
+      className="flex-shrink-0 size-8 aspect-square grid place-items-center rounded hover:bg-custom-sidebar-background-90 outline-none border-[0.5px] border-custom-sidebar-border-300"
       onClick={() => toggleCommandPaletteModal(true)}
       aria-label={t("aria_labels.projects_sidebar.open_command_palette")}
     >
diff --git a/web/ce/components/workspace/sidebar/extended-sidebar-item.tsx b/web/ce/components/workspace/sidebar/extended-sidebar-item.tsx
index 5e7343e0a8a..815fdb2637e 100644
--- a/web/ce/components/workspace/sidebar/extended-sidebar-item.tsx
+++ b/web/ce/components/workspace/sidebar/extended-sidebar-item.tsx
@@ -171,10 +171,7 @@ export const ExtendedSidebarItem: FC<TExtendedSidebarItemProps> = observer((prop
               className={cn(
                 "flex items-center justify-center absolute top-1/2 -left-3 -translate-y-1/2 rounded text-custom-sidebar-text-400 cursor-grab",
                 {
-                  // "cursor-not-allowed opacity-60": project.sort_order === null,
                   "cursor-grabbing": isDragging,
-
-                  // "!hidden": isSidebarCollapsed,
                 }
               )}
               ref={dragHandleRef}
diff --git a/web/ce/components/workspace/sidebar/sidebar-item.tsx b/web/ce/components/workspace/sidebar/sidebar-item.tsx
index 3645bde3ddd..fbbf16acd42 100644
--- a/web/ce/components/workspace/sidebar/sidebar-item.tsx
+++ b/web/ce/components/workspace/sidebar/sidebar-item.tsx
@@ -5,9 +5,7 @@ import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
 // plane imports
 import { EUserPermissionsLevel, IWorkspaceSidebarNavigationItem } from "@plane/constants";
-import { usePlatformOS } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
-import { Tooltip } from "@plane/ui";
 // components
 import { SidebarNavItem } from "@/components/sidebar";
 import { NotificationAppSidebarOption } from "@/components/workspace-notifications";
@@ -31,8 +29,7 @@ export const SidebarItem: FC<TSidebarItemProps> = observer((props) => {
   const { data } = useUser();
 
   // store hooks
-  const { toggleSidebar, sidebarCollapsed, extendedSidebarCollapsed, toggleExtendedSidebar } = useAppTheme();
-  const { isMobile } = usePlatformOS();
+  const { toggleSidebar, extendedSidebarCollapsed, toggleExtendedSidebar } = useAppTheme();
 
   const handleLinkClick = () => {
     if (window.innerWidth < 768) {
@@ -61,30 +58,14 @@ export const SidebarItem: FC<TSidebarItemProps> = observer((props) => {
   const icon = getSidebarNavigationItemIcon(item.key);
 
   return (
-    <Tooltip
-      tooltipContent={t(item.labelTranslationKey)}
-      position="right"
-      className="ml-2"
-      disabled={!sidebarCollapsed}
-      isMobile={isMobile}
-    >
-      <Link href={itemHref} onClick={() => handleLinkClick()}>
-        <SidebarNavItem
-          className={`${sidebarCollapsed ? "p-0 size-8 aspect-square justify-center mx-auto" : ""}`}
-          isActive={isActive}
-        >
-          <div className="flex items-center gap-1.5 py-[1px]">
-            {icon}
-            {!sidebarCollapsed && <p className="text-sm leading-5 font-medium">{t(item.labelTranslationKey)}</p>}
-          </div>
-          {item.key === "inbox" && (
-            <NotificationAppSidebarOption
-              workspaceSlug={workspaceSlug?.toString()}
-              isSidebarCollapsed={sidebarCollapsed ?? false}
-            />
-          )}
-        </SidebarNavItem>
-      </Link>
-    </Tooltip>
+    <Link href={itemHref} onClick={() => handleLinkClick()}>
+      <SidebarNavItem isActive={isActive}>
+        <div className="flex items-center gap-1.5 py-[1px]">
+          {icon}
+          <p className="text-sm leading-5 font-medium">{t(item.labelTranslationKey)}</p>
+        </div>
+        {item.key === "inbox" && <NotificationAppSidebarOption workspaceSlug={workspaceSlug?.toString()} />}
+      </SidebarNavItem>
+    </Link>
   );
 });
diff --git a/web/core/components/workspace-notifications/notification-app-sidebar-option.tsx b/web/core/components/workspace-notifications/notification-app-sidebar-option.tsx
index 443169910fc..55cbd1018c4 100644
--- a/web/core/components/workspace-notifications/notification-app-sidebar-option.tsx
+++ b/web/core/components/workspace-notifications/notification-app-sidebar-option.tsx
@@ -12,11 +12,10 @@ import { useWorkspaceNotifications } from "@/hooks/store";
 
 type TNotificationAppSidebarOption = {
   workspaceSlug: string;
-  isSidebarCollapsed: boolean | undefined;
 };
 
 export const NotificationAppSidebarOption: FC<TNotificationAppSidebarOption> = observer((props) => {
-  const { workspaceSlug, isSidebarCollapsed } = props;
+  const { workspaceSlug } = props;
   // hooks
   const { unreadNotificationsCount, getUnreadNotificationsCount } = useWorkspaceNotifications();
 
@@ -33,9 +32,6 @@ export const NotificationAppSidebarOption: FC<TNotificationAppSidebarOption> = o
 
   if (totalNotifications <= 0) return <></>;
 
-  if (isSidebarCollapsed)
-    return <div className="absolute right-2 top-1.5 h-2 w-2 rounded-full bg-custom-primary-300" />;
-
   return (
     <div className="ml-auto">
       <CountChip count={`${isMentionsEnabled ? `@ ` : ``}${getNumberCount(totalNotifications)}`} />
diff --git a/web/core/components/workspace/sidebar/dropdown.tsx b/web/core/components/workspace/sidebar/dropdown.tsx
index d24fb369a29..ec3aecddd8f 100644
--- a/web/core/components/workspace/sidebar/dropdown.tsx
+++ b/web/core/components/workspace/sidebar/dropdown.tsx
@@ -28,7 +28,7 @@ import SidebarDropdownItem from "./dropdown-item";
 export const SidebarDropdown = observer(() => {
   const { workspaceSlug } = useParams();
   // store hooks
-  const { sidebarCollapsed, toggleSidebar } = useAppTheme();
+  const { toggleSidebar } = useAppTheme();
   const { data: currentUser } = useUser();
   const { signOut } = useUser();
   const { updateUserProfile } = useUserProfile();
@@ -67,42 +67,26 @@ export const SidebarDropdown = observer(() => {
   const workspacesList = orderWorkspacesList(Object.values(workspaces ?? {}));
   // TODO: fix workspaces list scroll
   return (
-    <div
-      className={cn("flex items-center justify-center gap-x-3 gap-y-2", {
-        "flex-col gap-y-3": sidebarCollapsed,
-      })}
-    >
-      <Menu
-        as="div"
-        className={cn("relative h-full truncate text-left flex-grow flex justify-stretch", {
-          "flex-grow-0 justify-center": sidebarCollapsed,
-        })}
-      >
+    <div className="flex items-center justify-center gap-x-3 gap-y-2">
+      <Menu as="div" className="relative h-full truncate text-left flex-grow flex justify-stretch">
         {({ open, close }) => (
           <>
             <Menu.Button
-              className={cn(
-                "group/menu-button flex items-center justify-between gap-1 p-1 truncate rounded text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:outline-none",
-                { "flex-grow": !sidebarCollapsed }
-              )}
+              className="group/menu-button flex items-center justify-between gap-1 p-1 truncate rounded text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:outline-none flex-grow"
               aria-label={t("aria_labels.projects_sidebar.open_workspace_switcher")}
             >
               <div className="flex-grow flex items-center gap-2 truncate">
                 <WorkspaceLogo logo={activeWorkspace?.logo_url} name={activeWorkspace?.name} />
-                {!sidebarCollapsed && (
-                  <h4 className="truncate text-base font-medium text-custom-text-100">
-                    {activeWorkspace?.name ?? t("loading")}
-                  </h4>
-                )}
+                <h4 className="truncate text-base font-medium text-custom-text-100">
+                  {activeWorkspace?.name ?? t("loading")}
+                </h4>
               </div>
-              {!sidebarCollapsed && (
-                <ChevronDown
-                  className={cn(
-                    "flex-shrink-0 mx-1 hidden size-4 group-hover/menu-button:block text-custom-sidebar-text-400 duration-300",
-                    { "rotate-180": open }
-                  )}
-                />
-              )}
+              <ChevronDown
+                className={cn(
+                  "flex-shrink-0 mx-1 hidden size-4 group-hover/menu-button:block text-custom-sidebar-text-400 duration-300",
+                  { "rotate-180": open }
+                )}
+              />
             </Menu.Button>
             <Transition
               as={Fragment}
@@ -212,7 +196,7 @@ export const SidebarDropdown = observer(() => {
           leaveTo="transform opacity-0 scale-95"
         >
           <Menu.Items
-            className="absolute left-0 z-[21] mt-1 flex w-52 origin-top-left  flex-col divide-y
+            className="absolute left-0 z-[21] mt-1 flex w-44 origin-top-left flex-col divide-y
             divide-custom-sidebar-border-200 rounded-md border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-1 py-2 text-xs shadow-lg outline-none"
             ref={setPopperElement as Ref<HTMLDivElement>}
             style={styles.popper}
diff --git a/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx b/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
index 9f81deeaf68..55e2123f4e3 100644
--- a/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
+++ b/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
@@ -25,7 +25,6 @@ import { CustomMenu, Tooltip, DropIndicator, FavoriteFolderIcon, DragHandle } fr
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
-import { useAppTheme } from "@/hooks/store";
 import { useFavorite } from "@/hooks/store/use-favorite";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // local imports
@@ -44,7 +43,6 @@ type Props = {
 export const FavoriteFolder: React.FC<Props> = (props) => {
   const { favorite, handleRemoveFromFavorites, isLastChild, handleDrop } = props;
   // store hooks
-  const { sidebarCollapsed: isSidebarCollapsed } = useAppTheme();
   const { getGroupedFavorites } = useFavorite();
   const { isMobile } = usePlatformOS();
   const { workspaceSlug } = useParams();
@@ -159,7 +157,6 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
                 "group/project-item relative w-full px-2 py-1.5 flex items-center rounded-md text-custom-sidebar-text-100 hover:bg-custom-sidebar-background-90",
                 {
                   "bg-custom-sidebar-background-90": isMenuActive,
-                  "p-0 size-8 aspect-square justify-center mx-auto": isSidebarCollapsed,
                 }
               )}
             >
@@ -169,117 +166,95 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
                 <GripVertical className="w-3 h-3" />
               </div>
 
-              {isSidebarCollapsed ? (
-                <div
-                  className={cn("flex-grow flex items-center gap-1.5 truncate text-left select-none", {
-                    "justify-center": isSidebarCollapsed,
-                  })}
-                >
-                  <Tooltip tooltipContent={favorite.name} position="right" isMobile={isMobile}>
+              <>
+                <Tooltip tooltipContent={`${favorite.name}`} position="right" className="ml-8" isMobile={isMobile}>
+                  <div className="flex-grow flex truncate">
                     <Disclosure.Button
                       as="button"
-                      className="size-8 aspect-square flex-shrink-0 grid place-items-center"
+                      type="button"
+                      className="flex-grow flex items-center gap-1.5 text-left select-none w-full"
                     >
-                      <div className="size-4 grid place-items-center flex-shrink-0">
+                      <Tooltip
+                        isMobile={isMobile}
+                        tooltipContent={
+                          favorite.sort_order === null ? "Join the project to rearrange" : "Drag to rearrange"
+                        }
+                        position="top-right"
+                        disabled={isDragging}
+                      >
+                        <button
+                          type="button"
+                          className={cn(
+                            "hidden group-hover/project-item:flex items-center justify-center absolute top-1/2 -left-3 -translate-y-1/2 rounded text-custom-sidebar-text-400 cursor-grab",
+                            {
+                              "cursor-not-allowed opacity-60": favorite.sort_order === null,
+                              "cursor-grabbing": isDragging,
+                            }
+                          )}
+                        >
+                          <DragHandle className="bg-transparent" />
+                        </button>
+                      </Tooltip>
+                      <div className="size-5 grid place-items-center flex-shrink-0">
                         <FavoriteFolderIcon />
                       </div>
+                      <p className="truncate text-sm font-medium text-custom-sidebar-text-200">{favorite.name}</p>
                     </Disclosure.Button>
-                  </Tooltip>
-                </div>
-              ) : (
-                <>
-                  <Tooltip tooltipContent={`${favorite.name}`} position="right" className="ml-8" isMobile={isMobile}>
-                    <div className="flex-grow flex truncate">
-                      <Disclosure.Button
-                        as="button"
-                        type="button"
-                        className={cn("flex-grow flex items-center gap-1.5 text-left select-none w-full", {
-                          "justify-center": isSidebarCollapsed,
-                        })}
-                      >
-                        <Tooltip
-                          isMobile={isMobile}
-                          tooltipContent={
-                            favorite.sort_order === null ? "Join the project to rearrange" : "Drag to rearrange"
-                          }
-                          position="top-right"
-                          disabled={isDragging}
-                        >
-                          <button
-                            type="button"
-                            className={cn(
-                              "hidden group-hover/project-item:flex items-center justify-center absolute top-1/2 -left-3 -translate-y-1/2 rounded text-custom-sidebar-text-400 cursor-grab",
-                              {
-                                "cursor-not-allowed opacity-60": favorite.sort_order === null,
-                                "cursor-grabbing": isDragging,
-                                "!hidden": isSidebarCollapsed,
-                              }
-                            )}
-                          >
-                            <DragHandle className="bg-transparent" />
-                          </button>
-                        </Tooltip>
-                        <div className="size-5 grid place-items-center flex-shrink-0">
-                          <FavoriteFolderIcon />
-                        </div>
-                        <p className="truncate text-sm font-medium text-custom-sidebar-text-200">{favorite.name}</p>
-                      </Disclosure.Button>
+                  </div>
+                </Tooltip>
+                <CustomMenu
+                  customButton={
+                    <span
+                      ref={actionSectionRef}
+                      className="grid place-items-center p-0.5 text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80 rounded"
+                    >
+                      <MoreHorizontal className="size-3" />
+                    </span>
+                  }
+                  menuButtonOnClick={() => setIsMenuActive(!isMenuActive)}
+                  className={cn(
+                    "opacity-0 pointer-events-none flex-shrink-0 group-hover/project-item:opacity-100 group-hover/project-item:pointer-events-auto",
+                    {
+                      "opacity-100 pointer-events-auto": isMenuActive,
+                    }
+                  )}
+                  customButtonClassName="grid place-items-center"
+                  placement="bottom-start"
+                  ariaLabel={t("aria_labels.projects_sidebar.toggle_quick_actions_menu")}
+                >
+                  <CustomMenu.MenuItem onClick={() => handleRemoveFromFavorites(favorite)}>
+                    <span className="flex items-center justify-start gap-2">
+                      <Star className="h-3.5 w-3.5 fill-yellow-500 stroke-yellow-500" />
+                      <span>Remove from favorites</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                  <CustomMenu.MenuItem onClick={() => setFolderToRename(favorite.id)}>
+                    <div className="flex items-center justify-start gap-2">
+                      <PenSquare className="h-3.5 w-3.5 stroke-[1.5] text-custom-text-300" />
+                      <span>Rename Folder</span>
                     </div>
-                  </Tooltip>
-                  <CustomMenu
-                    customButton={
-                      <span
-                        ref={actionSectionRef}
-                        className="grid place-items-center p-0.5 text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80 rounded"
-                      >
-                        <MoreHorizontal className="size-3" />
-                      </span>
+                  </CustomMenu.MenuItem>
+                </CustomMenu>
+                <Disclosure.Button
+                  as="button"
+                  type="button"
+                  className={cn(
+                    "hidden group-hover/project-item:inline-block p-0.5 rounded hover:bg-custom-sidebar-background-80",
+                    {
+                      "inline-block": isMenuActive,
                     }
-                    menuButtonOnClick={() => setIsMenuActive(!isMenuActive)}
-                    className={cn(
-                      "opacity-0 pointer-events-none flex-shrink-0 group-hover/project-item:opacity-100 group-hover/project-item:pointer-events-auto",
-                      {
-                        "opacity-100 pointer-events-auto": isMenuActive,
-                      }
-                    )}
-                    customButtonClassName="grid place-items-center"
-                    placement="bottom-start"
-                    ariaLabel={t("aria_labels.projects_sidebar.toggle_quick_actions_menu")}
-                  >
-                    <CustomMenu.MenuItem onClick={() => handleRemoveFromFavorites(favorite)}>
-                      <span className="flex items-center justify-start gap-2">
-                        <Star className="h-3.5 w-3.5 fill-yellow-500 stroke-yellow-500" />
-                        <span>Remove from favorites</span>
-                      </span>
-                    </CustomMenu.MenuItem>
-                    <CustomMenu.MenuItem onClick={() => setFolderToRename(favorite.id)}>
-                      <div className="flex items-center justify-start gap-2">
-                        <PenSquare className="h-3.5 w-3.5 stroke-[1.5] text-custom-text-300" />
-                        <span>Rename Folder</span>
-                      </div>
-                    </CustomMenu.MenuItem>
-                  </CustomMenu>
-                  <Disclosure.Button
-                    as="button"
-                    type="button"
-                    className={cn(
-                      "hidden group-hover/project-item:inline-block p-0.5 rounded hover:bg-custom-sidebar-background-80",
-                      {
-                        "inline-block": isMenuActive,
-                      }
-                    )}
-                    aria-label={t(
-                      open ? "aria_labels.projects_sidebar.close_folder" : "aria_labels.projects_sidebar.open_folder"
-                    )}
-                  >
-                    <ChevronRight
-                      className={cn("size-3 flex-shrink-0 text-custom-sidebar-text-400 transition-transform", {
-                        "rotate-90": open,
-                      })}
-                    />
-                  </Disclosure.Button>
-                </>
-              )}
+                  )}
+                  aria-label={t(
+                    open ? "aria_labels.projects_sidebar.close_folder" : "aria_labels.projects_sidebar.open_folder"
+                  )}
+                >
+                  <ChevronRight
+                    className={cn("size-3 flex-shrink-0 text-custom-sidebar-text-400 transition-transform", {
+                      "rotate-90": open,
+                    })}
+                  />
+                </Disclosure.Button>
+              </>
             </div>
             {favorite.children && favorite.children.length > 0 && (
               <Transition
@@ -290,12 +265,7 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
                 leaveFrom="transform scale-100 opacity-100"
                 leaveTo="transform scale-95 opacity-0"
               >
-                <Disclosure.Panel
-                  as="div"
-                  className={cn("flex flex-col gap-0.5 mt-1", {
-                    "px-2": !isSidebarCollapsed,
-                  })}
-                >
+                <Disclosure.Panel as="div" className="flex flex-col gap-0.5 mt-1 px-2">
                   {orderBy(favorite.children, "sequence", "desc").map((child, index) => (
                     <FavoriteRoot
                       key={child.id}
diff --git a/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx b/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx
index 847c45f7a0e..59945c9b5a1 100644
--- a/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx
+++ b/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx
@@ -3,7 +3,6 @@ import React, { FC } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { Tooltip } from "@plane/ui";
-import { cn } from "@plane/utils";
 import { useAppTheme } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
@@ -11,28 +10,23 @@ type Props = {
   href: string;
   title: string;
   icon: JSX.Element;
-  isSidebarCollapsed: boolean;
 };
 
 export const FavoriteItemTitle: FC<Props> = observer((props) => {
-  const { href, title, icon, isSidebarCollapsed } = props;
+  const { href, title, icon } = props;
   // store hooks
   const { toggleSidebar } = useAppTheme();
   const { isMobile } = usePlatformOS();
 
-  const linkClass = "flex items-center gap-1.5 truncate w-full";
-  const collapsedClass =
-    "group/project-item cursor-pointer relative group w-full flex items-center justify-center gap-1.5 rounded px-2 py-1 outline-none text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-90 active:bg-custom-sidebar-background-90 truncate p-0 size-8 aspect-square mx-auto";
-
   const handleOnClick = () => {
     if (isMobile) toggleSidebar();
   };
 
   return (
-    <Tooltip tooltipContent={title} isMobile={isMobile} position="right" className={cn(!isSidebarCollapsed && "ml-8")}>
-      <Link href={href} className={isSidebarCollapsed ? collapsedClass : linkClass} draggable onClick={handleOnClick}>
+    <Tooltip tooltipContent={title} isMobile={isMobile} position="right" className="ml-8">
+      <Link href={href} className="flex items-center gap-1.5 truncate w-full" draggable onClick={handleOnClick}>
         <span className="flex items-center justify-center size-5">{icon}</span>
-        {!isSidebarCollapsed && <span className="text-sm leading-5 font-medium flex-1 truncate">{title}</span>}
+        <span className="text-sm leading-5 font-medium flex-1 truncate">{title}</span>
       </Link>
     </Tooltip>
   );
diff --git a/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-wrapper.tsx b/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-wrapper.tsx
index f1ffde408ca..e97b2b95ed1 100644
--- a/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-wrapper.tsx
+++ b/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-wrapper.tsx
@@ -7,28 +7,23 @@ type Props = {
   children: React.ReactNode;
   elementRef: React.RefObject<HTMLDivElement>;
   isMenuActive?: boolean;
-  sidebarCollapsed?: boolean;
 };
 
 export const FavoriteItemWrapper: FC<Props> = (props) => {
-  const { children, elementRef, isMenuActive = false, sidebarCollapsed = false } = props;
+  const { children, elementRef, isMenuActive = false } = props;
   return (
     <>
-      {sidebarCollapsed ? (
-        <div ref={elementRef}>{children}</div>
-      ) : (
-        <div
-          ref={elementRef}
-          className={cn(
-            "group/project-item cursor-pointer relative group flex items-center justify-between w-full gap-1.5 rounded px-2 py-1 outline-none text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-90 active:bg-custom-sidebar-background-90",
-            {
-              "bg-custom-sidebar-background-90": isMenuActive,
-            }
-          )}
-        >
-          {children}
-        </div>
-      )}
+      <div
+        ref={elementRef}
+        className={cn(
+          "group/project-item cursor-pointer relative group flex items-center justify-between w-full gap-1.5 rounded px-2 py-1 outline-none text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-90 active:bg-custom-sidebar-background-90",
+          {
+            "bg-custom-sidebar-background-90": isMenuActive,
+          }
+        )}
+      >
+        {children}
+      </div>
     </>
   );
 };
diff --git a/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx b/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx
index 49931802e84..1b5c9436e4c 100644
--- a/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx
+++ b/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx
@@ -27,7 +27,6 @@ import {
   FavoriteItemTitle,
 } from "@/components/workspace/sidebar/favorites";
 // hooks
-import { useAppTheme } from "@/hooks/store";
 import { useFavoriteItemDetails } from "@/hooks/use-favorite-item-details";
 //helpers
 import { getCanDrop, getInstructionFromPayload } from "../favorites.helpers";
@@ -45,7 +44,6 @@ export const FavoriteRoot: FC<Props> = observer((props) => {
   // props
   const { isLastChild, parentId, workspaceSlug, favorite, handleRemoveFromFavorites, handleDrop } = props;
   // store hooks
-  const { sidebarCollapsed } = useAppTheme();
   const { itemLink, itemIcon, itemTitle } = useFavoriteItemDetails(workspaceSlug, favorite);
   //state
   const [isDragging, setIsDragging] = useState(false);
@@ -82,12 +80,7 @@ export const FavoriteRoot: FC<Props> = observer((props) => {
               const root = createRoot(container);
               root.render(
                 <div className="rounded bg-custom-background-100 text-sm p-1 pr-2">
-                  <FavoriteItemTitle
-                    href={itemLink}
-                    icon={itemIcon}
-                    title={itemTitle}
-                    isSidebarCollapsed={!!sidebarCollapsed}
-                  />
+                  <FavoriteItemTitle href={itemLink} icon={itemIcon} title={itemTitle} />
                 </div>
               );
               return () => root.unmount();
@@ -138,18 +131,16 @@ export const FavoriteRoot: FC<Props> = observer((props) => {
   return (
     <>
       <DropIndicator isVisible={instruction === "reorder-above"} />
-      <FavoriteItemWrapper elementRef={elementRef} isMenuActive={isMenuActive} sidebarCollapsed={sidebarCollapsed}>
-        {!sidebarCollapsed && <FavoriteItemDragHandle isDragging={isDragging} sort_order={favorite.sort_order} />}
-        <FavoriteItemTitle href={itemLink} icon={itemIcon} title={itemTitle} isSidebarCollapsed={!!sidebarCollapsed} />
-        {!sidebarCollapsed && (
-          <FavoriteItemQuickAction
-            favorite={favorite}
-            ref={actionSectionRef}
-            isMenuActive={isMenuActive}
-            onChange={handleQuickAction}
-            handleRemoveFromFavorites={handleRemoveFromFavorites}
-          />
-        )}
+      <FavoriteItemWrapper elementRef={elementRef} isMenuActive={isMenuActive}>
+        <FavoriteItemDragHandle isDragging={isDragging} sort_order={favorite.sort_order} />
+        <FavoriteItemTitle href={itemLink} icon={itemIcon} title={itemTitle} />
+        <FavoriteItemQuickAction
+          favorite={favorite}
+          ref={actionSectionRef}
+          isMenuActive={isMenuActive}
+          onChange={handleQuickAction}
+          handleRemoveFromFavorites={handleRemoveFromFavorites}
+        />
       </FavoriteItemWrapper>
       {isLastChild && <DropIndicator isVisible={instruction === "reorder-below"} />}
     </>
diff --git a/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx b/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx
index f83f0ed061b..de2194cdf3d 100644
--- a/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx
+++ b/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx
@@ -23,10 +23,8 @@ import { setToast, TOAST_TYPE, Tooltip } from "@plane/ui";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
-import { useAppTheme } from "@/hooks/store";
 import { useFavorite } from "@/hooks/store/use-favorite";
 import useLocalStorage from "@/hooks/use-local-storage";
-import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web components
 import { FavoriteFolder } from "./favorite-folder";
 import { FavoriteRoot } from "./favorite-items";
@@ -40,19 +38,10 @@ export const SidebarFavoritesMenu = observer(() => {
   // navigation
   const { workspaceSlug } = useParams();
   // store hooks
-  const { sidebarCollapsed } = useAppTheme();
-  const {
-    favoriteIds,
-    groupedFavorites,
-    deleteFavorite,
-    removeFromFavoriteFolder,
-    reOrderFavorite,
-    moveFavoriteToFolder,
-  } = useFavorite();
+  const { groupedFavorites, deleteFavorite, removeFromFavoriteFolder, reOrderFavorite, moveFavoriteToFolder } =
+    useFavorite();
   // translation
   const { t } = useTranslation();
-  // platform hooks
-  const { isMobile } = usePlatformOS();
   // local storage
   const { setValue: toggleFavoriteMenu, storedValue } = useLocalStorage<boolean>(IS_FAVORITE_MENU_OPEN, false);
   // derived values
@@ -154,10 +143,6 @@ export const SidebarFavoritesMenu = observer(() => {
     [workspaceSlug, reOrderFavorite, t]
   );
 
-  useEffect(() => {
-    if (sidebarCollapsed) toggleFavoriteMenu(true);
-  }, [sidebarCollapsed, toggleFavoriteMenu]);
-
   useEffect(() => {
     const element = elementRef.current;
 
@@ -189,27 +174,48 @@ export const SidebarFavoritesMenu = observer(() => {
   return (
     <>
       <Disclosure as="div" defaultOpen ref={containerRef}>
-        {!sidebarCollapsed && (
-          <div
-            ref={elementRef}
+        <div
+          ref={elementRef}
+          className={cn(
+            "group/favorites-button w-full flex items-center justify-between px-2 py-1.5 rounded text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-90"
+          )}
+        >
+          <Disclosure.Button
+            as="button"
+            type="button"
             className={cn(
-              "group/favorites-button w-full flex items-center justify-between px-2 py-1.5 rounded text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-90",
+              "w-full flex items-center gap-1 whitespace-nowrap text-left text-sm font-semibold text-custom-sidebar-text-400",
               {
-                "p-0 justify-center w-fit mx-auto bg-custom-sidebar-background-90 hover:bg-custom-sidebar-background-80":
-                  sidebarCollapsed,
+                "bg-custom-sidebar-background-80 opacity-60": isDragging,
               }
             )}
+            onClick={() => toggleFavoriteMenu(!isFavoriteMenuOpen)}
+            aria-label={t(
+              isFavoriteMenuOpen
+                ? "aria_labels.projects_sidebar.close_favorites_menu"
+                : "aria_labels.projects_sidebar.open_favorites_menu"
+            )}
           >
+            <span className="text-sm font-semibold">{t("favorites")}</span>
+          </Disclosure.Button>
+          <div className="flex items-center opacity-0 pointer-events-none group-hover/favorites-button:opacity-100 group-hover/favorites-button:pointer-events-auto">
+            <Tooltip tooltipHeading={t("create_folder")} tooltipContent="">
+              <button
+                type="button"
+                className="p-0.5 rounded hover:bg-custom-sidebar-background-80 flex-shrink-0 grid place-items-center"
+                onClick={() => {
+                  setCreateNewFolder(true);
+                  if (!isFavoriteMenuOpen) toggleFavoriteMenu(!isFavoriteMenuOpen);
+                }}
+                aria-label={t("aria_labels.projects_sidebar.create_favorites_folder")}
+              >
+                <FolderPlus className="size-3" />
+              </button>
+            </Tooltip>
             <Disclosure.Button
               as="button"
               type="button"
-              className={cn(
-                "w-full flex items-center gap-1 whitespace-nowrap text-left text-sm font-semibold text-custom-sidebar-text-400",
-                {
-                  "!text-center w-8 px-2 py-1.5 justify-center": sidebarCollapsed,
-                  "bg-custom-sidebar-background-80 opacity-60": isDragging,
-                }
-              )}
+              className="p-0.5 rounded hover:bg-custom-sidebar-background-80 flex-shrink-0 grid place-items-center"
               onClick={() => toggleFavoriteMenu(!isFavoriteMenuOpen)}
               aria-label={t(
                 isFavoriteMenuOpen
@@ -217,42 +223,14 @@ export const SidebarFavoritesMenu = observer(() => {
                   : "aria_labels.projects_sidebar.open_favorites_menu"
               )}
             >
-              <span className="text-sm font-semibold">{t("favorites")}</span>
+              <ChevronRight
+                className={cn("flex-shrink-0 size-3 transition-all", {
+                  "rotate-90": isFavoriteMenuOpen,
+                })}
+              />
             </Disclosure.Button>
-            <div className="flex items-center opacity-0 pointer-events-none group-hover/favorites-button:opacity-100 group-hover/favorites-button:pointer-events-auto">
-              <Tooltip tooltipHeading={t("create_folder")} tooltipContent="">
-                <button
-                  type="button"
-                  className="p-0.5 rounded hover:bg-custom-sidebar-background-80 flex-shrink-0 grid place-items-center"
-                  onClick={() => {
-                    setCreateNewFolder(true);
-                    if (!isFavoriteMenuOpen) toggleFavoriteMenu(!isFavoriteMenuOpen);
-                  }}
-                  aria-label={t("aria_labels.projects_sidebar.create_favorites_folder")}
-                >
-                  <FolderPlus className="size-3" />
-                </button>
-              </Tooltip>
-              <Disclosure.Button
-                as="button"
-                type="button"
-                className="p-0.5 rounded hover:bg-custom-sidebar-background-80 flex-shrink-0 grid place-items-center"
-                onClick={() => toggleFavoriteMenu(!isFavoriteMenuOpen)}
-                aria-label={t(
-                  isFavoriteMenuOpen
-                    ? "aria_labels.projects_sidebar.close_favorites_menu"
-                    : "aria_labels.projects_sidebar.open_favorites_menu"
-                )}
-              >
-                <ChevronRight
-                  className={cn("flex-shrink-0 size-3 transition-all", {
-                    "rotate-90": isFavoriteMenuOpen,
-                  })}
-                />
-              </Disclosure.Button>
-            </div>
           </div>
-        )}
+        </div>
         <Transition
           show={isFavoriteMenuOpen}
           enter="transition duration-100 ease-out"
@@ -263,55 +241,34 @@ export const SidebarFavoritesMenu = observer(() => {
           leaveTo="transform scale-95 opacity-0"
         >
           {isFavoriteMenuOpen && (
-            <Disclosure.Panel
-              as="div"
-              className={cn("flex flex-col mt-0.5 gap-0.5", {
-                "space-y-0 mt-0 ml-0": sidebarCollapsed,
-              })}
-              static
-            >
+            <Disclosure.Panel as="div" className="flex flex-col mt-0.5 gap-0.5" static>
               {createNewFolder && <NewFavoriteFolder setCreateNewFolder={setCreateNewFolder} actionType="create" />}
               {Object.keys(groupedFavorites).length === 0 ? (
                 <>
-                  {!sidebarCollapsed && (
-                    <span className="text-custom-text-400 text-xs font-medium px-8 py-1.5">
-                      {t("no_favorites_yet")}
-                    </span>
-                  )}
+                  <span className="text-custom-text-400 text-xs font-medium px-8 py-1.5">{t("no_favorites_yet")}</span>
                 </>
               ) : (
                 orderBy(Object.values(groupedFavorites), "sequence", "desc")
                   .filter((fav) => !fav.parent)
                   .map((fav, index, { length }) => (
                     <>
-                      {fav?.id && (
-                        <Tooltip
-                          key={fav?.id}
-                          tooltipContent={fav?.entity_data ? fav?.entity_data?.name : fav?.name}
-                          position="right"
-                          className="ml-2"
-                          disabled={!sidebarCollapsed}
-                          isMobile={isMobile}
-                        >
-                          {fav?.is_folder ? (
-                            <FavoriteFolder
-                              favorite={fav}
-                              isLastChild={index === length - 1}
-                              handleRemoveFromFavorites={handleRemoveFromFavorites}
-                              handleRemoveFromFavoritesFolder={handleRemoveFromFavoritesFolder}
-                              handleDrop={handleDrop}
-                            />
-                          ) : (
-                            <FavoriteRoot
-                              workspaceSlug={workspaceSlug.toString()}
-                              favorite={fav}
-                              isLastChild={index === length - 1}
-                              parentId={undefined}
-                              handleRemoveFromFavorites={handleRemoveFromFavorites}
-                              handleDrop={handleDrop}
-                            />
-                          )}
-                        </Tooltip>
+                      {fav?.is_folder ? (
+                        <FavoriteFolder
+                          favorite={fav}
+                          isLastChild={index === length - 1}
+                          handleRemoveFromFavorites={handleRemoveFromFavorites}
+                          handleRemoveFromFavoritesFolder={handleRemoveFromFavoritesFolder}
+                          handleDrop={handleDrop}
+                        />
+                      ) : (
+                        <FavoriteRoot
+                          workspaceSlug={workspaceSlug.toString()}
+                          favorite={fav}
+                          isLastChild={index === length - 1}
+                          parentId={undefined}
+                          handleRemoveFromFavorites={handleRemoveFromFavorites}
+                          handleDrop={handleDrop}
+                        />
                       )}
                     </>
                   ))
@@ -320,10 +277,6 @@ export const SidebarFavoritesMenu = observer(() => {
           )}
         </Transition>
       </Disclosure>
-
-      {sidebarCollapsed && favoriteIds.length > 0 && (
-        <hr className="flex-shrink-0 border-custom-sidebar-border-300 h-[0.5px] w-3/5 mx-auto my-1" />
-      )}
     </>
   );
 });
diff --git a/web/core/components/workspace/sidebar/help-section.tsx b/web/core/components/workspace/sidebar/help-section.tsx
index 9c1b98fe8be..b4673dad5b9 100644
--- a/web/core/components/workspace/sidebar/help-section.tsx
+++ b/web/core/components/workspace/sidebar/help-section.tsx
@@ -26,7 +26,7 @@ export const SidebarHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(
   const { workspaceSlug, projectId } = useParams();
   // store hooks
   const { t } = useTranslation();
-  const { sidebarCollapsed, toggleSidebar } = useAppTheme();
+  const { sidebarCollapsed: isCollapsed, toggleSidebar, sidebarPeek, toggleSidebarPeek } = useAppTheme();
   const { toggleShortcutModal } = useCommandPalette();
   const { isMobile } = usePlatformOS();
   const { config } = useInstance();
@@ -40,22 +40,11 @@ export const SidebarHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(
     toggleIntercom(!isIntercomToggle);
   };
 
-  const isCollapsed = sidebarCollapsed || false;
-
   return (
     <>
       <ProductUpdatesModal isOpen={isProductUpdatesModalOpen} handleClose={() => setProductUpdatesModalOpen(false)} />
-      <div
-        className={cn(
-          "flex w-full items-center justify-between px-2 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 h-12 flex-shrink-0",
-          {
-            "flex-col h-auto py-1.5": isCollapsed,
-          }
-        )}
-      >
-        <div
-          className={`relative flex flex-shrink-0 items-center gap-1 ${isCollapsed ? "flex-col justify-center" : "justify-evenly"}`}
-        >
+      <div className="flex w-full items-center justify-between px-2 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 h-12 flex-shrink-0">
+        <div className="relative flex flex-shrink-0 items-center gap-1 justify-evenly">
           <CustomMenu
             customButton={
               <div
@@ -71,10 +60,10 @@ export const SidebarHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(
                 </Tooltip>
               </div>
             }
-            customButtonClassName={`relative grid place-items-center rounded-md p-1.5 outline-none ${isCollapsed ? "w-full" : ""}`}
+            customButtonClassName="relative grid place-items-center rounded-md p-1.5 outline-none"
             menuButtonOnClick={() => !isNeedHelpOpen && setIsNeedHelpOpen(true)}
             onMenuClose={() => setIsNeedHelpOpen(false)}
-            placement={isCollapsed ? "left-end" : "top-end"}
+            placement="top-end"
             maxHeight="lg"
             closeOnSelect
           >
@@ -158,23 +147,18 @@ export const SidebarHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(
             </div>
           </CustomMenu>
         </div>
-        <div
-          className={cn("w-full flex-grow px-0.5", {
-            hidden: isCollapsed,
-          })}
-        >
+        <div className="w-full flex-grow px-0.5">
           <WorkspaceEditionBadge />
         </div>
-        <div
-          className={`flex flex-shrink-0 items-center gap-1 ${isCollapsed ? "flex-col justify-center" : "justify-evenly"}`}
-        >
+        <div className="flex flex-shrink-0 items-center gap-1 justify-evenly">
           <Tooltip tooltipContent={`${isCollapsed ? "Expand" : "Hide"}`} isMobile={isMobile}>
             <button
               type="button"
-              className={`grid place-items-center rounded-md p-1 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
-                isCollapsed ? "w-full" : ""
-              }`}
-              onClick={() => toggleSidebar()}
+              className="grid place-items-center rounded-md p-1 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100"
+              onClick={() => {
+                if (sidebarPeek) toggleSidebarPeek(false);
+                toggleSidebar();
+              }}
               aria-label={t(
                 isCollapsed
                   ? "aria_labels.projects_sidebar.expand_sidebar"
diff --git a/web/core/components/workspace/sidebar/project-navigation.tsx b/web/core/components/workspace/sidebar/project-navigation.tsx
index f4add66e683..d60c324bfe6 100644
--- a/web/core/components/workspace/sidebar/project-navigation.tsx
+++ b/web/core/components/workspace/sidebar/project-navigation.tsx
@@ -8,13 +8,11 @@ import { FileText, Layers } from "lucide-react";
 import { EUserPermissionsLevel, EUserPermissions, EUserProjectRoles } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // plane ui
-import { Tooltip, DiceIcon, ContrastIcon, LayersIcon, Intake } from "@plane/ui";
+import { DiceIcon, ContrastIcon, LayersIcon, Intake } from "@plane/ui";
 // components
 import { SidebarNavItem } from "@/components/sidebar";
 // hooks
 import { useAppTheme, useIssueDetail, useProject, useUserPermissions } from "@/hooks/store";
-import { usePlatformOS } from "@/hooks/use-platform-os";
-// plane-web constants
 
 export type TNavigationItem = {
   name: string;
@@ -31,17 +29,15 @@ type TProjectItemsProps = {
   workspaceSlug: string;
   projectId: string;
   additionalNavigationItems?: (workspaceSlug: string, projectId: string) => TNavigationItem[];
-  isSidebarCollapsed: boolean;
 };
 
 export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
-  const { workspaceSlug, projectId, additionalNavigationItems, isSidebarCollapsed } = props;
+  const { workspaceSlug, projectId, additionalNavigationItems } = props;
   const { workItem: workItemIdentifierFromRoute } = useParams();
   // store hooks
   const { t } = useTranslation();
   const { toggleSidebar } = useAppTheme();
   const { getPartialProjectById } = useProject();
-  const { isMobile } = usePlatformOS();
   const { allowPermissions } = useUserPermissions();
   const {
     issue: { getIssueIdByIdentifier, getIssueById },
@@ -175,28 +171,18 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
         if (!hasAccess) return null;
 
         return (
-          <Tooltip
-            key={item.name}
-            isMobile={isMobile}
-            tooltipContent={`${project?.name}: ${t(item.i18n_key)}`}
-            position="right"
-            className="ml-2"
-            disabled={!isSidebarCollapsed}
-          >
+          <>
             <Link href={item.href} onClick={handleProjectClick}>
-              <SidebarNavItem
-                className={`pl-[18px] ${isSidebarCollapsed ? "p-0 size-7 justify-center mx-auto" : ""}`}
-                isActive={!!isActive(item)}
-              >
+              <SidebarNavItem className="pl-[18px]" isActive={!!isActive(item)}>
                 <div className="flex items-center gap-1.5 py-[1px]">
                   <item.icon
                     className={`flex-shrink-0 size-4 ${item.name === "Intake" ? "stroke-1" : "stroke-[1.5]"}`}
                   />
-                  {!isSidebarCollapsed && <span className="text-xs font-medium">{t(item.i18n_key)}</span>}
+                  <span className="text-xs font-medium">{t(item.i18n_key)}</span>
                 </div>
               </SidebarNavItem>
             </Link>
-          </Tooltip>
+          </>
         );
       })}
     </>
diff --git a/web/core/components/workspace/sidebar/projects-list-item.tsx b/web/core/components/workspace/sidebar/projects-list-item.tsx
index 097b3da54e1..70d24285832 100644
--- a/web/core/components/workspace/sidebar/projects-list-item.tsx
+++ b/web/core/components/workspace/sidebar/projects-list-item.tsx
@@ -24,7 +24,7 @@ import { LeaveProjectModal, PublishProjectModal } from "@/components/project";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
-import { useAppTheme, useCommandPalette, useEventTracker, useProject, useUserPermissions } from "@/hooks/store";
+import { useCommandPalette, useEventTracker, useProject, useUserPermissions } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane-web components
 import { ProjectNavigationRoot } from "@/plane-web/components/sidebar";
@@ -58,7 +58,6 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
     renderInExtendedSidebar = false,
   } = props;
   // store hooks
-  const { sidebarCollapsed } = useAppTheme();
   const { t } = useTranslation();
   const { setTrackElement } = useEventTracker();
   const { getPartialProjectById } = useProject();
@@ -101,8 +100,6 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
     setLeaveProjectModal(true);
   };
 
-  const isSidebarCollapsed = sidebarCollapsed && !renderInExtendedSidebar;
-
   useEffect(() => {
     const element = projectRef.current;
     const dragHandleElement = dragHandleRef.current;
@@ -112,7 +109,7 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
     return combine(
       draggable({
         element,
-        canDrag: () => !disableDrag && !isSidebarCollapsed,
+        canDrag: () => !disableDrag,
         dragHandle: dragHandleElement ?? undefined,
         getInitialData: () => ({ id: projectId, dragInstanceId: "PROJECTS" }),
         onDragStart: () => {
@@ -220,7 +217,6 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
               "group/project-item relative w-full px-2 py-1.5 flex items-center rounded-md text-custom-sidebar-text-100 hover:bg-custom-sidebar-background-90",
               {
                 "bg-custom-sidebar-background-90": isMenuActive,
-                "p-0 size-8 aspect-square justify-center mx-auto": isSidebarCollapsed,
               }
             )}
             id={`${project?.id}`}
@@ -242,7 +238,6 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
                       "cursor-not-allowed opacity-60": project.sort_order === null,
                       "cursor-grabbing": isDragging,
                       flex: isMenuActive || renderInExtendedSidebar,
-                      "!hidden": isSidebarCollapsed,
                     }
                   )}
                   ref={dragHandleRef}
@@ -251,76 +246,52 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
                 </button>
               </Tooltip>
             )}
-            {isSidebarCollapsed ? (
+            <>
               <ControlLink
                 href={`/${workspaceSlug}/projects/${project.id}/issues`}
-                className={cn("flex-grow flex items-center gap-1.5 truncate text-left select-none", {
-                  "justify-center": isSidebarCollapsed,
-                })}
+                className="flex-grow flex truncate"
                 onClick={handleItemClick}
               >
-                <Disclosure.Button as="button" className="size-8 aspect-square flex-shrink-0 grid place-items-center">
+                <Disclosure.Button
+                  as="button"
+                  type="button"
+                  className={cn("flex-grow flex items-center gap-1.5 text-left select-none w-full", {})}
+                  aria-label={
+                    isProjectListOpen
+                      ? t("aria_labels.projects_sidebar.close_project_menu")
+                      : t("aria_labels.projects_sidebar.open_project_menu")
+                  }
+                >
                   <div className="size-4 grid place-items-center flex-shrink-0">
                     <Logo logo={project.logo_props} size={16} />
                   </div>
+                  <p className="truncate text-sm font-medium text-custom-sidebar-text-200">{project.name}</p>
                 </Disclosure.Button>
               </ControlLink>
-            ) : (
-              <>
-                <Tooltip
-                  tooltipContent={`${project.name}`}
-                  position="right"
-                  disabled={!isSidebarCollapsed}
-                  isMobile={isMobile}
-                >
-                  <ControlLink
-                    href={`/${workspaceSlug}/projects/${project.id}/issues`}
-                    className="flex-grow flex truncate"
-                    onClick={handleItemClick}
+              <CustomMenu
+                customButton={
+                  <span
+                    ref={actionSectionRef}
+                    className="grid place-items-center p-0.5 text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80 rounded"
+                    onClick={() => setIsMenuActive(!isMenuActive)}
                   >
-                    <Disclosure.Button
-                      as="button"
-                      type="button"
-                      className={cn("flex-grow flex items-center gap-1.5 text-left select-none w-full", {
-                        "justify-center": isSidebarCollapsed,
-                      })}
-                      aria-label={
-                        isProjectListOpen
-                          ? t("aria_labels.projects_sidebar.close_project_menu")
-                          : t("aria_labels.projects_sidebar.open_project_menu")
-                      }
-                    >
-                      <div className="size-4 grid place-items-center flex-shrink-0">
-                        <Logo logo={project.logo_props} size={16} />
-                      </div>
-                      <p className="truncate text-sm font-medium text-custom-sidebar-text-200">{project.name}</p>
-                    </Disclosure.Button>
-                  </ControlLink>
-                </Tooltip>
-                <CustomMenu
-                  customButton={
-                    <span
-                      ref={actionSectionRef}
-                      className="grid place-items-center p-0.5 text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80 rounded"
-                      onClick={() => setIsMenuActive(!isMenuActive)}
-                    >
-                      <MoreHorizontal className="size-4" />
-                    </span>
+                    <MoreHorizontal className="size-4" />
+                  </span>
+                }
+                className={cn(
+                  "opacity-0 pointer-events-none flex-shrink-0 group-hover/project-item:opacity-100 group-hover/project-item:pointer-events-auto",
+                  {
+                    "opacity-100 pointer-events-auto": isMenuActive,
                   }
-                  className={cn(
-                    "opacity-0 pointer-events-none flex-shrink-0 group-hover/project-item:opacity-100 group-hover/project-item:pointer-events-auto",
-                    {
-                      "opacity-100 pointer-events-auto": isMenuActive,
-                    }
-                  )}
-                  customButtonClassName="grid place-items-center"
-                  placement="bottom-start"
-                  ariaLabel={t("aria_labels.projects_sidebar.toggle_quick_actions_menu")}
-                  useCaptureForOutsideClick
-                  closeOnSelect
-                >
-                  {/* TODO: Removed is_favorite logic due to the optimization in projects API */}
-                  {/* {isAuthorized && (
+                )}
+                customButtonClassName="grid place-items-center"
+                placement="bottom-start"
+                ariaLabel={t("aria_labels.projects_sidebar.toggle_quick_actions_menu")}
+                useCaptureForOutsideClick
+                closeOnSelect
+              >
+                {/* TODO: Removed is_favorite logic due to the optimization in projects API */}
+                {/* {isAuthorized && (
                     <CustomMenu.MenuItem
                       onClick={project.is_favorite ? handleRemoveFromFavorites : handleAddToFavorites}
                     >
@@ -335,79 +306,78 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
                     </CustomMenu.MenuItem>
                   )} */}
 
-                  {/* publish project settings */}
-                  {isAdmin && (
-                    <CustomMenu.MenuItem onClick={() => setPublishModal(true)}>
-                      <div className="relative flex flex-shrink-0 items-center justify-start gap-2">
-                        <div className="flex h-4 w-4 cursor-pointer items-center justify-center rounded text-custom-sidebar-text-200 transition-all duration-300 hover:bg-custom-sidebar-background-80">
-                          <Share2 className="h-3.5 w-3.5 stroke-[1.5]" />
-                        </div>
-                        <div>{t("publish_project")}</div>
+                {/* publish project settings */}
+                {isAdmin && (
+                  <CustomMenu.MenuItem onClick={() => setPublishModal(true)}>
+                    <div className="relative flex flex-shrink-0 items-center justify-start gap-2">
+                      <div className="flex h-4 w-4 cursor-pointer items-center justify-center rounded text-custom-sidebar-text-200 transition-all duration-300 hover:bg-custom-sidebar-background-80">
+                        <Share2 className="h-3.5 w-3.5 stroke-[1.5]" />
                       </div>
-                    </CustomMenu.MenuItem>
-                  )}
-                  <CustomMenu.MenuItem onClick={handleCopyText}>
-                    <span className="flex items-center justify-start gap-2">
-                      <LinkIcon className="h-3.5 w-3.5 stroke-[1.5]" />
-                      <span>{t("copy_link")}</span>
-                    </span>
+                      <div>{t("publish_project")}</div>
+                    </div>
                   </CustomMenu.MenuItem>
-                  {isAuthorized && (
-                    <CustomMenu.MenuItem>
-                      <Link href={`/${workspaceSlug}/projects/${project?.id}/archives/issues`}>
-                        <div className="flex items-center justify-start gap-2">
-                          <ArchiveIcon className="h-3.5 w-3.5 stroke-[1.5]" />
-                          <span>{t("archives")}</span>
-                        </div>
-                      </Link>
-                    </CustomMenu.MenuItem>
-                  )}
-                  <CustomMenu.MenuItem
-                    onClick={() => {
-                      setIsMenuActive(false);
-                    }}
-                  >
-                    <Link href={`/${workspaceSlug}/settings/projects/${project?.id}`}>
+                )}
+                <CustomMenu.MenuItem onClick={handleCopyText}>
+                  <span className="flex items-center justify-start gap-2">
+                    <LinkIcon className="h-3.5 w-3.5 stroke-[1.5]" />
+                    <span>{t("copy_link")}</span>
+                  </span>
+                </CustomMenu.MenuItem>
+                {isAuthorized && (
+                  <CustomMenu.MenuItem>
+                    <Link href={`/${workspaceSlug}/projects/${project?.id}/archives/issues`}>
                       <div className="flex items-center justify-start gap-2">
-                        <Settings className="h-3.5 w-3.5 stroke-[1.5]" />
-                        <span>{t("settings")}</span>
+                        <ArchiveIcon className="h-3.5 w-3.5 stroke-[1.5]" />
+                        <span>{t("archives")}</span>
                       </div>
                     </Link>
                   </CustomMenu.MenuItem>
-                  {/* leave project */}
-                  {!isAuthorized && (
-                    <CustomMenu.MenuItem onClick={handleLeaveProject}>
-                      <div className="flex items-center justify-start gap-2">
-                        <LogOut className="h-3.5 w-3.5 stroke-[1.5]" />
-                        <span>{t("leave_project")}</span>
-                      </div>
-                    </CustomMenu.MenuItem>
-                  )}
-                </CustomMenu>
-                <Disclosure.Button
-                  as="button"
-                  type="button"
-                  className={cn(
-                    "hidden group-hover/project-item:inline-block p-0.5 rounded hover:bg-custom-sidebar-background-80",
-                    {
-                      "inline-block": isMenuActive,
-                    }
-                  )}
-                  onClick={() => setIsProjectListOpen(!isProjectListOpen)}
-                  aria-label={t(
-                    isProjectListOpen
-                      ? "aria_labels.projects_sidebar.close_project_menu"
-                      : "aria_labels.projects_sidebar.open_project_menu"
-                  )}
+                )}
+                <CustomMenu.MenuItem
+                  onClick={() => {
+                    setIsMenuActive(false);
+                  }}
                 >
-                  <ChevronRight
-                    className={cn("size-4 flex-shrink-0 text-custom-sidebar-text-400 transition-transform", {
-                      "rotate-90": isProjectListOpen,
-                    })}
-                  />
-                </Disclosure.Button>
-              </>
-            )}
+                  <Link href={`/${workspaceSlug}/settings/projects/${project?.id}`}>
+                    <div className="flex items-center justify-start gap-2">
+                      <Settings className="h-3.5 w-3.5 stroke-[1.5]" />
+                      <span>{t("settings")}</span>
+                    </div>
+                  </Link>
+                </CustomMenu.MenuItem>
+                {/* leave project */}
+                {!isAuthorized && (
+                  <CustomMenu.MenuItem onClick={handleLeaveProject}>
+                    <div className="flex items-center justify-start gap-2">
+                      <LogOut className="h-3.5 w-3.5 stroke-[1.5]" />
+                      <span>{t("leave_project")}</span>
+                    </div>
+                  </CustomMenu.MenuItem>
+                )}
+              </CustomMenu>
+              <Disclosure.Button
+                as="button"
+                type="button"
+                className={cn(
+                  "hidden group-hover/project-item:inline-block p-0.5 rounded hover:bg-custom-sidebar-background-80",
+                  {
+                    "inline-block": isMenuActive,
+                  }
+                )}
+                onClick={() => setIsProjectListOpen(!isProjectListOpen)}
+                aria-label={t(
+                  isProjectListOpen
+                    ? "aria_labels.projects_sidebar.close_project_menu"
+                    : "aria_labels.projects_sidebar.open_project_menu"
+                )}
+              >
+                <ChevronRight
+                  className={cn("size-4 flex-shrink-0 text-custom-sidebar-text-400 transition-transform", {
+                    "rotate-90": isProjectListOpen,
+                  })}
+                />
+              </Disclosure.Button>
+            </>
           </div>
           <Transition
             show={isProjectListOpen}
@@ -420,11 +390,7 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
           >
             {isProjectListOpen && (
               <Disclosure.Panel as="div" className="flex flex-col gap-0.5 mt-1">
-                <ProjectNavigationRoot
-                  workspaceSlug={workspaceSlug.toString()}
-                  projectId={projectId.toString()}
-                  isSidebarCollapsed={!!isSidebarCollapsed}
-                />
+                <ProjectNavigationRoot workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
               </Disclosure.Panel>
             )}
           </Transition>
diff --git a/web/core/components/workspace/sidebar/projects-list.tsx b/web/core/components/workspace/sidebar/projects-list.tsx
index bea70b0d61b..829c9a30bbc 100644
--- a/web/core/components/workspace/sidebar/projects-list.tsx
+++ b/web/core/components/workspace/sidebar/projects-list.tsx
@@ -5,7 +5,7 @@ import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";
-import { Briefcase, ChevronRight, Plus } from "lucide-react";
+import { ChevronRight, Plus } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
@@ -19,7 +19,7 @@ import { SidebarProjectsListItem } from "@/components/workspace";
 import { cn } from "@/helpers/common.helper";
 import { orderJoinedProjects } from "@/helpers/project.helper";
 // hooks
-import { useAppTheme, useCommandPalette, useEventTracker, useProject, useUserPermissions } from "@/hooks/store";
+import { useCommandPalette, useEventTracker, useProject, useUserPermissions } from "@/hooks/store";
 // plane web types
 import { TProject } from "@/plane-web/types";
 
@@ -34,7 +34,6 @@ export const SidebarProjectsList: FC = observer(() => {
   // store hooks
   const { t } = useTranslation();
   const { toggleCreateProjectModal } = useCommandPalette();
-  const { sidebarCollapsed } = useAppTheme();
   const { setTrackElement } = useEventTracker();
   const { allowPermissions } = useUserPermissions();
 
@@ -89,8 +88,6 @@ export const SidebarProjectsList: FC = observer(() => {
       });
   };
 
-  const isCollapsed = sidebarCollapsed || false;
-
   /**
    * Implementing scroll animation styles based on the scroll length of the container
    */
@@ -154,24 +151,11 @@ export const SidebarProjectsList: FC = observer(() => {
       >
         <>
           <Disclosure as="div" className="flex flex-col" defaultOpen={isAllProjectsListOpen}>
-            <div
-              className={cn(
-                "group w-full flex items-center justify-between px-2 py-1.5 rounded text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-90",
-                {
-                  "p-0 justify-center w-fit mx-auto bg-custom-sidebar-background-90 hover:bg-custom-sidebar-background-80":
-                    isCollapsed,
-                }
-              )}
-            >
+            <div className="group w-full flex items-center justify-between px-2 py-1.5 rounded text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-90">
               <Disclosure.Button
                 as="button"
                 type="button"
-                className={cn(
-                  "w-full flex items-center gap-1 whitespace-nowrap text-left text-sm font-semibold text-custom-sidebar-text-400",
-                  {
-                    "!text-center w-8 px-2 py-1.5 justify-center": isCollapsed,
-                  }
-                )}
+                className="w-full flex items-center gap-1 whitespace-nowrap text-left text-sm font-semibold text-custom-sidebar-text-400"
                 onClick={() => toggleListDisclosure(!isAllProjectsListOpen)}
                 aria-label={t(
                   isAllProjectsListOpen
@@ -179,52 +163,42 @@ export const SidebarProjectsList: FC = observer(() => {
                     : "aria_labels.projects_sidebar.open_projects_menu"
                 )}
               >
-                <Tooltip tooltipHeading={t("projects")} tooltipContent="" position="right" disabled={!isCollapsed}>
-                  <>
-                    {isCollapsed ? (
-                      <Briefcase className="flex-shrink-0 size-3" />
-                    ) : (
-                      <span className="text-sm font-semibold">{t("projects")}</span>
-                    )}
-                  </>
-                </Tooltip>
+                <span className="text-sm font-semibold">{t("projects")}</span>
               </Disclosure.Button>
-              {!isCollapsed && (
-                <div className="flex items-center opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto">
-                  {isAuthorizedUser && (
-                    <Tooltip tooltipHeading={t("create_project")} tooltipContent="">
-                      <button
-                        type="button"
-                        className="p-0.5 rounded hover:bg-custom-sidebar-background-80 flex-shrink-0"
-                        onClick={() => {
-                          setTrackElement(`APP_SIDEBAR_JOINED_BLOCK`);
-                          setIsProjectModalOpen(true);
-                        }}
-                        aria-label={t("aria_labels.projects_sidebar.create_new_project")}
-                      >
-                        <Plus className="size-3" />
-                      </button>
-                    </Tooltip>
+              <div className="flex items-center opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto">
+                {isAuthorizedUser && (
+                  <Tooltip tooltipHeading={t("create_project")} tooltipContent="">
+                    <button
+                      type="button"
+                      className="p-0.5 rounded hover:bg-custom-sidebar-background-80 flex-shrink-0"
+                      onClick={() => {
+                        setTrackElement(`APP_SIDEBAR_JOINED_BLOCK`);
+                        setIsProjectModalOpen(true);
+                      }}
+                      aria-label={t("aria_labels.projects_sidebar.create_new_project")}
+                    >
+                      <Plus className="size-3" />
+                    </button>
+                  </Tooltip>
+                )}
+                <Disclosure.Button
+                  as="button"
+                  type="button"
+                  className="p-0.5 rounded hover:bg-custom-sidebar-background-80 flex-shrink-0"
+                  onClick={() => toggleListDisclosure(!isAllProjectsListOpen)}
+                  aria-label={t(
+                    isAllProjectsListOpen
+                      ? "aria_labels.projects_sidebar.close_projects_menu"
+                      : "aria_labels.projects_sidebar.open_projects_menu"
                   )}
-                  <Disclosure.Button
-                    as="button"
-                    type="button"
-                    className="p-0.5 rounded hover:bg-custom-sidebar-background-80 flex-shrink-0"
-                    onClick={() => toggleListDisclosure(!isAllProjectsListOpen)}
-                    aria-label={t(
-                      isAllProjectsListOpen
-                        ? "aria_labels.projects_sidebar.close_projects_menu"
-                        : "aria_labels.projects_sidebar.open_projects_menu"
-                    )}
-                  >
-                    <ChevronRight
-                      className={cn("flex-shrink-0 size-3 transition-all", {
-                        "rotate-90": isAllProjectsListOpen,
-                      })}
-                    />
-                  </Disclosure.Button>
-                </div>
-              )}
+                >
+                  <ChevronRight
+                    className={cn("flex-shrink-0 size-3 transition-all", {
+                      "rotate-90": isAllProjectsListOpen,
+                    })}
+                  />
+                </Disclosure.Button>
+              </div>
             </div>
             <Transition
               show={isAllProjectsListOpen}
@@ -243,13 +217,7 @@ export const SidebarProjectsList: FC = observer(() => {
                 </Loader>
               )}
               {isAllProjectsListOpen && (
-                <Disclosure.Panel
-                  as="div"
-                  className={cn("flex flex-col gap-0.5", {
-                    "space-y-0 ml-0": isCollapsed,
-                  })}
-                  static
-                >
+                <Disclosure.Panel as="div" className="flex flex-col gap-0.5" static>
                   <>
                     {joinedProjects.map((projectId, index) => (
                       <SidebarProjectsListItem
@@ -273,18 +241,13 @@ export const SidebarProjectsList: FC = observer(() => {
         {isAuthorizedUser && joinedProjects?.length === 0 && (
           <button
             type="button"
-            className={cn(
-              `w-full flex items-center gap-1.5 px-2 py-1.5 text-sm leading-5 font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-90 rounded-md`,
-              {
-                "p-0 size-8 aspect-square justify-center mx-auto": sidebarCollapsed,
-              }
-            )}
+            className="w-full flex items-center gap-1.5 px-2 py-1.5 text-sm leading-5 font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-90 rounded-md"
             onClick={() => {
               setTrackElement("Sidebar");
               toggleCreateProjectModal(true);
             }}
           >
-            {!isCollapsed && t("add_project")}
+            {t("add_project")}
           </button>
         )}
       </div>
diff --git a/web/core/components/workspace/sidebar/quick-actions.tsx b/web/core/components/workspace/sidebar/quick-actions.tsx
index 86ab8960300..b8cb159e13a 100644
--- a/web/core/components/workspace/sidebar/quick-actions.tsx
+++ b/web/core/components/workspace/sidebar/quick-actions.tsx
@@ -12,7 +12,7 @@ import { CreateUpdateIssueModal } from "@/components/issues";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
-import { useAppTheme, useCommandPalette, useEventTracker, useProject, useUserPermissions } from "@/hooks/store";
+import { useCommandPalette, useEventTracker, useProject, useUserPermissions } from "@/hooks/store";
 import useLocalStorage from "@/hooks/use-local-storage";
 // plane web components
 import { AppSearch } from "@/plane-web/components/workspace";
@@ -30,7 +30,6 @@ export const SidebarQuickActions = observer(() => {
   const workspaceSlug = routerWorkspaceSlug?.toString();
   // store hooks
   const { toggleCreateIssueModal } = useCommandPalette();
-  const { sidebarCollapsed: isSidebarCollapsed } = useAppTheme();
   const { setTrackElement } = useEventTracker();
   const { joinedProjectIds } = useProject();
   const { allowPermissions } = useUserPermissions();
@@ -74,19 +73,13 @@ export const SidebarQuickActions = observer(() => {
         onSubmit={() => removeWorkspaceDraftIssue()}
         isDraft
       />
-      <div
-        className={cn("flex items-center justify-between gap-1 cursor-pointer", {
-          "flex-col gap-0": isSidebarCollapsed,
-        })}
-      >
+      <div className={cn("flex items-center justify-between gap-1 cursor-pointer", {})}>
         <button
           type="button"
           className={cn(
-            "relative flex flex-shrink-0 flex-grow items-center gap-2 h-8 text-custom-sidebar-text-300 rounded outline-none hover:bg-custom-sidebar-background-90",
+            "relative flex flex-shrink-0 flex-grow items-center gap-2 h-8 text-custom-sidebar-text-300 rounded outline-none hover:bg-custom-sidebar-background-90 px-3 border-[0.5px] border-custom-sidebar-border-300",
             {
-              "justify-center size-8 aspect-square": isSidebarCollapsed,
               "cursor-not-allowed opacity-50 ": disabled,
-              "px-3 border-[0.5px] border-custom-sidebar-border-300": !isSidebarCollapsed,
             }
           )}
           onClick={() => {
@@ -98,9 +91,7 @@ export const SidebarQuickActions = observer(() => {
           disabled={disabled}
         >
           <PenSquare className="size-4" />
-          {!isSidebarCollapsed && (
-            <span className="text-sm font-medium truncate max-w-[145px]">{t("sidebar.new_work_item")}</span>
-          )}
+          <span className="text-sm font-medium truncate max-w-[145px]">{t("sidebar.new_work_item")}</span>
         </button>
         <AppSearch />
       </div>
diff --git a/web/core/components/workspace/sidebar/sidebar-menu-items.tsx b/web/core/components/workspace/sidebar/sidebar-menu-items.tsx
index 89c0f150eaa..f23cadb382c 100644
--- a/web/core/components/workspace/sidebar/sidebar-menu-items.tsx
+++ b/web/core/components/workspace/sidebar/sidebar-menu-items.tsx
@@ -9,7 +9,6 @@ import {
   WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS_LINKS,
 } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { cn } from "@plane/utils";
 // components
 import { SidebarNavItem } from "@/components/sidebar";
 // store hooks
@@ -21,7 +20,7 @@ export const SidebarMenuItems = observer(() => {
   // routers
   const { workspaceSlug } = useParams();
   // store hooks
-  const { sidebarCollapsed, extendedSidebarCollapsed, toggleExtendedSidebar } = useAppTheme();
+  const { extendedSidebarCollapsed, toggleExtendedSidebar } = useAppTheme();
   const { getNavigationPreferences } = useWorkspace();
   // translation
   const { t } = useTranslation();
@@ -41,24 +40,18 @@ export const SidebarMenuItems = observer(() => {
   );
 
   return (
-    <div
-      className={cn("flex flex-col gap-0.5", {
-        "space-y-0": sidebarCollapsed,
-      })}
-    >
+    <div className="flex flex-col gap-0.5">
       {WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS_LINKS.map((item, _index) => (
         <SidebarItem key={`static_${_index}`} item={item} />
       ))}
       {sortedNavigationItems.map((item, _index) => (
         <SidebarItem key={`dynamic_${_index}`} item={item} />
       ))}
-      <SidebarNavItem className={`${sidebarCollapsed ? "p-0 size-8 aspect-square justify-center mx-auto" : ""}`}>
+      <SidebarNavItem>
         <button
           type="button"
           onClick={() => toggleExtendedSidebar()}
-          className={cn("flex items-center gap-1.5 text-sm font-medium flex-grow text-custom-text-350", {
-            "justify-center": sidebarCollapsed,
-          })}
+          className="flex items-center gap-1.5 text-sm font-medium flex-grow text-custom-text-350"
           id="extended-sidebar-toggle"
           aria-label={t(
             extendedSidebarCollapsed
@@ -67,7 +60,7 @@ export const SidebarMenuItems = observer(() => {
           )}
         >
           <Ellipsis className="flex-shrink-0 size-4" />
-          {!sidebarCollapsed && <span>More</span>}
+          <span>More</span>
         </button>
       </SidebarNavItem>
     </div>
diff --git a/web/core/components/workspace/sidebar/user-menu-item.tsx b/web/core/components/workspace/sidebar/user-menu-item.tsx
index f8f0f120a3a..919ed87d520 100644
--- a/web/core/components/workspace/sidebar/user-menu-item.tsx
+++ b/web/core/components/workspace/sidebar/user-menu-item.tsx
@@ -4,9 +4,7 @@ import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
 // plane imports
 import { EUserPermissionsLevel, SIDEBAR_CLICKED, EUserWorkspaceRoles } from "@plane/constants";
-import { usePlatformOS } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
-import { Tooltip } from "@plane/ui";
 // components
 import { SidebarNavItem } from "@/components/sidebar";
 import { NotificationAppSidebarOption } from "@/components/workspace-notifications";
@@ -35,8 +33,7 @@ export const SidebarUserMenuItem: FC<SidebarUserMenuItemProps> = observer((props
   // store hooks
   const { captureEvent } = useEventTracker();
   const { allowPermissions } = useUserPermissions();
-  const { toggleSidebar, sidebarCollapsed } = useAppTheme();
-  const { isMobile } = usePlatformOS();
+  const { toggleSidebar } = useAppTheme();
 
   const isActive = pathname === item.href;
 
@@ -55,30 +52,14 @@ export const SidebarUserMenuItem: FC<SidebarUserMenuItemProps> = observer((props
   };
 
   return (
-    <Tooltip
-      tooltipContent={t(item.labelTranslationKey)}
-      position="right"
-      className="ml-2"
-      disabled={!sidebarCollapsed}
-      isMobile={isMobile}
-    >
-      <Link href={item.href} onClick={() => handleLinkClick(item.key)}>
-        <SidebarNavItem
-          className={`${sidebarCollapsed ? "p-0 size-8 aspect-square justify-center mx-auto" : ""}`}
-          isActive={isActive}
-        >
-          <div className="flex items-center gap-1.5 py-[1px]">
-            <item.Icon className="size-4 flex-shrink-0" />
-            {!sidebarCollapsed && <p className="text-sm leading-5 font-medium">{t(item.labelTranslationKey)}</p>}
-          </div>
-          {item.key === "notifications" && (
-            <NotificationAppSidebarOption
-              workspaceSlug={workspaceSlug.toString()}
-              isSidebarCollapsed={sidebarCollapsed ?? false}
-            />
-          )}
-        </SidebarNavItem>
-      </Link>
-    </Tooltip>
+    <Link href={item.href} onClick={() => handleLinkClick(item.key)}>
+      <SidebarNavItem isActive={isActive}>
+        <div className="flex items-center gap-1.5 py-[1px]">
+          <item.Icon className="size-4 flex-shrink-0" />
+          <p className="text-sm leading-5 font-medium">{t(item.labelTranslationKey)}</p>
+        </div>
+        {item.key === "notifications" && <NotificationAppSidebarOption workspaceSlug={workspaceSlug.toString()} />}
+      </SidebarNavItem>
+    </Link>
   );
 });
diff --git a/web/core/components/workspace/sidebar/user-menu.tsx b/web/core/components/workspace/sidebar/user-menu.tsx
index 2d625ae6b69..4e0ed5a0682 100644
--- a/web/core/components/workspace/sidebar/user-menu.tsx
+++ b/web/core/components/workspace/sidebar/user-menu.tsx
@@ -9,14 +9,11 @@ import { EUserWorkspaceRoles } from "@plane/constants";
 import { UserActivityIcon } from "@plane/ui";
 // components
 import { SidebarUserMenuItem } from "@/components/workspace/sidebar";
-// helpers
-import { cn } from "@/helpers/common.helper";
 // hooks
-import { useAppTheme, useUserPermissions, useUser } from "@/hooks/store";
+import { useUserPermissions, useUser } from "@/hooks/store";
 
 export const SidebarUserMenu = observer(() => {
   const { workspaceSlug } = useParams();
-  const { sidebarCollapsed } = useAppTheme();
   const { workspaceUserInfo } = useUserPermissions();
   const { data: currentUser } = useUser();
 
@@ -54,11 +51,7 @@ export const SidebarUserMenu = observer(() => {
   const draftIssueCount = workspaceUserInfo[workspaceSlug.toString()]?.draft_issue_count;
 
   return (
-    <div
-      className={cn("flex flex-col gap-0.5", {
-        "space-y-0": sidebarCollapsed,
-      })}
-    >
+    <div className="flex flex-col gap-0.5">
       {SIDEBAR_USER_MENU_ITEMS.map((item) => (
         <SidebarUserMenuItem key={item.key} item={item} draftIssueCount={draftIssueCount} />
       ))}
diff --git a/web/core/components/workspace/sidebar/workspace-menu-header.tsx b/web/core/components/workspace/sidebar/workspace-menu-header.tsx
index 3367a2b347c..5cc4d244870 100644
--- a/web/core/components/workspace/sidebar/workspace-menu-header.tsx
+++ b/web/core/components/workspace/sidebar/workspace-menu-header.tsx
@@ -11,7 +11,7 @@ import { useTranslation } from "@plane/i18n";
 import { CustomMenu } from "@plane/ui";
 import { cn } from "@plane/utils";
 // store hooks
-import { useAppTheme, useUserPermissions } from "@/hooks/store";
+import { useUserPermissions } from "@/hooks/store";
 
 export type SidebarWorkspaceMenuHeaderProps = {
   isWorkspaceMenuOpen: boolean;
@@ -26,7 +26,6 @@ export const SidebarWorkspaceMenuHeader: FC<SidebarWorkspaceMenuHeaderProps> = o
   const actionSectionRef = useRef<HTMLDivElement | null>(null);
   // hooks
   const { workspaceSlug } = useParams();
-  const { sidebarCollapsed } = useAppTheme();
   const { allowPermissions } = useUserPermissions();
   const { t } = useTranslation();
 
@@ -36,19 +35,8 @@ export const SidebarWorkspaceMenuHeader: FC<SidebarWorkspaceMenuHeaderProps> = o
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const isAdmin = allowPermissions([EUserWorkspaceRoles.ADMIN] as any, EUserPermissionsLevel.WORKSPACE);
 
-  if (sidebarCollapsed) {
-    return <></>;
-  }
-
   return (
-    <div
-      className={cn(
-        "flex px-2 bg-custom-sidebar-background-100 group/workspace-button hover:bg-custom-sidebar-background-90 rounded",
-        {
-          "mt-2.5": !sidebarCollapsed,
-        }
-      )}
-    >
+    <div className="flex px-2 bg-custom-sidebar-background-100 group/workspace-button hover:bg-custom-sidebar-background-90 rounded mt-2.5">
       <Disclosure.Button
         as="button"
         className="flex-1 sticky top-0  z-10  w-full  py-1.5 flex items-center justify-between gap-1 text-custom-sidebar-text-400  text-sm font-semibold"
diff --git a/web/core/components/workspace/sidebar/workspace-menu-item.tsx b/web/core/components/workspace/sidebar/workspace-menu-item.tsx
index 6b06390e462..be7b42479fa 100644
--- a/web/core/components/workspace/sidebar/workspace-menu-item.tsx
+++ b/web/core/components/workspace/sidebar/workspace-menu-item.tsx
@@ -4,9 +4,7 @@ import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
 // plane imports
 import { EUserWorkspaceRoles, EUserPermissionsLevel } from "@plane/constants";
-import { usePlatformOS } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
-import { Tooltip } from "@plane/ui";
 import { cn } from "@plane/utils";
 // components
 import { SidebarNavItem } from "@/components/sidebar";
@@ -34,8 +32,7 @@ export const SidebarWorkspaceMenuItem: FC<SidebarWorkspaceMenuItemProps> = obser
   const { workspaceSlug } = useParams();
   const { allowPermissions } = useUserPermissions();
   // store hooks
-  const { toggleSidebar, sidebarCollapsed } = useAppTheme();
-  const { isMobile } = usePlatformOS();
+  const { toggleSidebar } = useAppTheme();
 
   const handleLinkClick = () => {
     if (window.innerWidth < 768) {
@@ -50,33 +47,20 @@ export const SidebarWorkspaceMenuItem: FC<SidebarWorkspaceMenuItemProps> = obser
   const isActive = item.href === pathname;
 
   return (
-    <Tooltip
-      tooltipContent={t(item.labelTranslationKey)}
-      position="right"
-      className="ml-2"
-      disabled={!sidebarCollapsed}
-      isMobile={isMobile}
-    >
-      <Link href={item.href} onClick={() => handleLinkClick()}>
-        <SidebarNavItem
-          className={`${sidebarCollapsed ? "p-0 size-8 aspect-square justify-center mx-auto" : ""}`}
-          isActive={isActive}
-        >
-          <div className="flex items-center gap-1.5 py-[1px]">
-            <item.Icon
-              className={cn("size-4", {
-                "rotate-180": item.key === "active_cycles",
-              })}
-            />
-            {!sidebarCollapsed && <p className="text-sm leading-5 font-medium">{t(item.labelTranslationKey)}</p>}
-          </div>
-          {!sidebarCollapsed && item.key === "active_cycles" && (
-            <div className="flex-shrink-0">
-              <UpgradeBadge />
-            </div>
-          )}
-        </SidebarNavItem>
-      </Link>
-    </Tooltip>
+    <Link href={item.href} onClick={() => handleLinkClick()}>
+      <SidebarNavItem isActive={isActive}>
+        <div className="flex items-center gap-1.5 py-[1px]">
+          <item.Icon
+            className={cn("size-4", {
+              "rotate-180": item.key === "active_cycles",
+            })}
+          />
+          <p className="text-sm leading-5 font-medium">{t(item.labelTranslationKey)}</p>
+        </div>
+        <div className="flex-shrink-0">
+          <UpgradeBadge />
+        </div>
+      </SidebarNavItem>
+    </Link>
   );
 });
diff --git a/web/core/components/workspace/sidebar/workspace-menu.tsx b/web/core/components/workspace/sidebar/workspace-menu.tsx
index 2b2fa90b317..d2c6ad37563 100644
--- a/web/core/components/workspace/sidebar/workspace-menu.tsx
+++ b/web/core/components/workspace/sidebar/workspace-menu.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect } from "react";
+import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { BarChart2, Briefcase, Layers } from "lucide-react";
@@ -10,26 +10,17 @@ import { EUserWorkspaceRoles } from "@plane/constants";
 import { ContrastIcon } from "@plane/ui";
 // components
 import { SidebarWorkspaceMenuHeader, SidebarWorkspaceMenuItem } from "@/components/workspace/sidebar";
-// helpers
-import { cn } from "@/helpers/common.helper";
 // hooks
-import { useAppTheme } from "@/hooks/store";
 import useLocalStorage from "@/hooks/use-local-storage";
 
 export const SidebarWorkspaceMenu = observer(() => {
   // router params
   const { workspaceSlug } = useParams();
-  // store hooks
-  const { sidebarCollapsed } = useAppTheme();
   // local storage
   const { setValue: toggleWorkspaceMenu, storedValue } = useLocalStorage<boolean>("is_workspace_menu_open", true);
   // derived values
   const isWorkspaceMenuOpen = !!storedValue;
 
-  useEffect(() => {
-    if (sidebarCollapsed) toggleWorkspaceMenu(true);
-  }, [sidebarCollapsed, toggleWorkspaceMenu]);
-
   const SIDEBAR_WORKSPACE_MENU_ITEMS = [
     {
       key: "projects",
@@ -74,13 +65,7 @@ export const SidebarWorkspaceMenu = observer(() => {
         leaveTo="transform scale-95 opacity-0"
       >
         {isWorkspaceMenuOpen && (
-          <Disclosure.Panel
-            as="div"
-            className={cn("flex flex-col mt-0.5 gap-0.5", {
-              "space-y-0 mt-0 ml-0": sidebarCollapsed,
-            })}
-            static
-          >
+          <Disclosure.Panel as="div" className="flex flex-col mt-0.5 gap-0.5" static>
             {SIDEBAR_WORKSPACE_MENU_ITEMS.map((item) => (
               <SidebarWorkspaceMenuItem key={item.key} item={item} />
             ))}

From a07cff02c25ee5b186c8c96c54f7dece25fc40ca Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Mon, 16 Jun 2025 15:36:41 +0530
Subject: [PATCH 06/47] chore: code refactor

---
 .../(projects)/resizeable-sidebar.tsx         | 23 -------------------
 1 file changed, 23 deletions(-)

diff --git a/web/app/(all)/[workspaceSlug]/(projects)/resizeable-sidebar.tsx b/web/app/(all)/[workspaceSlug]/(projects)/resizeable-sidebar.tsx
index e6a998a3d63..41015300669 100644
--- a/web/app/(all)/[workspaceSlug]/(projects)/resizeable-sidebar.tsx
+++ b/web/app/(all)/[workspaceSlug]/(projects)/resizeable-sidebar.tsx
@@ -264,29 +264,6 @@ export function ResizableSidebar({
         </aside>
       </div>
 
-      {/* Toggle Button */}
-      <button
-        onClick={toggleCollapsed}
-        className={cn(
-          "fixed top-4 right-4 z-40 p-2 bg-white rounded-md shadow-md border border-gray-200",
-          "hover:bg-gray-50 transition-all duration-200",
-          "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
-          "transform transition-transform duration-300",
-          isCollapsed ? "translate-x-0" : "translate-x-[-100%]"
-        )}
-        aria-label={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
-        aria-expanded={!isCollapsed}
-      >
-        <svg
-          className={cn("w-5 h-5 transition-transform duration-300", isCollapsed ? "rotate-180" : "rotate-0")}
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-        >
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
-        </svg>
-      </button>
-
       {/* Extended Sidebar */}
       {extendedSidebar && extendedSidebar}
     </>

From 7205b72c8e9eafda3f67cb9a84fcdc2d7b56b482 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Mon, 16 Jun 2025 17:36:38 +0530
Subject: [PATCH 07/47] chore: code refactor

---
 .../(all)/[workspaceSlug]/(projects)/resizeable-sidebar.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/web/app/(all)/[workspaceSlug]/(projects)/resizeable-sidebar.tsx b/web/app/(all)/[workspaceSlug]/(projects)/resizeable-sidebar.tsx
index 41015300669..deaa7c40021 100644
--- a/web/app/(all)/[workspaceSlug]/(projects)/resizeable-sidebar.tsx
+++ b/web/app/(all)/[workspaceSlug]/(projects)/resizeable-sidebar.tsx
@@ -173,7 +173,11 @@ export function ResizableSidebar({
           isCollapsed ? "translate-x-[-100%] opacity-0 w-0" : "translate-x-0 opacity-100",
           className
         )}
-        style={{ width: `${isCollapsed ? 0 : width}px` }}
+        style={{
+          width: `${isCollapsed ? 0 : width}px`,
+          minWidth: `${isCollapsed ? 0 : width}px`,
+          maxWidth: `${isCollapsed ? 0 : width}px`,
+        }}
         role="complementary"
         aria-label="Main sidebar"
       >

From 3cdfac257593ab28b3146668f0693dac785a828d Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Mon, 16 Jun 2025 17:41:03 +0530
Subject: [PATCH 08/47] chore: code refactor

---
 .../(all)/[workspaceSlug]/(projects)/resizeable-sidebar.tsx    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/web/app/(all)/[workspaceSlug]/(projects)/resizeable-sidebar.tsx b/web/app/(all)/[workspaceSlug]/(projects)/resizeable-sidebar.tsx
index deaa7c40021..dc5ba9db74d 100644
--- a/web/app/(all)/[workspaceSlug]/(projects)/resizeable-sidebar.tsx
+++ b/web/app/(all)/[workspaceSlug]/(projects)/resizeable-sidebar.tsx
@@ -2,7 +2,8 @@
 
 import React, { Dispatch, ReactElement, SetStateAction, useCallback, useEffect, useState, useRef } from "react";
 // helpers
-import { cn } from "@/helpers/common.helper";
+import { cn } from "@plane/utils";
+
 
 interface ResizableSidebarProps {
   showPeek?: boolean;

From 8e270781e8b0611c6f697ad9fcce338c7e34b830 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Mon, 16 Jun 2025 19:45:47 +0530
Subject: [PATCH 09/47] chore: breadcrumb changes

---
 .../(all)/[workspaceSlug]/(projects)/header.tsx | 17 ++---------------
 web/core/components/core/app-header.tsx         | 16 ++++++++++------
 .../sidebar/sidebar-menu-hamburger-toggle.tsx   | 13 ++++++++++---
 3 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/web/app/(all)/[workspaceSlug]/(projects)/header.tsx b/web/app/(all)/[workspaceSlug]/(projects)/header.tsx
index da1007447dd..27e9470222c 100644
--- a/web/app/(all)/[workspaceSlug]/(projects)/header.tsx
+++ b/web/app/(all)/[workspaceSlug]/(projects)/header.tsx
@@ -3,7 +3,7 @@
 import { observer } from "mobx-react";
 import Image from "next/image";
 import { useTheme } from "next-themes";
-import { Home, MenuIcon } from "lucide-react";
+import { Home } from "lucide-react";
 // images
 import githubBlackImage from "/public/logos/github-black.png";
 import githubWhiteImage from "/public/logos/github-white.png";
@@ -15,13 +15,12 @@ import { Breadcrumbs, Header } from "@plane/ui";
 import { BreadcrumbLink } from "@/components/common";
 // constants
 // hooks
-import { useAppTheme, useEventTracker } from "@/hooks/store";
+import { useEventTracker } from "@/hooks/store";
 
 export const WorkspaceDashboardHeader = observer(() => {
   // hooks
   const { captureEvent } = useEventTracker();
   const { resolvedTheme } = useTheme();
-  const { sidebarCollapsed, toggleSidebar, sidebarPeek, toggleSidebarPeek } = useAppTheme();
 
   const { t } = useTranslation();
 
@@ -30,18 +29,6 @@ export const WorkspaceDashboardHeader = observer(() => {
       <Header>
         <Header.LeftItem>
           <div className="flex items-center gap-2">
-            {sidebarCollapsed && (
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  e.preventDefault();
-                  if (sidebarPeek) toggleSidebarPeek(false);
-                  toggleSidebar(false);
-                }}
-              >
-                <MenuIcon className="size-5 text-custom-text-300" />
-              </button>
-            )}
             <Breadcrumbs>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
diff --git a/web/core/components/core/app-header.tsx b/web/core/components/core/app-header.tsx
index 6b943044e93..605b53fa38f 100644
--- a/web/core/components/core/app-header.tsx
+++ b/web/core/components/core/app-header.tsx
@@ -1,27 +1,31 @@
 "use client";
 
 import { ReactNode } from "react";
-// components
+import { observer } from "mobx-react";
+// plane imports
 import { Row } from "@plane/ui";
+// components
 import { SidebarHamburgerToggle } from "@/components/core";
+// hooks
+import { useAppTheme } from "@/hooks/store";
 
 export interface AppHeaderProps {
   header: ReactNode;
   mobileHeader?: ReactNode;
 }
 
-export const AppHeader = (props: AppHeaderProps) => {
+export const AppHeader = observer((props: AppHeaderProps) => {
   const { header, mobileHeader } = props;
+  // store hooks
+  const { sidebarCollapsed } = useAppTheme();
 
   return (
     <div className="z-[18]">
       <Row className="h-[3.75rem] flex gap-2 w-full items-center border-b border-custom-border-200 bg-custom-sidebar-background-100">
-        <div className="block bg-custom-sidebar-background-100 md:hidden">
-          <SidebarHamburgerToggle />
-        </div>
+        {sidebarCollapsed && <SidebarHamburgerToggle />}
         <div className="w-full">{header}</div>
       </Row>
       {mobileHeader && mobileHeader}
     </div>
   );
-};
+});
diff --git a/web/core/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx b/web/core/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
index 7dc39881299..7e773131c8d 100644
--- a/web/core/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
+++ b/web/core/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
@@ -6,13 +6,20 @@ import { useAppTheme } from "@/hooks/store";
 
 export const SidebarHamburgerToggle = observer(() => {
   // store hooks
-  const { toggleSidebar } = useAppTheme();
+  const { toggleSidebar, sidebarPeek, toggleSidebarPeek } = useAppTheme();
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (sidebarPeek) toggleSidebarPeek(false);
+    toggleSidebar(false);
+  };
 
   return (
     <button
       type="button"
-      className="group flex-shrink-0 size-7 grid place-items-center rounded bg-custom-background-80 transition-all hover:bg-custom-background-90 md:hidden"
-      onClick={() => toggleSidebar()}
+      className="group flex-shrink-0 size-7 grid place-items-center rounded hover:bg-custom-background-80 transition-all bg-custom-background-90"
+      onClick={handleClick}
     >
       <Menu className="size-3.5 text-custom-text-200 transition-all group-hover:text-custom-text-100" />
     </button>

From 71c5616096c1b1c81bc5f3cda38cd48550d02fcd Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Tue, 17 Jun 2025 20:47:30 +0530
Subject: [PATCH 10/47] chore: sidebar improvements and fixes

---
 .../[workspaceSlug]/(projects)/_sidebar.tsx   | 17 ++++----------
 .../(projects)/extended-project-sidebar.tsx   | 12 +++-------
 .../(projects)/extended-sidebar-wrapper.tsx   |  8 +++----
 .../(projects)/extended-sidebar.tsx           |  9 +++-----
 .../workspace/sidebar/sidebar-item.tsx        |  4 ++--
 .../sidebar/sidebar-menu-hamburger-toggle.tsx |  5 ++---
 web/core/components/sidebar/index.ts          |  3 ++-
 .../components/sidebar/resizable-sidebar.tsx} |  3 +--
 .../components/workspace/sidebar/dropdown.tsx |  2 +-
 .../workspace/sidebar/sidebar-menu-items.tsx  |  4 ++--
 web/core/store/theme.store.ts                 | 22 +++++++++----------
 11 files changed, 35 insertions(+), 54 deletions(-)
 rename web/{app/(all)/[workspaceSlug]/(projects)/resizeable-sidebar.tsx => core/components/sidebar/resizable-sidebar.tsx} (98%)

diff --git a/web/app/(all)/[workspaceSlug]/(projects)/_sidebar.tsx b/web/app/(all)/[workspaceSlug]/(projects)/_sidebar.tsx
index 06be475cd6c..3380f1b1130 100644
--- a/web/app/(all)/[workspaceSlug]/(projects)/_sidebar.tsx
+++ b/web/app/(all)/[workspaceSlug]/(projects)/_sidebar.tsx
@@ -4,28 +4,20 @@ import { observer } from "mobx-react";
 // plane imports
 import { useLocalStorage } from "@plane/hooks";
 // hooks
+import { ResizableSidebar } from "@/components/sidebar";
 import { useAppTheme } from "@/hooks/store";
 // local imports
-import { ExtendedProjectSidebar } from "./extended-project-sidebar";
 import { ExtendedAppSidebar } from "./extended-sidebar";
-import { ResizableSidebar } from "./resizeable-sidebar";
 import { AppSidebar } from "./sidebar";
 
 export const ProjectAppSidebar: FC = observer(() => {
   // store hooks
-  const {
-    sidebarCollapsed,
-    toggleSidebar,
-    sidebarPeek,
-    toggleSidebarPeek,
-    extendedSidebarCollapsed,
-    extendedProjectSidebarCollapsed,
-  } = useAppTheme();
+  const { sidebarCollapsed, toggleSidebar, sidebarPeek, toggleSidebarPeek, isExtendedSidebarOpened } = useAppTheme();
   const { storedValue, setValue } = useLocalStorage("sidebarWidth", 250);
   // states
   const [sidebarWidth, setSidebarWidth] = useState<number>(storedValue ?? 250);
   // derived values
-  const anyExtendedSidebarCollapsed = extendedSidebarCollapsed || extendedProjectSidebarCollapsed;
+  const isAnyExtendedSidebarOpen = isExtendedSidebarOpened;
 
   // handlers
   const handleWidthChange = (width: number) => setValue(width);
@@ -47,10 +39,9 @@ export const ProjectAppSidebar: FC = observer(() => {
         extendedSidebar={
           <>
             <ExtendedAppSidebar />
-            <ExtendedProjectSidebar />
           </>
         }
-        isAnyExtendedSidebarExpanded={anyExtendedSidebarCollapsed}
+        isAnyExtendedSidebarExpanded={isAnyExtendedSidebarOpen}
       >
         <AppSidebar />
       </ResizableSidebar>
diff --git a/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx b/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx
index 7fa1bbaea36..85de64569d7 100644
--- a/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx
+++ b/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx
@@ -27,8 +27,7 @@ export const ExtendedProjectSidebar = observer(() => {
   const { workspaceSlug } = useParams();
   // store hooks
   const { t } = useTranslation();
-  const { sidebarPeek, toggleSidebarPeek, extendedProjectSidebarCollapsed, toggleExtendedProjectSidebar } =
-    useAppTheme();
+  const { isExtendedProjectSidebarOpened, toggleExtendedProjectSidebar } = useAppTheme();
   const { getPartialProjectById, joinedProjectIds: joinedProjects, updateProjectView } = useProject();
   const { allowPermissions } = useUserPermissions();
 
@@ -75,12 +74,7 @@ export const ExtendedProjectSidebar = observer(() => {
     EUserPermissionsLevel.WORKSPACE
   );
 
-  const handleClose = () => {
-    if (sidebarPeek) toggleSidebarPeek(false);
-    if (!isProjectModalOpen) {
-      toggleExtendedProjectSidebar(false);
-    }
-  };
+  const handleClose = () => toggleExtendedProjectSidebar(false);
 
   const handleCopyText = (projectId: string) => {
     copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/issues`).then(() => {
@@ -102,7 +96,7 @@ export const ExtendedProjectSidebar = observer(() => {
         />
       )}
       <ExtendedSidebarWrapper
-        extendedSidebarCollapsed={!!extendedProjectSidebarCollapsed}
+        isExtendedSidebarOpened={!!isExtendedProjectSidebarOpened}
         extendedSidebarRef={extendedProjectSidebarRef}
         handleClose={handleClose}
         excludedElementId="extended-project-sidebar-toggle"
diff --git a/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx b/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx
index dba9fb2ed17..ed398d87ad2 100644
--- a/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx
+++ b/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx
@@ -12,13 +12,13 @@ import useExtendedSidebarOutsideClickDetector from "@/hooks/use-extended-sidebar
 type Props = {
   children: React.ReactNode;
   extendedSidebarRef: React.RefObject<HTMLDivElement>;
-  extendedSidebarCollapsed: boolean;
+  isExtendedSidebarOpened: boolean;
   handleClose: () => void;
   excludedElementId: string;
 };
 
 export const ExtendedSidebarWrapper: FC<Props> = observer((props) => {
-  const { children, extendedSidebarRef, extendedSidebarCollapsed, handleClose, excludedElementId } = props;
+  const { children, extendedSidebarRef, isExtendedSidebarOpened, handleClose, excludedElementId } = props;
   // store hooks
   const { sidebarPeek } = useAppTheme();
   const { storedValue } = useLocalStorage("sidebarWidth", 250);
@@ -32,8 +32,8 @@ export const ExtendedSidebarWrapper: FC<Props> = observer((props) => {
       className={cn(
         `fixed top-0 h-full z-[19] flex flex-col w-[300px]  transform transition-all duration-300 ease-in-out bg-custom-background-100 border-r border-custom-sidebar-border-200 p-4 shadow-md`,
         {
-          "translate-x-0 opacity-100": extendedSidebarCollapsed,
-          "-translate-x-[600px] opacity-0": !extendedSidebarCollapsed,
+          "translate-x-0 opacity-100": isExtendedSidebarOpened,
+          "-translate-x-[600px] opacity-0 w-0": !isExtendedSidebarOpened,
           "border border-l-none shadow-lg rounded-tr-md rounded-br-md": sidebarPeek,
         }
       )}
diff --git a/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar.tsx b/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar.tsx
index a1eaf4a34e6..d4c764d8387 100644
--- a/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar.tsx
+++ b/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar.tsx
@@ -17,7 +17,7 @@ export const ExtendedAppSidebar = observer(() => {
   // routers
   const { workspaceSlug } = useParams();
   // store hooks
-  const { sidebarPeek, toggleSidebarPeek, extendedSidebarCollapsed, toggleExtendedSidebar } = useAppTheme();
+  const { isExtendedSidebarOpened, toggleExtendedSidebar } = useAppTheme();
   const { updateSidebarPreference, getNavigationPreferences } = useWorkspace();
 
   // derived values
@@ -93,14 +93,11 @@ export const ExtendedAppSidebar = observer(() => {
       });
   };
 
-  const handleClose = () => {
-    if (sidebarPeek) toggleSidebarPeek(false);
-    toggleExtendedSidebar(false);
-  };
+  const handleClose = () => toggleExtendedSidebar(false);
 
   return (
     <ExtendedSidebarWrapper
-      extendedSidebarCollapsed={!!extendedSidebarCollapsed}
+      isExtendedSidebarOpened={!!isExtendedSidebarOpened}
       extendedSidebarRef={extendedSidebarRef}
       handleClose={handleClose}
       excludedElementId="extended-sidebar-toggle"
diff --git a/web/ce/components/workspace/sidebar/sidebar-item.tsx b/web/ce/components/workspace/sidebar/sidebar-item.tsx
index fbbf16acd42..3b61b8ed6b4 100644
--- a/web/ce/components/workspace/sidebar/sidebar-item.tsx
+++ b/web/ce/components/workspace/sidebar/sidebar-item.tsx
@@ -29,13 +29,13 @@ export const SidebarItem: FC<TSidebarItemProps> = observer((props) => {
   const { data } = useUser();
 
   // store hooks
-  const { toggleSidebar, extendedSidebarCollapsed, toggleExtendedSidebar } = useAppTheme();
+  const { toggleSidebar, isExtendedSidebarOpened, toggleExtendedSidebar } = useAppTheme();
 
   const handleLinkClick = () => {
     if (window.innerWidth < 768) {
       toggleSidebar();
     }
-    if (!extendedSidebarCollapsed) toggleExtendedSidebar();
+    if (isExtendedSidebarOpened) toggleExtendedSidebar(false);
   };
 
   const staticItems = ["home", "inbox", "pi-chat", "projects"];
diff --git a/web/core/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx b/web/core/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
index 7e773131c8d..314f661f9d2 100644
--- a/web/core/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
+++ b/web/core/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
@@ -6,13 +6,12 @@ import { useAppTheme } from "@/hooks/store";
 
 export const SidebarHamburgerToggle = observer(() => {
   // store hooks
-  const { toggleSidebar, sidebarPeek, toggleSidebarPeek } = useAppTheme();
+  const { toggleSidebar } = useAppTheme();
 
   const handleClick = (e: React.MouseEvent) => {
     e.stopPropagation();
     e.preventDefault();
-    if (sidebarPeek) toggleSidebarPeek(false);
-    toggleSidebar(false);
+    toggleSidebar();
   };
 
   return (
diff --git a/web/core/components/sidebar/index.ts b/web/core/components/sidebar/index.ts
index b2e6f7602d8..b64ab385e78 100644
--- a/web/core/components/sidebar/index.ts
+++ b/web/core/components/sidebar/index.ts
@@ -1 +1,2 @@
-export * from "./sidebar-navigation";
\ No newline at end of file
+export * from "./sidebar-navigation";
+export * from "./resizable-sidebar";
diff --git a/web/app/(all)/[workspaceSlug]/(projects)/resizeable-sidebar.tsx b/web/core/components/sidebar/resizable-sidebar.tsx
similarity index 98%
rename from web/app/(all)/[workspaceSlug]/(projects)/resizeable-sidebar.tsx
rename to web/core/components/sidebar/resizable-sidebar.tsx
index dc5ba9db74d..991589ad119 100644
--- a/web/app/(all)/[workspaceSlug]/(projects)/resizeable-sidebar.tsx
+++ b/web/core/components/sidebar/resizable-sidebar.tsx
@@ -4,7 +4,6 @@ import React, { Dispatch, ReactElement, SetStateAction, useCallback, useEffect,
 // helpers
 import { cn } from "@plane/utils";
 
-
 interface ResizableSidebarProps {
   showPeek?: boolean;
   togglePeek: (value?: boolean) => void;
@@ -169,7 +168,7 @@ export function ResizableSidebar({
       {/* Main Sidebar */}
       <div
         className={cn(
-          "h-full z-20 bg-white border-r border-gray-200",
+          "h-full z-20 bg-custom-background-100 border-r border-custom-sidebar-border-200",
           !isResizing && "transition-all duration-300 ease-in-out",
           isCollapsed ? "translate-x-[-100%] opacity-0 w-0" : "translate-x-0 opacity-100",
           className
diff --git a/web/core/components/workspace/sidebar/dropdown.tsx b/web/core/components/workspace/sidebar/dropdown.tsx
index c7c8c4c08dc..2f0643c3648 100644
--- a/web/core/components/workspace/sidebar/dropdown.tsx
+++ b/web/core/components/workspace/sidebar/dropdown.tsx
@@ -97,7 +97,7 @@ export const SidebarDropdown = observer(() => {
               leaveTo="transform opacity-0 scale-95"
             >
               <Menu.Items as={Fragment}>
-                <div className="fixed top-12 left-4 z-[21] mt-1 flex w-full max-w-[19rem] origin-top-left flex-col divide-y divide-custom-border-100 rounded-md border-[0.5px] border-custom-sidebar-border-300 bg-custom-sidebar-background-100 shadow-custom-shadow-rg outline-none">
+                <div className="fixed top-12 left-4 z-[21] mt-1 flex w-[19rem] origin-top-left flex-col divide-y divide-custom-border-100 rounded-md border-[0.5px] border-custom-sidebar-border-300 bg-custom-sidebar-background-100 shadow-custom-shadow-rg outline-none">
                   <div className="overflow-x-hidden vertical-scrollbar scrollbar-sm flex max-h-96 flex-col items-start justify-start overflow-y-scroll">
                     <span className="rounded-md px-4 sticky top-0 z-[21] h-full w-full bg-custom-sidebar-background-100 pb-1 pt-3 text-sm font-medium text-custom-text-400 truncate flex-shrink-0">
                       {currentUser?.email}
diff --git a/web/core/components/workspace/sidebar/sidebar-menu-items.tsx b/web/core/components/workspace/sidebar/sidebar-menu-items.tsx
index f23cadb382c..f67eef724b3 100644
--- a/web/core/components/workspace/sidebar/sidebar-menu-items.tsx
+++ b/web/core/components/workspace/sidebar/sidebar-menu-items.tsx
@@ -20,7 +20,7 @@ export const SidebarMenuItems = observer(() => {
   // routers
   const { workspaceSlug } = useParams();
   // store hooks
-  const { extendedSidebarCollapsed, toggleExtendedSidebar } = useAppTheme();
+  const { isExtendedSidebarOpened, toggleExtendedSidebar } = useAppTheme();
   const { getNavigationPreferences } = useWorkspace();
   // translation
   const { t } = useTranslation();
@@ -54,7 +54,7 @@ export const SidebarMenuItems = observer(() => {
           className="flex items-center gap-1.5 text-sm font-medium flex-grow text-custom-text-350"
           id="extended-sidebar-toggle"
           aria-label={t(
-            extendedSidebarCollapsed
+            isExtendedSidebarOpened
               ? "aria_labels.projects_sidebar.open_extended_sidebar"
               : "aria_labels.projects_sidebar.close_extended_sidebar"
           )}
diff --git a/web/core/store/theme.store.ts b/web/core/store/theme.store.ts
index 331c3ea322d..b141f7f076e 100644
--- a/web/core/store/theme.store.ts
+++ b/web/core/store/theme.store.ts
@@ -4,8 +4,8 @@ export interface IThemeStore {
   // observables
   sidebarCollapsed: boolean | undefined;
   sidebarPeek: boolean | undefined;
-  extendedSidebarCollapsed: boolean | undefined;
-  extendedProjectSidebarCollapsed: boolean | undefined;
+  isExtendedSidebarOpened: boolean | undefined;
+  isExtendedProjectSidebarOpened: boolean | undefined;
   profileSidebarCollapsed: boolean | undefined;
   workspaceAnalyticsSidebarCollapsed: boolean | undefined;
   issueDetailSidebarCollapsed: boolean | undefined;
@@ -29,8 +29,8 @@ export class ThemeStore implements IThemeStore {
   // observables
   sidebarCollapsed: boolean | undefined = undefined;
   sidebarPeek: boolean | undefined = undefined;
-  extendedSidebarCollapsed: boolean | undefined = undefined;
-  extendedProjectSidebarCollapsed: boolean | undefined = undefined;
+  isExtendedSidebarOpened: boolean | undefined = undefined;
+  isExtendedProjectSidebarOpened: boolean | undefined = undefined;
   profileSidebarCollapsed: boolean | undefined = undefined;
   workspaceAnalyticsSidebarCollapsed: boolean | undefined = undefined;
   issueDetailSidebarCollapsed: boolean | undefined = undefined;
@@ -43,8 +43,8 @@ export class ThemeStore implements IThemeStore {
       // observable
       sidebarCollapsed: observable.ref,
       sidebarPeek: observable.ref,
-      extendedSidebarCollapsed: observable.ref,
-      extendedProjectSidebarCollapsed: observable.ref,
+      isExtendedSidebarOpened: observable.ref,
+      isExtendedProjectSidebarOpened: observable.ref,
       profileSidebarCollapsed: observable.ref,
       workspaceAnalyticsSidebarCollapsed: observable.ref,
       issueDetailSidebarCollapsed: observable.ref,
@@ -95,9 +95,9 @@ export class ThemeStore implements IThemeStore {
    * @param collapsed
    */
   toggleExtendedSidebar = (collapsed?: boolean) => {
-    const updatedState = collapsed ?? !this.extendedSidebarCollapsed;
+    const updatedState = collapsed ?? !this.isExtendedSidebarOpened;
     runInAction(() => {
-      this.extendedSidebarCollapsed = updatedState;
+      this.isExtendedSidebarOpened = updatedState;
     });
     localStorage.setItem("extended_sidebar_collapsed", updatedState.toString());
   };
@@ -108,11 +108,11 @@ export class ThemeStore implements IThemeStore {
    */
   toggleExtendedProjectSidebar = (collapsed?: boolean) => {
     if (collapsed === undefined) {
-      this.extendedProjectSidebarCollapsed = !this.extendedProjectSidebarCollapsed;
+      this.isExtendedProjectSidebarOpened = !this.isExtendedProjectSidebarOpened;
     } else {
-      this.extendedProjectSidebarCollapsed = collapsed;
+      this.isExtendedProjectSidebarOpened = collapsed;
     }
-    localStorage.setItem("extended_project_sidebar_collapsed", this.extendedProjectSidebarCollapsed.toString());
+    localStorage.setItem("extended_project_sidebar_collapsed", this.isExtendedProjectSidebarOpened.toString());
   };
 
   /**

From 322cdaf13fc1738f7ed4c99569525102da9beca2 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Wed, 18 Jun 2025 17:08:19 +0530
Subject: [PATCH 11/47] chore: enhancements and fixes

---
 .../[workspaceSlug]/(projects)/_sidebar.tsx   |  10 +-
 .../(projects)/extended-sidebar-wrapper.tsx   |   4 +-
 .../components/sidebar/resizable-sidebar.tsx  |  33 +-
 .../sidebar/header/root.tsx                   |  15 +-
 .../components/workspace/sidebar/dropdown.tsx | 344 ++++++++++--------
 .../workspace/sidebar/projects-list-item.tsx  |  41 ++-
 web/core/store/theme.store.ts                 |  13 +
 7 files changed, 269 insertions(+), 191 deletions(-)

diff --git a/web/app/(all)/[workspaceSlug]/(projects)/_sidebar.tsx b/web/app/(all)/[workspaceSlug]/(projects)/_sidebar.tsx
index 3380f1b1130..8a1f2526c90 100644
--- a/web/app/(all)/[workspaceSlug]/(projects)/_sidebar.tsx
+++ b/web/app/(all)/[workspaceSlug]/(projects)/_sidebar.tsx
@@ -12,7 +12,14 @@ import { AppSidebar } from "./sidebar";
 
 export const ProjectAppSidebar: FC = observer(() => {
   // store hooks
-  const { sidebarCollapsed, toggleSidebar, sidebarPeek, toggleSidebarPeek, isExtendedSidebarOpened } = useAppTheme();
+  const {
+    sidebarCollapsed,
+    toggleSidebar,
+    sidebarPeek,
+    toggleSidebarPeek,
+    isExtendedSidebarOpened,
+    isAnySidebarDropdownOpen,
+  } = useAppTheme();
   const { storedValue, setValue } = useLocalStorage("sidebarWidth", 250);
   // states
   const [sidebarWidth, setSidebarWidth] = useState<number>(storedValue ?? 250);
@@ -42,6 +49,7 @@ export const ProjectAppSidebar: FC = observer(() => {
           </>
         }
         isAnyExtendedSidebarExpanded={isAnyExtendedSidebarOpen}
+        isAnySidebarDropdownOpen={isAnySidebarDropdownOpen}
       >
         <AppSidebar />
       </ResizableSidebar>
diff --git a/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx b/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx
index ed398d87ad2..b89fbedfee5 100644
--- a/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx
+++ b/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx
@@ -30,11 +30,11 @@ export const ExtendedSidebarWrapper: FC<Props> = observer((props) => {
       id={excludedElementId}
       ref={extendedSidebarRef}
       className={cn(
-        `fixed top-0 h-full z-[19] flex flex-col w-[300px]  transform transition-all duration-300 ease-in-out bg-custom-background-100 border-r border-custom-sidebar-border-200 p-4 shadow-md`,
+        `fixed top-0 h-full z-[19] flex flex-col w-[300px]  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-[600px] opacity-0 w-0": !isExtendedSidebarOpened,
-          "border border-l-none shadow-lg rounded-tr-md rounded-br-md": sidebarPeek,
+          "border border-l-none rounded-tr-md rounded-br-md": sidebarPeek,
         }
       )}
       style={{
diff --git a/web/core/components/sidebar/resizable-sidebar.tsx b/web/core/components/sidebar/resizable-sidebar.tsx
index 991589ad119..373b59571ac 100644
--- a/web/core/components/sidebar/resizable-sidebar.tsx
+++ b/web/core/components/sidebar/resizable-sidebar.tsx
@@ -22,12 +22,13 @@ interface ResizableSidebarProps {
   children?: ReactElement;
   extendedSidebar?: ReactElement;
   isAnyExtendedSidebarExpanded?: boolean;
+  isAnySidebarDropdownOpen?: boolean;
 }
 
 export function ResizableSidebar({
   showPeek = false,
   togglePeek,
-  peekDuration = 1000,
+  peekDuration = 500,
   isCollapsed = false,
   toggleCollapsed: toggleCollapsedProp,
   onCollapsedChange,
@@ -40,6 +41,7 @@ export function ResizableSidebar({
   children,
   extendedSidebar,
   isAnyExtendedSidebarExpanded = false,
+  isAnySidebarDropdownOpen = false,
 }: ResizableSidebarProps) {
   // states
   const [isResizing, setIsResizing] = useState(false);
@@ -109,12 +111,12 @@ export function ResizableSidebar({
   }, [isCollapsed, showPeek]);
 
   const handlePeekLeave = useCallback(() => {
-    if (isCollapsed && !isAnyExtendedSidebarExpanded) {
+    if (isCollapsed && !isAnyExtendedSidebarExpanded && !isAnySidebarDropdownOpen) {
       peekTimeoutRef.current = setTimeout(() => {
         setShowPeek(false);
       }, peekDuration);
     }
-  }, [isCollapsed, peekDuration, setShowPeek, isAnyExtendedSidebarExpanded]);
+  }, [isCollapsed, peekDuration, setShowPeek, isAnyExtendedSidebarExpanded, isAnySidebarDropdownOpen]);
 
   // Set up event listeners for resizing
   useEffect(() => {
@@ -143,6 +145,18 @@ export function ResizableSidebar({
     []
   );
 
+  useEffect(() => {
+    if (!isAnySidebarDropdownOpen) {
+      handlePeekLeave();
+    }
+  }, [isAnySidebarDropdownOpen]);
+
+  useEffect(() => {
+    if (!isAnyExtendedSidebarExpanded) {
+      handlePeekLeave();
+    }
+  }, [isAnyExtendedSidebarExpanded]);
+
   // Reset peek when sidebar is expanded
   useEffect(() => {
     if (!isCollapsed) {
@@ -184,8 +198,7 @@ export function ResizableSidebar({
         <aside
           className={cn(
             "group/sidebar h-full w-full bg-custom-background-100 overflow-hidden relative flex flex-col pt-4",
-            isAnyExtendedSidebarExpanded && "rounded-none",
-            !isResizing && "border-r border-custom-sidebar-border-200 "
+            isAnyExtendedSidebarExpanded && "rounded-none"
           )}
         >
           {children}
@@ -211,7 +224,7 @@ export function ResizableSidebar({
       {isCollapsed && (
         <div
           className={cn(
-            "fixed top-0 left-0 w-6 h-full z-50 bg-transparent",
+            "fixed top-0 left-0 w-1 h-full z-50 bg-transparent",
             "transition-opacity duration-200",
             isHoveringTrigger ? "opacity-100" : "opacity-0"
           )}
@@ -225,7 +238,7 @@ export function ResizableSidebar({
       {/* Peek View */}
       <div
         className={cn(
-          "fixed left-0 z-30 bg-custom-background-100 shadow-xl",
+          "fixed left-0 z-30 bg-custom-background-100 shadow-sm",
           !isResizing && "transition-all duration-300 ease-in-out",
           isCollapsed && showPeek ? "translate-x-0 opacity-100" : "translate-x-[-100%] opacity-0",
           "pointer-events-none",
@@ -245,9 +258,9 @@ export function ResizableSidebar({
         <aside
           className={cn(
             "group/sidebar h-full w-full bg-custom-background-100 overflow-hidden relative flex flex-col z-20 pt-4",
-            "self-center border-y shadow-lg rounded-md rounded-tl-none rounded-bl-none",
+            "self-center border-y border-r border-custom-sidebar-border-200 rounded-md rounded-tl-none rounded-bl-none",
             isAnyExtendedSidebarExpanded && "rounded-none",
-            !isResizing && "border-r border-custom-sidebar-border-200 "
+            !isResizing && !isAnyExtendedSidebarExpanded && "border-r"
           )}
         >
           {children}
@@ -256,7 +269,7 @@ export function ResizableSidebar({
             className={cn(
               "transition-all duration-200 cursor-ew-resize absolute h-full w-1 z-[20]",
               !isResizing && "hover:bg-custom-background-90",
-              isResizing && "w-1.5 bg-custom-background-80",
+              isResizing && "bg-custom-background-80",
               "top-0 right-0"
             )}
             // onDoubleClick toggle sidebar
diff --git a/web/core/components/workspace-notifications/sidebar/header/root.tsx b/web/core/components/workspace-notifications/sidebar/header/root.tsx
index cdda51fbfa6..7330b30ba5b 100644
--- a/web/core/components/workspace-notifications/sidebar/header/root.tsx
+++ b/web/core/components/workspace-notifications/sidebar/header/root.tsx
@@ -9,6 +9,10 @@ import { Breadcrumbs, Header } from "@plane/ui";
 import { BreadcrumbLink } from "@/components/common";
 import { SidebarHamburgerToggle } from "@/components/core";
 import { NotificationSidebarHeaderOptions } from "@/components/workspace-notifications";
+// hooks
+import { useAppTheme } from "@/hooks/store";
+// plane web components
+import { isSidebarToggleVisible } from "@/plane-web/components/desktop";
 
 type TNotificationSidebarHeader = {
   workspaceSlug: string;
@@ -17,14 +21,19 @@ type TNotificationSidebarHeader = {
 export const NotificationSidebarHeader: FC<TNotificationSidebarHeader> = observer((props) => {
   const { workspaceSlug } = props;
   const { t } = useTranslation();
+  const { sidebarCollapsed } = useAppTheme();
 
   if (!workspaceSlug) return <></>;
   return (
     <Header className="my-auto bg-custom-background-100">
       <Header.LeftItem>
-        <div className="block bg-custom-sidebar-background-100 md:hidden">
-          <SidebarHamburgerToggle />
-        </div>
+        {sidebarCollapsed && <SidebarHamburgerToggle />}
+
+        {isSidebarToggleVisible() && (
+          <div className="block bg-custom-sidebar-background-100 md:hidden">
+            <SidebarHamburgerToggle />
+          </div>
+        )}
         <Breadcrumbs>
           <Breadcrumbs.BreadcrumbItem
             type="text"
diff --git a/web/core/components/workspace/sidebar/dropdown.tsx b/web/core/components/workspace/sidebar/dropdown.tsx
index 2f0643c3648..55315d52483 100644
--- a/web/core/components/workspace/sidebar/dropdown.tsx
+++ b/web/core/components/workspace/sidebar/dropdown.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Fragment, Ref, useState } from "react";
+import { Fragment, Ref, useState, useEffect } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
@@ -27,7 +27,7 @@ import SidebarDropdownItem from "./dropdown-item";
 export const SidebarDropdown = observer(() => {
   const { workspaceSlug } = useParams();
   // store hooks
-  const { toggleSidebar } = useAppTheme();
+  const { toggleSidebar, toggleAnySidebarDropdown } = useAppTheme();
   const { data: currentUser } = useUser();
   const { signOut } = useUser();
   const { updateUserProfile } = useUserProfile();
@@ -37,6 +37,9 @@ export const SidebarDropdown = observer(() => {
   const isUserInstanceAdmin = false;
   // translation
   const { t } = useTranslation();
+  // local state
+  const [isWorkspaceMenuOpen, setIsWorkspaceMenuOpen] = useState(false);
+  const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
   // popper-js refs
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@@ -65,177 +68,202 @@ export const SidebarDropdown = observer(() => {
   };
   const workspacesList = orderWorkspacesList(Object.values(workspaces ?? {}));
   // TODO: fix workspaces list scroll
+
+  // Toggle sidebar dropdown state when either menu is open
+  useEffect(() => {
+    if (isWorkspaceMenuOpen || isUserMenuOpen) toggleAnySidebarDropdown(true);
+    else toggleAnySidebarDropdown(false);
+  }, [isWorkspaceMenuOpen, isUserMenuOpen]);
+
   return (
     <div className="flex items-center justify-center gap-x-3 gap-y-2">
       <Menu as="div" className="relative h-full truncate text-left flex-grow flex justify-stretch">
-        {({ open, close }) => (
-          <>
-            <Menu.Button
-              className="group/menu-button flex items-center justify-between gap-1 p-1 truncate rounded text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:outline-none flex-grow"
-              aria-label={t("aria_labels.projects_sidebar.open_workspace_switcher")}
-            >
-              <div className="flex-grow flex items-center gap-2 truncate">
-                <WorkspaceLogo logo={activeWorkspace?.logo_url} name={activeWorkspace?.name} />
-                <h4 className="truncate text-base font-medium text-custom-text-100">
-                  {activeWorkspace?.name ?? t("loading")}
-                </h4>
-              </div>
-              <ChevronDown
-                className={cn(
-                  "flex-shrink-0 mx-1 hidden size-4 group-hover/menu-button:block text-custom-sidebar-text-400 duration-300",
-                  { "rotate-180": open }
-                )}
-              />
-            </Menu.Button>
-            <Transition
-              as={Fragment}
-              enter="transition ease-out duration-100"
-              enterFrom="transform opacity-0 scale-95"
-              enterTo="transform opacity-100 scale-100"
-              leave="transition ease-in duration-75"
-              leaveFrom="transform opacity-100 scale-100"
-              leaveTo="transform opacity-0 scale-95"
-            >
-              <Menu.Items as={Fragment}>
-                <div className="fixed top-12 left-4 z-[21] mt-1 flex w-[19rem] origin-top-left flex-col divide-y divide-custom-border-100 rounded-md border-[0.5px] border-custom-sidebar-border-300 bg-custom-sidebar-background-100 shadow-custom-shadow-rg outline-none">
-                  <div className="overflow-x-hidden vertical-scrollbar scrollbar-sm flex max-h-96 flex-col items-start justify-start overflow-y-scroll">
-                    <span className="rounded-md px-4 sticky top-0 z-[21] h-full w-full bg-custom-sidebar-background-100 pb-1 pt-3 text-sm font-medium text-custom-text-400 truncate flex-shrink-0">
-                      {currentUser?.email}
-                    </span>
-                    {workspacesList ? (
-                      <div className="size-full flex flex-col items-start justify-start">
-                        {(activeWorkspace
-                          ? [
-                              activeWorkspace,
-                              ...workspacesList.filter((workspace) => workspace.id !== activeWorkspace?.id),
-                            ]
-                          : workspacesList
-                        ).map((workspace) => (
-                          <SidebarDropdownItem
-                            key={workspace.id}
-                            workspace={workspace}
-                            activeWorkspace={activeWorkspace}
-                            handleItemClick={handleItemClick}
-                            handleWorkspaceNavigation={handleWorkspaceNavigation}
-                            handleClose={close}
-                          />
-                        ))}
-                      </div>
-                    ) : (
-                      <div className="w-full">
-                        <Loader className="space-y-2">
-                          <Loader.Item height="30px" />
-                          <Loader.Item height="30px" />
-                        </Loader>
-                      </div>
-                    )}
-                  </div>
-                  <div className="w-full flex flex-col items-start justify-start gap-2 px-4 py-2 text-sm">
-                    {isWorkspaceCreationEnabled && (
-                      <Link href="/create-workspace" className="w-full">
+        {({ open, close }: { open: boolean; close: () => void }) => {
+          // Update local state directly
+          if (isWorkspaceMenuOpen !== open) {
+            setIsWorkspaceMenuOpen(open);
+          }
+
+          return (
+            <>
+              <Menu.Button
+                className="group/menu-button flex items-center justify-between gap-1 p-1 truncate rounded text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:outline-none flex-grow"
+                aria-label={t("aria_labels.projects_sidebar.open_workspace_switcher")}
+              >
+                <div className="flex-grow flex items-center gap-2 truncate">
+                  <WorkspaceLogo logo={activeWorkspace?.logo_url} name={activeWorkspace?.name} />
+                  <h4 className="truncate text-base font-medium text-custom-text-100">
+                    {activeWorkspace?.name ?? t("loading")}
+                  </h4>
+                </div>
+                <ChevronDown
+                  className={cn(
+                    "flex-shrink-0 mx-1 hidden size-4 group-hover/menu-button:block text-custom-sidebar-text-400 duration-300",
+                    { "rotate-180": open }
+                  )}
+                />
+              </Menu.Button>
+              <Transition
+                as={Fragment}
+                enter="transition ease-out duration-100"
+                enterFrom="transform opacity-0 scale-95"
+                enterTo="transform opacity-100 scale-100"
+                leave="transition ease-in duration-75"
+                leaveFrom="transform opacity-100 scale-100"
+                leaveTo="transform opacity-0 scale-95"
+              >
+                <Menu.Items as={Fragment}>
+                  <div className="fixed top-12 left-4 z-[21] mt-1 flex w-[19rem] origin-top-left flex-col divide-y divide-custom-border-100 rounded-md border-[0.5px] border-custom-sidebar-border-300 bg-custom-sidebar-background-100 shadow-custom-shadow-rg outline-none">
+                    <div className="overflow-x-hidden vertical-scrollbar scrollbar-sm flex max-h-96 flex-col items-start justify-start overflow-y-scroll">
+                      <span className="rounded-md px-4 sticky top-0 z-[21] h-full w-full bg-custom-sidebar-background-100 pb-1 pt-3 text-sm font-medium text-custom-text-400 truncate flex-shrink-0">
+                        {currentUser?.email}
+                      </span>
+                      {workspacesList ? (
+                        <div className="size-full flex flex-col items-start justify-start">
+                          {(activeWorkspace
+                            ? [
+                                activeWorkspace,
+                                ...workspacesList.filter((workspace) => workspace.id !== activeWorkspace?.id),
+                              ]
+                            : workspacesList
+                          ).map((workspace) => (
+                            <SidebarDropdownItem
+                              key={workspace.id}
+                              workspace={workspace}
+                              activeWorkspace={activeWorkspace}
+                              handleItemClick={handleItemClick}
+                              handleWorkspaceNavigation={handleWorkspaceNavigation}
+                              handleClose={close}
+                            />
+                          ))}
+                        </div>
+                      ) : (
+                        <div className="w-full">
+                          <Loader className="space-y-2">
+                            <Loader.Item height="30px" />
+                            <Loader.Item height="30px" />
+                          </Loader>
+                        </div>
+                      )}
+                    </div>
+                    <div className="w-full flex flex-col items-start justify-start gap-2 px-4 py-2 text-sm">
+                      {isWorkspaceCreationEnabled && (
+                        <Link href="/create-workspace" className="w-full">
+                          <Menu.Item
+                            as="div"
+                            className="flex items-center gap-2 rounded px-2 py-1 text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
+                          >
+                            <CirclePlus className="size-4 flex-shrink-0" />
+                            {t("create_workspace")}
+                          </Menu.Item>
+                        </Link>
+                      )}
+
+                      <Link href="/invitations" className="w-full" onClick={handleItemClick}>
                         <Menu.Item
                           as="div"
                           className="flex items-center gap-2 rounded px-2 py-1 text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
                         >
-                          <CirclePlus className="size-4 flex-shrink-0" />
-                          {t("create_workspace")}
+                          <Mails className="h-4 w-4 flex-shrink-0" />
+                          {t("workspace_invites")}
                         </Menu.Item>
                       </Link>
-                    )}
 
-                    <Link href="/invitations" className="w-full" onClick={handleItemClick}>
-                      <Menu.Item
-                        as="div"
-                        className="flex items-center gap-2 rounded px-2 py-1 text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
-                      >
-                        <Mails className="h-4 w-4 flex-shrink-0" />
-                        {t("workspace_invites")}
-                      </Menu.Item>
-                    </Link>
-
-                    <div className="w-full">
-                      <Menu.Item
-                        as="button"
-                        type="button"
-                        className="flex w-full items-center gap-2 rounded px-2 py-1 text-sm font-medium text-red-600 hover:bg-custom-sidebar-background-80"
-                        onClick={handleSignOut}
-                      >
-                        <LogOut className="size-4 flex-shrink-0" />
-                        {t("sign_out")}
-                      </Menu.Item>
+                      <div className="w-full">
+                        <Menu.Item
+                          as="button"
+                          type="button"
+                          className="flex w-full items-center gap-2 rounded px-2 py-1 text-sm font-medium text-red-600 hover:bg-custom-sidebar-background-80"
+                          onClick={handleSignOut}
+                        >
+                          <LogOut className="size-4 flex-shrink-0" />
+                          {t("sign_out")}
+                        </Menu.Item>
+                      </div>
                     </div>
                   </div>
-                </div>
-              </Menu.Items>
-            </Transition>
-          </>
-        )}
+                </Menu.Items>
+              </Transition>
+            </>
+          );
+        }}
       </Menu>
       <Menu as="div" className="relative flex-shrink-0">
-        <Menu.Button
-          className="grid place-items-center outline-none"
-          ref={setReferenceElement}
-          aria-label={t("aria_labels.projects_sidebar.open_user_menu")}
-        >
-          <Avatar
-            name={currentUser?.display_name}
-            src={getFileURL(currentUser?.avatar_url ?? "")}
-            size={24}
-            shape="circle"
-            className="!text-base"
-          />
-        </Menu.Button>
-        <Transition
-          as={Fragment}
-          enter="transition ease-out duration-100"
-          enterFrom="transform opacity-0 scale-95"
-          enterTo="transform opacity-100 scale-100"
-          leave="transition ease-in duration-75"
-          leaveFrom="transform opacity-100 scale-100"
-          leaveTo="transform opacity-0 scale-95"
-        >
-          <Menu.Items
-            className="absolute left-0 z-[21] mt-1 flex w-44 origin-top-left flex-col divide-y
-            divide-custom-sidebar-border-200 rounded-md border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-1 py-2 text-xs shadow-lg outline-none"
-            ref={setPopperElement as Ref<HTMLDivElement>}
-            style={styles.popper}
-            {...attributes.popper}
-          >
-            <div className="flex flex-col gap-2.5 pb-2">
-              <span className="px-2 text-custom-sidebar-text-200">{currentUser?.email}</span>
-              <Link href={`/${workspaceSlug}/settings/account`}>
-                <Menu.Item as="div">
-                  <span className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80">
-                    <Settings className="h-4 w-4 stroke-[1.5]" />
-                    <span>{t("settings")}</span>
-                  </span>
-                </Menu.Item>
-              </Link>
-            </div>
-            <div className={`pt-2 ${isUserInstanceAdmin || false ? "pb-2" : ""}`}>
-              <Menu.Item
-                as="button"
-                type="button"
-                className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
-                onClick={handleSignOut}
+        {({ open, close }: { open: boolean; close: () => void }) => {
+          // Update local state directly
+          if (isUserMenuOpen !== open) {
+            setIsUserMenuOpen(open);
+          }
+
+          return (
+            <>
+              <Menu.Button
+                className="grid place-items-center outline-none"
+                ref={setReferenceElement}
+                aria-label={t("aria_labels.projects_sidebar.open_user_menu")}
+              >
+                <Avatar
+                  name={currentUser?.display_name}
+                  src={getFileURL(currentUser?.avatar_url ?? "")}
+                  size={24}
+                  shape="circle"
+                  className="!text-base"
+                />
+              </Menu.Button>
+              <Transition
+                as={Fragment}
+                enter="transition ease-out duration-100"
+                enterFrom="transform opacity-0 scale-95"
+                enterTo="transform opacity-100 scale-100"
+                leave="transition ease-in duration-75"
+                leaveFrom="transform opacity-100 scale-100"
+                leaveTo="transform opacity-0 scale-95"
               >
-                <LogOut className="size-4 stroke-[1.5]" />
-                {t("sign_out")}
-              </Menu.Item>
-            </div>
-            {isUserInstanceAdmin && (
-              <div className="p-2 pb-0">
-                <Link href={GOD_MODE_URL}>
-                  <Menu.Item as="button" type="button" className="w-full">
-                    <span className="flex w-full items-center justify-center rounded bg-custom-primary-100/20 px-2 py-1 text-sm font-medium text-custom-primary-100 hover:bg-custom-primary-100/30 hover:text-custom-primary-200">
-                      {t("enter_god_mode")}
-                    </span>
-                  </Menu.Item>
-                </Link>
-              </div>
-            )}
-          </Menu.Items>
-        </Transition>
+                <Menu.Items
+                  className="absolute left-0 z-[21] mt-1 flex w-44 origin-top-left flex-col divide-y
+                  divide-custom-sidebar-border-200 rounded-md border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-1 py-2 text-xs shadow-lg outline-none"
+                  ref={setPopperElement as Ref<HTMLDivElement>}
+                  style={styles.popper}
+                  {...attributes.popper}
+                >
+                  <div className="flex flex-col gap-2.5 pb-2">
+                    <span className="px-2 text-custom-sidebar-text-200">{currentUser?.email}</span>
+                    <Link href={`/${workspaceSlug}/settings/account`}>
+                      <Menu.Item as="div">
+                        <span className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80">
+                          <Settings className="h-4 w-4 stroke-[1.5]" />
+                          <span>{t("settings")}</span>
+                        </span>
+                      </Menu.Item>
+                    </Link>
+                  </div>
+                  <div className={`pt-2 ${isUserInstanceAdmin || false ? "pb-2" : ""}`}>
+                    <Menu.Item
+                      as="button"
+                      type="button"
+                      className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
+                      onClick={handleSignOut}
+                    >
+                      <LogOut className="size-4 stroke-[1.5]" />
+                      {t("sign_out")}
+                    </Menu.Item>
+                  </div>
+                  {isUserInstanceAdmin && (
+                    <div className="p-2 pb-0">
+                      <Link href={GOD_MODE_URL}>
+                        <Menu.Item as="button" type="button" className="w-full">
+                          <span className="flex w-full items-center justify-center rounded bg-custom-primary-100/20 px-2 py-1 text-sm font-medium text-custom-primary-100 hover:bg-custom-primary-100/30 hover:text-custom-primary-200">
+                            {t("enter_god_mode")}
+                          </span>
+                        </Menu.Item>
+                      </Link>
+                    </div>
+                  )}
+                </Menu.Items>
+              </Transition>
+            </>
+          );
+        }}
       </Menu>
     </div>
   );
diff --git a/web/core/components/workspace/sidebar/projects-list-item.tsx b/web/core/components/workspace/sidebar/projects-list-item.tsx
index b4728ebd007..cc7c0e4d369 100644
--- a/web/core/components/workspace/sidebar/projects-list-item.tsx
+++ b/web/core/components/workspace/sidebar/projects-list-item.tsx
@@ -7,8 +7,7 @@ import { pointerOutsideOfPreview } from "@atlaskit/pragmatic-drag-and-drop/eleme
 import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
 import { attachInstruction, extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
 import { observer } from "mobx-react";
-import Link from "next/link";
-import { useParams } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { createRoot } from "react-dom/client";
 import { LinkIcon, Settings, Share2, LogOut, MoreHorizontal, ChevronRight } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
@@ -24,7 +23,7 @@ import { Logo } from "@/components/common/logo";
 import { LeaveProjectModal, PublishProjectModal } from "@/components/project";
 // helpers
 // hooks
-import { useCommandPalette, useEventTracker, useProject, useUserPermissions } from "@/hooks/store";
+import { useAppTheme, useCommandPalette, useEventTracker, useProject, useUserPermissions } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane-web components
 import { ProjectNavigationRoot } from "@/plane-web/components/sidebar";
@@ -64,6 +63,7 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
   const { isMobile } = usePlatformOS();
   const { allowPermissions } = useUserPermissions();
   const { getIsProjectListOpen, toggleProjectListOpen } = useCommandPalette();
+  const { toggleAnySidebarDropdown } = useAppTheme();
   // states
   const [leaveProjectModalOpen, setLeaveProjectModal] = useState(false);
   const [publishModalOpen, setPublishModal] = useState(false);
@@ -77,6 +77,7 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
   const dragHandleRef = useRef<HTMLButtonElement | null>(null);
   // router
   const { workspaceSlug, projectId: URLProjectId } = useParams();
+  const router = useRouter();
   // derived values
   const project = getPartialProjectById(projectId);
   // toggle project list open
@@ -189,6 +190,11 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
     );
   }, [projectId, isLastChild, projectListType, handleOnProjectDrop]);
 
+  useEffect(() => {
+    if (isMenuActive) toggleAnySidebarDropdown(true);
+    else toggleAnySidebarDropdown(false);
+  }, [isMenuActive]);
+
   useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));
   useOutsideClickDetector(projectRef, () => projectRef?.current?.classList?.remove(HIGHLIGHT_CLASS));
 
@@ -289,6 +295,7 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
                 ariaLabel={t("aria_labels.projects_sidebar.toggle_quick_actions_menu")}
                 useCaptureForOutsideClick
                 closeOnSelect
+                onMenuClose={() => setIsMenuActive(false)}
               >
                 {/* TODO: Removed is_favorite logic due to the optimization in projects API */}
                 {/* {isAuthorized && (
@@ -324,26 +331,26 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
                   </span>
                 </CustomMenu.MenuItem>
                 {isAuthorized && (
-                  <CustomMenu.MenuItem>
-                    <Link href={`/${workspaceSlug}/projects/${project?.id}/archives/issues`}>
-                      <div className="flex items-center justify-start gap-2">
-                        <ArchiveIcon className="h-3.5 w-3.5 stroke-[1.5]" />
-                        <span>{t("archives")}</span>
-                      </div>
-                    </Link>
+                  <CustomMenu.MenuItem
+                    onClick={() => {
+                      router.push(`/${workspaceSlug}/projects/${project?.id}/archives/issues`);
+                    }}
+                  >
+                    <div className="flex items-center justify-start gap-2 cursor-pointer">
+                      <ArchiveIcon className="h-3.5 w-3.5 stroke-[1.5]" />
+                      <span>{t("archives")}</span>
+                    </div>
                   </CustomMenu.MenuItem>
                 )}
                 <CustomMenu.MenuItem
                   onClick={() => {
-                    setIsMenuActive(false);
+                    router.push(`/${workspaceSlug}/settings/projects/${project?.id}`);
                   }}
                 >
-                  <Link href={`/${workspaceSlug}/settings/projects/${project?.id}`}>
-                    <div className="flex items-center justify-start gap-2">
-                      <Settings className="h-3.5 w-3.5 stroke-[1.5]" />
-                      <span>{t("settings")}</span>
-                    </div>
-                  </Link>
+                  <div className="flex items-center justify-start gap-2 cursor-pointer">
+                    <Settings className="h-3.5 w-3.5 stroke-[1.5]" />
+                    <span>{t("settings")}</span>
+                  </div>
                 </CustomMenu.MenuItem>
                 {/* leave project */}
                 {!isAuthorized && (
diff --git a/web/core/store/theme.store.ts b/web/core/store/theme.store.ts
index b141f7f076e..e788089e10e 100644
--- a/web/core/store/theme.store.ts
+++ b/web/core/store/theme.store.ts
@@ -2,6 +2,7 @@ import { action, observable, makeObservable, runInAction } from "mobx";
 
 export interface IThemeStore {
   // observables
+  isAnySidebarDropdownOpen: boolean | undefined;
   sidebarCollapsed: boolean | undefined;
   sidebarPeek: boolean | undefined;
   isExtendedSidebarOpened: boolean | undefined;
@@ -13,6 +14,7 @@ export interface IThemeStore {
   initiativesSidebarCollapsed: boolean | undefined;
   projectOverviewSidebarCollapsed: boolean | undefined;
   // actions
+  toggleAnySidebarDropdown: (open?: boolean) => void;
   toggleSidebar: (collapsed?: boolean) => void;
   toggleSidebarPeek: (peek?: boolean) => void;
   toggleExtendedSidebar: (collapsed?: boolean) => void;
@@ -27,6 +29,7 @@ export interface IThemeStore {
 
 export class ThemeStore implements IThemeStore {
   // observables
+  isAnySidebarDropdownOpen: boolean | undefined = undefined;
   sidebarCollapsed: boolean | undefined = undefined;
   sidebarPeek: boolean | undefined = undefined;
   isExtendedSidebarOpened: boolean | undefined = undefined;
@@ -41,6 +44,7 @@ export class ThemeStore implements IThemeStore {
   constructor() {
     makeObservable(this, {
       // observable
+      isAnySidebarDropdownOpen: observable.ref,
       sidebarCollapsed: observable.ref,
       sidebarPeek: observable.ref,
       isExtendedSidebarOpened: observable.ref,
@@ -52,6 +56,7 @@ export class ThemeStore implements IThemeStore {
       initiativesSidebarCollapsed: observable.ref,
       projectOverviewSidebarCollapsed: observable.ref,
       // action
+      toggleAnySidebarDropdown: action,
       toggleSidebar: action,
       toggleSidebarPeek: action,
       toggleExtendedSidebar: action,
@@ -65,6 +70,14 @@ export class ThemeStore implements IThemeStore {
     });
   }
 
+  toggleAnySidebarDropdown = (open?: boolean) => {
+    if (open === undefined) {
+      this.isAnySidebarDropdownOpen = !this.isAnySidebarDropdownOpen;
+    } else {
+      this.isAnySidebarDropdownOpen = open;
+    }
+  };
+
   /**
    * Toggle the sidebar collapsed state
    * @param collapsed

From ab9c323ae99a2bf22f20385459119d6be04f4f7f Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Wed, 18 Jun 2025 18:18:13 +0530
Subject: [PATCH 12/47] fix: peek sidebar leave

---
 web/core/components/sidebar/resizable-sidebar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/core/components/sidebar/resizable-sidebar.tsx b/web/core/components/sidebar/resizable-sidebar.tsx
index 373b59571ac..6ae8241502b 100644
--- a/web/core/components/sidebar/resizable-sidebar.tsx
+++ b/web/core/components/sidebar/resizable-sidebar.tsx
@@ -146,13 +146,13 @@ export function ResizableSidebar({
   );
 
   useEffect(() => {
-    if (!isAnySidebarDropdownOpen) {
+    if (!isAnySidebarDropdownOpen && isCollapsed && isHoveringTrigger) {
       handlePeekLeave();
     }
   }, [isAnySidebarDropdownOpen]);
 
   useEffect(() => {
-    if (!isAnyExtendedSidebarExpanded) {
+    if (!isAnyExtendedSidebarExpanded && isCollapsed && isHoveringTrigger) {
       handlePeekLeave();
     }
   }, [isAnyExtendedSidebarExpanded]);

From c2457a45472520a4762939e79529f9972237351a Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Wed, 18 Jun 2025 18:29:32 +0530
Subject: [PATCH 13/47] chore: code refactor

---
 .../workspace-notifications/sidebar/header/root.tsx        | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/web/core/components/workspace-notifications/sidebar/header/root.tsx b/web/core/components/workspace-notifications/sidebar/header/root.tsx
index 7330b30ba5b..ce548b13390 100644
--- a/web/core/components/workspace-notifications/sidebar/header/root.tsx
+++ b/web/core/components/workspace-notifications/sidebar/header/root.tsx
@@ -11,8 +11,6 @@ import { SidebarHamburgerToggle } from "@/components/core";
 import { NotificationSidebarHeaderOptions } from "@/components/workspace-notifications";
 // hooks
 import { useAppTheme } from "@/hooks/store";
-// plane web components
-import { isSidebarToggleVisible } from "@/plane-web/components/desktop";
 
 type TNotificationSidebarHeader = {
   workspaceSlug: string;
@@ -29,11 +27,6 @@ export const NotificationSidebarHeader: FC<TNotificationSidebarHeader> = observe
       <Header.LeftItem>
         {sidebarCollapsed && <SidebarHamburgerToggle />}
 
-        {isSidebarToggleVisible() && (
-          <div className="block bg-custom-sidebar-background-100 md:hidden">
-            <SidebarHamburgerToggle />
-          </div>
-        )}
         <Breadcrumbs>
           <Breadcrumbs.BreadcrumbItem
             type="text"

From 7642e4b51a1d0e010a01e481ea1740b8cbaa8925 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Fri, 20 Jun 2025 16:29:33 +0530
Subject: [PATCH 14/47] chore: code refactor

---
 .../workspace/sidebar/project-navigation.tsx  | 20 ++++++++-----------
 .../workspace/sidebar/sidebar-menu-items.tsx  |  6 +++---
 .../workspace/sidebar/user-menu.tsx           |  1 -
 3 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/web/core/components/workspace/sidebar/project-navigation.tsx b/web/core/components/workspace/sidebar/project-navigation.tsx
index d60c324bfe6..80db2dae191 100644
--- a/web/core/components/workspace/sidebar/project-navigation.tsx
+++ b/web/core/components/workspace/sidebar/project-navigation.tsx
@@ -171,18 +171,14 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
         if (!hasAccess) return null;
 
         return (
-          <>
-            <Link href={item.href} onClick={handleProjectClick}>
-              <SidebarNavItem className="pl-[18px]" isActive={!!isActive(item)}>
-                <div className="flex items-center gap-1.5 py-[1px]">
-                  <item.icon
-                    className={`flex-shrink-0 size-4 ${item.name === "Intake" ? "stroke-1" : "stroke-[1.5]"}`}
-                  />
-                  <span className="text-xs font-medium">{t(item.i18n_key)}</span>
-                </div>
-              </SidebarNavItem>
-            </Link>
-          </>
+          <Link key={item.key} href={item.href} onClick={handleProjectClick}>
+            <SidebarNavItem className="pl-[18px]" isActive={!!isActive(item)}>
+              <div className="flex items-center gap-1.5 py-[1px]">
+                <item.icon className={`flex-shrink-0 size-4 ${item.name === "Intake" ? "stroke-1" : "stroke-[1.5]"}`} />
+                <span className="text-xs font-medium">{t(item.i18n_key)}</span>
+              </div>
+            </SidebarNavItem>
+          </Link>
         );
       })}
     </>
diff --git a/web/core/components/workspace/sidebar/sidebar-menu-items.tsx b/web/core/components/workspace/sidebar/sidebar-menu-items.tsx
index f67eef724b3..5b501c3b08e 100644
--- a/web/core/components/workspace/sidebar/sidebar-menu-items.tsx
+++ b/web/core/components/workspace/sidebar/sidebar-menu-items.tsx
@@ -54,9 +54,9 @@ export const SidebarMenuItems = observer(() => {
           className="flex items-center gap-1.5 text-sm font-medium flex-grow text-custom-text-350"
           id="extended-sidebar-toggle"
           aria-label={t(
-            isExtendedSidebarOpened
-              ? "aria_labels.projects_sidebar.open_extended_sidebar"
-              : "aria_labels.projects_sidebar.close_extended_sidebar"
+                     isExtendedSidebarOpened
+                       ? "aria_labels.projects_sidebar.close_extended_sidebar"
+                       : "aria_labels.projects_sidebar.open_extended_sidebar"
           )}
         >
           <Ellipsis className="flex-shrink-0 size-4" />
diff --git a/web/core/components/workspace/sidebar/user-menu.tsx b/web/core/components/workspace/sidebar/user-menu.tsx
index 7150ffbfc1d..4e0ed5a0682 100644
--- a/web/core/components/workspace/sidebar/user-menu.tsx
+++ b/web/core/components/workspace/sidebar/user-menu.tsx
@@ -8,7 +8,6 @@ import { Home, Inbox, PenSquare } from "lucide-react";
 import { EUserWorkspaceRoles } from "@plane/constants";
 import { UserActivityIcon } from "@plane/ui";
 // components
-import { cn } from "@plane/utils";
 import { SidebarUserMenuItem } from "@/components/workspace/sidebar";
 // hooks
 import { useUserPermissions, useUser } from "@/hooks/store";

From 5b09c4bda02dc4b54c0e73530a11fcdf4fb56d5e Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Fri, 20 Jun 2025 17:49:33 +0530
Subject: [PATCH 15/47] chore: code refactor

---
 packages/constants/src/index.ts                              | 1 +
 packages/constants/src/sidebar.ts                            | 1 +
 web/app/(all)/[workspaceSlug]/(projects)/_sidebar.tsx        | 5 +++--
 .../[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx  | 3 ++-
 4 files changed, 7 insertions(+), 3 deletions(-)
 create mode 100644 packages/constants/src/sidebar.ts

diff --git a/packages/constants/src/index.ts b/packages/constants/src/index.ts
index d7ccebd319e..045538f3a03 100644
--- a/packages/constants/src/index.ts
+++ b/packages/constants/src/index.ts
@@ -35,3 +35,4 @@ export * from "./settings";
 export * from "./icon";
 export * from "./estimates";
 export * from "./analytics";
+export * from "./sidebar";
diff --git a/packages/constants/src/sidebar.ts b/packages/constants/src/sidebar.ts
new file mode 100644
index 00000000000..f68f7f0fdba
--- /dev/null
+++ b/packages/constants/src/sidebar.ts
@@ -0,0 +1 @@
+export const SIDEBAR_WIDTH = 250;
diff --git a/web/app/(all)/[workspaceSlug]/(projects)/_sidebar.tsx b/web/app/(all)/[workspaceSlug]/(projects)/_sidebar.tsx
index 8a1f2526c90..220ceb5593b 100644
--- a/web/app/(all)/[workspaceSlug]/(projects)/_sidebar.tsx
+++ b/web/app/(all)/[workspaceSlug]/(projects)/_sidebar.tsx
@@ -2,6 +2,7 @@
 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";
@@ -20,9 +21,9 @@ export const ProjectAppSidebar: FC = observer(() => {
     isExtendedSidebarOpened,
     isAnySidebarDropdownOpen,
   } = useAppTheme();
-  const { storedValue, setValue } = useLocalStorage("sidebarWidth", 250);
+  const { storedValue, setValue } = useLocalStorage("sidebarWidth", SIDEBAR_WIDTH);
   // states
-  const [sidebarWidth, setSidebarWidth] = useState<number>(storedValue ?? 250);
+  const [sidebarWidth, setSidebarWidth] = useState<number>(storedValue ?? SIDEBAR_WIDTH);
   // derived values
   const isAnyExtendedSidebarOpen = isExtendedSidebarOpened;
 
diff --git a/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx b/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx
index b89fbedfee5..dfe5adbb5d8 100644
--- a/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx
+++ b/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx
@@ -3,6 +3,7 @@
 import React, { FC } from "react";
 import { observer } from "mobx-react";
 // plane imports
+import { SIDEBAR_WIDTH } from "@plane/constants";
 import { useLocalStorage } from "@plane/hooks";
 import { cn } from "@plane/utils";
 // hooks
@@ -21,7 +22,7 @@ export const ExtendedSidebarWrapper: FC<Props> = observer((props) => {
   const { children, extendedSidebarRef, isExtendedSidebarOpened, handleClose, excludedElementId } = props;
   // store hooks
   const { sidebarPeek } = useAppTheme();
-  const { storedValue } = useLocalStorage("sidebarWidth", 250);
+  const { storedValue } = useLocalStorage("sidebarWidth", SIDEBAR_WIDTH);
 
   useExtendedSidebarOutsideClickDetector(extendedSidebarRef, handleClose, excludedElementId);
 

From 4f92a111d043960ddcd9d3778b5ce544939bad0c Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Fri, 27 Jun 2025 14:49:43 +0530
Subject: [PATCH 16/47] chore: icons added

---
 packages/ui/src/icons/ai-icon.tsx    | 30 ++++++++++++++++++++++++
 packages/ui/src/icons/index.ts       |  3 +++
 packages/ui/src/icons/plane-icon.tsx | 35 ++++++++++++++++++++++++++++
 packages/ui/src/icons/wiki-icon.tsx  | 26 +++++++++++++++++++++
 4 files changed, 94 insertions(+)
 create mode 100644 packages/ui/src/icons/ai-icon.tsx
 create mode 100644 packages/ui/src/icons/plane-icon.tsx
 create mode 100644 packages/ui/src/icons/wiki-icon.tsx

diff --git a/packages/ui/src/icons/ai-icon.tsx b/packages/ui/src/icons/ai-icon.tsx
new file mode 100644
index 00000000000..55518401a08
--- /dev/null
+++ b/packages/ui/src/icons/ai-icon.tsx
@@ -0,0 +1,30 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const AiIcon: React.FC<ISvgIcons> = ({ width = "16", height = "16", className, color = "currentColor" }) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 16 16"
+    fill={color}
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <g clip-path="url(#clip0_888_35571)">
+      <path
+        d="M14.2082 0H1.79185C0.801553 0 0 0.801553 0 1.79185V14.2093C0 15.1984 0.801553 16.0012 1.79185 16.0012H14.2093C15.1984 16.0012 16.0012 15.1996 16.0012 14.2093V1.79185C16.0012 0.802748 15.1996 0 14.2093 0H14.2082ZM13.1032 11.5276C13.1032 12.3984 12.3972 13.1032 11.5276 13.1032H4.47245C3.60161 13.1032 2.89682 12.3972 2.89682 11.5276V4.47245C2.89682 3.60161 3.60281 2.89682 4.47245 2.89682H11.5276C12.3984 2.89682 13.1032 3.60281 13.1032 4.47245V11.5276Z"
+        fill={color}
+      />
+      <path
+        d="M9.61291 4.94336H6.38759C5.58996 4.94336 4.94336 5.58996 4.94336 6.38759V9.61291C4.94336 10.4105 5.58996 11.0571 6.38759 11.0571H9.61291C10.4105 11.0571 11.0571 10.4105 11.0571 9.61291V6.38759C11.0571 5.58996 10.4105 4.94336 9.61291 4.94336Z"
+        fill={color}
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_888_35571">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/packages/ui/src/icons/index.ts b/packages/ui/src/icons/index.ts
index 143c3d79a7c..500925e3c6c 100644
--- a/packages/ui/src/icons/index.ts
+++ b/packages/ui/src/icons/index.ts
@@ -52,3 +52,6 @@ export * from "./sticky-note-icon";
 export * from "./bar-icon";
 export * from "./tree-map-icon";
 export * from "./display-properties";
+export * from "./ai-icon";
+export * from "./plane-icon";
+export * from "./wiki-icon";
diff --git a/packages/ui/src/icons/plane-icon.tsx b/packages/ui/src/icons/plane-icon.tsx
new file mode 100644
index 00000000000..f56e8e03ee0
--- /dev/null
+++ b/packages/ui/src/icons/plane-icon.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const PlaneNewIcon: React.FC<ISvgIcons> = ({
+  width = "16",
+  height = "16",
+  className,
+  color = "currentColor",
+}) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 16 16"
+    fill={color}
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <g clip-path="url(#clip0_888_35560)">
+      <path
+        d="M5.15383 9.50566V5.15381H1.34152C0.601228 5.15381 0 5.75399 0 6.49533V14.6595C0 15.3998 0.600183 16.001 1.34152 16.001H9.50568C10.246 16.001 10.8472 15.4008 10.8472 14.6595V10.8461H6.49536C5.75506 10.8461 5.15383 10.246 5.15383 9.50461V9.50566Z"
+        fill={color}
+      />
+      <path
+        d="M14.66 0H6.49582C5.75553 0 5.1543 0.600183 5.1543 1.34152V5.15488H9.50615C10.2464 5.15488 10.8477 5.75506 10.8477 6.49641V10.8483H14.661C15.4013 10.8483 16.0026 10.2481 16.0026 9.50673V1.34152C16.0026 0.601229 15.4024 0 14.661 0H14.66Z"
+        fill={color}
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_888_35560">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/packages/ui/src/icons/wiki-icon.tsx b/packages/ui/src/icons/wiki-icon.tsx
new file mode 100644
index 00000000000..7ef090714c7
--- /dev/null
+++ b/packages/ui/src/icons/wiki-icon.tsx
@@ -0,0 +1,26 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const WikiIcon: React.FC<ISvgIcons> = ({ width = "16", height = "16", className, color = "currentColor" }) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 16 16"
+    fill={color}
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <g clip-path="url(#clip0_888_35566)">
+      <path
+        d="M15.558 6.93332L9.06623 0.441504C8.47755 -0.147168 7.5229 -0.147168 6.93332 0.441504L0.441504 6.93332C-0.147168 7.52199 -0.147168 8.47664 0.441504 9.06623L6.93332 15.558C7.52199 16.1467 8.47664 16.1467 9.06623 15.558L15.558 9.06623C16.1467 8.47755 16.1467 7.5229 15.558 6.93332ZM10.7629 9.65855C10.7629 10.2682 10.2691 10.762 9.65946 10.762H6.341C5.73133 10.762 5.23758 10.2682 5.23758 9.65855V6.34008C5.23758 5.73042 5.73133 5.23667 6.341 5.23667H9.65946C10.2691 5.23667 10.7629 5.73042 10.7629 6.34008V9.65855Z"
+        fill={color}
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_888_35566">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);

From 6fbeb76d115d56cab7d1daca770d32a02af9f9c6 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Fri, 27 Jun 2025 14:52:13 +0530
Subject: [PATCH 17/47] chore: add dock variable and toggle function to theme
 store

---
 web/core/store/theme.store.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/web/core/store/theme.store.ts b/web/core/store/theme.store.ts
index e788089e10e..8e338f2b53c 100644
--- a/web/core/store/theme.store.ts
+++ b/web/core/store/theme.store.ts
@@ -3,6 +3,7 @@ import { action, observable, makeObservable, runInAction } from "mobx";
 export interface IThemeStore {
   // observables
   isAnySidebarDropdownOpen: boolean | undefined;
+  isDockVisible: boolean | undefined;
   sidebarCollapsed: boolean | undefined;
   sidebarPeek: boolean | undefined;
   isExtendedSidebarOpened: boolean | undefined;
@@ -14,6 +15,7 @@ export interface IThemeStore {
   initiativesSidebarCollapsed: boolean | undefined;
   projectOverviewSidebarCollapsed: boolean | undefined;
   // actions
+  toggleDock: (docked?: boolean) => void;
   toggleAnySidebarDropdown: (open?: boolean) => void;
   toggleSidebar: (collapsed?: boolean) => void;
   toggleSidebarPeek: (peek?: boolean) => void;
@@ -30,6 +32,7 @@ export interface IThemeStore {
 export class ThemeStore implements IThemeStore {
   // observables
   isAnySidebarDropdownOpen: boolean | undefined = undefined;
+  isDockVisible: boolean | undefined = true;
   sidebarCollapsed: boolean | undefined = undefined;
   sidebarPeek: boolean | undefined = undefined;
   isExtendedSidebarOpened: boolean | undefined = undefined;
@@ -45,6 +48,7 @@ export class ThemeStore implements IThemeStore {
     makeObservable(this, {
       // observable
       isAnySidebarDropdownOpen: observable.ref,
+      isDockVisible: observable.ref,
       sidebarCollapsed: observable.ref,
       sidebarPeek: observable.ref,
       isExtendedSidebarOpened: observable.ref,
@@ -56,6 +60,7 @@ export class ThemeStore implements IThemeStore {
       initiativesSidebarCollapsed: observable.ref,
       projectOverviewSidebarCollapsed: observable.ref,
       // action
+      toggleDock: action,
       toggleAnySidebarDropdown: action,
       toggleSidebar: action,
       toggleSidebarPeek: action,
@@ -70,6 +75,14 @@ export class ThemeStore implements IThemeStore {
     });
   }
 
+  toggleDock = (docked?: boolean) => {
+    if (docked === undefined) {
+      this.isDockVisible = !this.isDockVisible;
+    } else {
+      this.isDockVisible = docked;
+    }
+  };
+
   toggleAnySidebarDropdown = (open?: boolean) => {
     if (open === undefined) {
       this.isAnySidebarDropdownOpen = !this.isAnySidebarDropdownOpen;

From 3bc896c7e24f25bdf37cccfaac6d01dbbbd9e97e Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Fri, 27 Jun 2025 15:08:09 +0530
Subject: [PATCH 18/47] chore: code refactor

---
 web/core/store/theme.store.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/core/store/theme.store.ts b/web/core/store/theme.store.ts
index 8e338f2b53c..e1b70f3757d 100644
--- a/web/core/store/theme.store.ts
+++ b/web/core/store/theme.store.ts
@@ -32,7 +32,7 @@ export interface IThemeStore {
 export class ThemeStore implements IThemeStore {
   // observables
   isAnySidebarDropdownOpen: boolean | undefined = undefined;
-  isDockVisible: boolean | undefined = true;
+  isDockVisible: boolean | undefined = undefined;
   sidebarCollapsed: boolean | undefined = undefined;
   sidebarPeek: boolean | undefined = undefined;
   isExtendedSidebarOpened: boolean | undefined = undefined;

From 1fde83bdadfad08720c256f2310826f90288f328 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Fri, 27 Jun 2025 15:20:48 +0530
Subject: [PATCH 19/47] chore: code refactor

---
 web/core/store/theme.store.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/core/store/theme.store.ts b/web/core/store/theme.store.ts
index e1b70f3757d..f26f2fc1ded 100644
--- a/web/core/store/theme.store.ts
+++ b/web/core/store/theme.store.ts
@@ -15,7 +15,7 @@ export interface IThemeStore {
   initiativesSidebarCollapsed: boolean | undefined;
   projectOverviewSidebarCollapsed: boolean | undefined;
   // actions
-  toggleDock: (docked?: boolean) => void;
+  toggleDock: (value?: boolean) => void;
   toggleAnySidebarDropdown: (open?: boolean) => void;
   toggleSidebar: (collapsed?: boolean) => void;
   toggleSidebarPeek: (peek?: boolean) => void;
@@ -75,11 +75,11 @@ export class ThemeStore implements IThemeStore {
     });
   }
 
-  toggleDock = (docked?: boolean) => {
-    if (docked === undefined) {
+  toggleDock = (value?: boolean) => {
+    if (value === undefined) {
       this.isDockVisible = !this.isDockVisible;
     } else {
-      this.isDockVisible = docked;
+      this.isDockVisible = value;
     }
   };
 

From e36063874e7ec178d7ad952b9e8c74ad389d2901 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Fri, 27 Jun 2025 17:59:43 +0530
Subject: [PATCH 20/47] chore: code refactor

---
 web/core/store/theme.store.ts | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/web/core/store/theme.store.ts b/web/core/store/theme.store.ts
index f26f2fc1ded..8d477de469a 100644
--- a/web/core/store/theme.store.ts
+++ b/web/core/store/theme.store.ts
@@ -3,7 +3,7 @@ import { action, observable, makeObservable, runInAction } from "mobx";
 export interface IThemeStore {
   // observables
   isAnySidebarDropdownOpen: boolean | undefined;
-  isDockVisible: boolean | undefined;
+  isAppRailVisible: boolean | undefined;
   sidebarCollapsed: boolean | undefined;
   sidebarPeek: boolean | undefined;
   isExtendedSidebarOpened: boolean | undefined;
@@ -15,7 +15,7 @@ export interface IThemeStore {
   initiativesSidebarCollapsed: boolean | undefined;
   projectOverviewSidebarCollapsed: boolean | undefined;
   // actions
-  toggleDock: (value?: boolean) => void;
+  toggleAppRail: (value?: boolean) => void;
   toggleAnySidebarDropdown: (open?: boolean) => void;
   toggleSidebar: (collapsed?: boolean) => void;
   toggleSidebarPeek: (peek?: boolean) => void;
@@ -32,7 +32,7 @@ export interface IThemeStore {
 export class ThemeStore implements IThemeStore {
   // observables
   isAnySidebarDropdownOpen: boolean | undefined = undefined;
-  isDockVisible: boolean | undefined = undefined;
+  isAppRailVisible: boolean | undefined = undefined;
   sidebarCollapsed: boolean | undefined = undefined;
   sidebarPeek: boolean | undefined = undefined;
   isExtendedSidebarOpened: boolean | undefined = undefined;
@@ -48,7 +48,7 @@ export class ThemeStore implements IThemeStore {
     makeObservable(this, {
       // observable
       isAnySidebarDropdownOpen: observable.ref,
-      isDockVisible: observable.ref,
+      isAppRailVisible: observable.ref,
       sidebarCollapsed: observable.ref,
       sidebarPeek: observable.ref,
       isExtendedSidebarOpened: observable.ref,
@@ -60,7 +60,7 @@ export class ThemeStore implements IThemeStore {
       initiativesSidebarCollapsed: observable.ref,
       projectOverviewSidebarCollapsed: observable.ref,
       // action
-      toggleDock: action,
+      toggleAppRail: action,
       toggleAnySidebarDropdown: action,
       toggleSidebar: action,
       toggleSidebarPeek: action,
@@ -75,11 +75,11 @@ export class ThemeStore implements IThemeStore {
     });
   }
 
-  toggleDock = (value?: boolean) => {
+  toggleAppRail = (value?: boolean) => {
     if (value === undefined) {
-      this.isDockVisible = !this.isDockVisible;
+      this.isAppRailVisible = !this.isAppRailVisible;
     } else {
-      this.isDockVisible = value;
+      this.isAppRailVisible = value;
     }
   };
 

From 8299bfa1dc769dd0197034fcaae1a275da3bba3f Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Mon, 30 Jun 2025 17:18:42 +0530
Subject: [PATCH 21/47] chore: theme and workspace store updated

---
 web/core/store/theme.store.ts     | 13 -------------
 web/core/store/workspace/index.ts | 13 +++++++++++++
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/web/core/store/theme.store.ts b/web/core/store/theme.store.ts
index 8d477de469a..e788089e10e 100644
--- a/web/core/store/theme.store.ts
+++ b/web/core/store/theme.store.ts
@@ -3,7 +3,6 @@ import { action, observable, makeObservable, runInAction } from "mobx";
 export interface IThemeStore {
   // observables
   isAnySidebarDropdownOpen: boolean | undefined;
-  isAppRailVisible: boolean | undefined;
   sidebarCollapsed: boolean | undefined;
   sidebarPeek: boolean | undefined;
   isExtendedSidebarOpened: boolean | undefined;
@@ -15,7 +14,6 @@ export interface IThemeStore {
   initiativesSidebarCollapsed: boolean | undefined;
   projectOverviewSidebarCollapsed: boolean | undefined;
   // actions
-  toggleAppRail: (value?: boolean) => void;
   toggleAnySidebarDropdown: (open?: boolean) => void;
   toggleSidebar: (collapsed?: boolean) => void;
   toggleSidebarPeek: (peek?: boolean) => void;
@@ -32,7 +30,6 @@ export interface IThemeStore {
 export class ThemeStore implements IThemeStore {
   // observables
   isAnySidebarDropdownOpen: boolean | undefined = undefined;
-  isAppRailVisible: boolean | undefined = undefined;
   sidebarCollapsed: boolean | undefined = undefined;
   sidebarPeek: boolean | undefined = undefined;
   isExtendedSidebarOpened: boolean | undefined = undefined;
@@ -48,7 +45,6 @@ export class ThemeStore implements IThemeStore {
     makeObservable(this, {
       // observable
       isAnySidebarDropdownOpen: observable.ref,
-      isAppRailVisible: observable.ref,
       sidebarCollapsed: observable.ref,
       sidebarPeek: observable.ref,
       isExtendedSidebarOpened: observable.ref,
@@ -60,7 +56,6 @@ export class ThemeStore implements IThemeStore {
       initiativesSidebarCollapsed: observable.ref,
       projectOverviewSidebarCollapsed: observable.ref,
       // action
-      toggleAppRail: action,
       toggleAnySidebarDropdown: action,
       toggleSidebar: action,
       toggleSidebarPeek: action,
@@ -75,14 +70,6 @@ export class ThemeStore implements IThemeStore {
     });
   }
 
-  toggleAppRail = (value?: boolean) => {
-    if (value === undefined) {
-      this.isAppRailVisible = !this.isAppRailVisible;
-    } else {
-      this.isAppRailVisible = value;
-    }
-  };
-
   toggleAnySidebarDropdown = (open?: boolean) => {
     if (open === undefined) {
       this.isAnySidebarDropdownOpen = !this.isAnySidebarDropdownOpen;
diff --git a/web/core/store/workspace/index.ts b/web/core/store/workspace/index.ts
index 36a47d35dc2..2c1ded1a8ab 100644
--- a/web/core/store/workspace/index.ts
+++ b/web/core/store/workspace/index.ts
@@ -17,6 +17,8 @@ export interface IWorkspaceRootStore {
   loader: boolean;
   // observables
   workspaces: Record<string, IWorkspace>;
+  // record of app rail visibility for each workspace
+  appRailVisibilityMap: Record<string, boolean>;
   // computed
   currentWorkspace: IWorkspace | null;
   workspacesCreatedByCurrentUser: IWorkspace[] | null;
@@ -39,6 +41,8 @@ export interface IWorkspaceRootStore {
     data: Partial<IWorkspaceSidebarNavigationItem>
   ) => Promise<IWorkspaceSidebarNavigationItem | undefined>;
   getNavigationPreferences: (workspaceSlug: string) => IWorkspaceSidebarNavigation | undefined;
+  getAppRailVisibility: (workspaceSlug: string) => boolean;
+  toggleAppRailVisibility: (workspaceSlug: string) => void;
   // sub-stores
   webhook: IWebhookStore;
   apiToken: IApiTokenStore;
@@ -49,6 +53,7 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
   loader: boolean = false;
   // observables
   workspaces: Record<string, IWorkspace> = {};
+  appRailVisibilityMap: Record<string, boolean> = {};
   navigationPreferencesMap: Record<string, IWorkspaceSidebarNavigation> = {};
   // services
   workspaceService;
@@ -80,6 +85,8 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
       deleteWorkspace: action,
       fetchSidebarNavigationPreferences: action,
       updateSidebarPreference: action,
+      getAppRailVisibility: action,
+      toggleAppRailVisibility: action,
     });
 
     // services
@@ -112,6 +119,12 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
     return redirectionRoute;
   };
 
+  getAppRailVisibility = (workspaceSlug: string) => this.appRailVisibilityMap[workspaceSlug] || false;
+
+  toggleAppRailVisibility = (workspaceSlug: string) => {
+    this.appRailVisibilityMap[workspaceSlug] = !this.appRailVisibilityMap[workspaceSlug];
+  };
+
   /**
    * computed value of current workspace based on workspace slug saved in the query store
    */

From cc0e2cf88746653112290a6bbee90ceac341cef2 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Mon, 30 Jun 2025 17:21:40 +0530
Subject: [PATCH 22/47] chore: workspace content wrapper and apprail context

---
 .../components/workspace/content-wrapper.tsx  |  9 ++++
 web/ce/components/workspace/index.ts          |  1 +
 web/core/hooks/context/app-rail-context.tsx   | 53 +++++++++++++++++++
 web/core/hooks/use-app-rail.tsx               | 10 ++++
 4 files changed, 73 insertions(+)
 create mode 100644 web/ce/components/workspace/content-wrapper.tsx
 create mode 100644 web/core/hooks/context/app-rail-context.tsx
 create mode 100644 web/core/hooks/use-app-rail.tsx

diff --git a/web/ce/components/workspace/content-wrapper.tsx b/web/ce/components/workspace/content-wrapper.tsx
new file mode 100644
index 00000000000..242db454206
--- /dev/null
+++ b/web/ce/components/workspace/content-wrapper.tsx
@@ -0,0 +1,9 @@
+"use client";
+import React from "react";
+import { observer } from "mobx-react";
+
+export const WorkspaceContentWrapper = observer(({ children }: { children: React.ReactNode }) => (
+  <div className="flex relative size-full overflow-hidden bg-custom-background-90 rounded-lg transition-all ease-in-out duration-300">
+    <div className="size-full p-2 flex-grow transition-all ease-in-out duration-300">{children}</div>
+  </div>
+));
diff --git a/web/ce/components/workspace/index.ts b/web/ce/components/workspace/index.ts
index d68c6eca2f5..ff5aa27ef6d 100644
--- a/web/ce/components/workspace/index.ts
+++ b/web/ce/components/workspace/index.ts
@@ -4,3 +4,4 @@ export * from "./billing";
 export * from "./delete-workspace-section";
 export * from "./sidebar";
 export * from "./members";
+export * from "./content-wrapper";
diff --git a/web/core/hooks/context/app-rail-context.tsx b/web/core/hooks/context/app-rail-context.tsx
new file mode 100644
index 00000000000..94755a3c795
--- /dev/null
+++ b/web/core/hooks/context/app-rail-context.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import React, { createContext, ReactNode, useEffect } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// hooks
+import useLocalStorage from "@/hooks/use-local-storage";
+
+export interface AppRailContextType {
+  isEnabled: boolean;
+  shouldRenderAppRail: boolean;
+  toggleAppRail: (value?: boolean) => void;
+}
+
+const AppRailContext = createContext<AppRailContextType | undefined>(undefined);
+
+export { AppRailContext };
+
+interface AppRailProviderProps {
+  children: ReactNode;
+}
+
+export const AppRailProvider = observer(({ children }: AppRailProviderProps) => {
+  const { workspaceSlug } = useParams();
+  const { storedValue: isAppRailVisible, setValue: setIsAppRailVisible } = useLocalStorage<boolean>(
+    `APP_RAIL_${workspaceSlug}`,
+    false
+  );
+
+  const isEnabled = false;
+
+  useEffect(() => {
+    if (!isEnabled && isAppRailVisible) {
+      setIsAppRailVisible(false);
+    }
+  }, [workspaceSlug]);
+
+  const toggleAppRail = (value?: boolean) => {
+    if (value === undefined) {
+      setIsAppRailVisible(!isAppRailVisible);
+    } else {
+      setIsAppRailVisible(value);
+    }
+  };
+
+  const contextValue: AppRailContextType = {
+    isEnabled,
+    shouldRenderAppRail: !!isAppRailVisible,
+    toggleAppRail,
+  };
+
+  return <AppRailContext.Provider value={contextValue}>{children}</AppRailContext.Provider>;
+});
diff --git a/web/core/hooks/use-app-rail.tsx b/web/core/hooks/use-app-rail.tsx
new file mode 100644
index 00000000000..5318f80df7e
--- /dev/null
+++ b/web/core/hooks/use-app-rail.tsx
@@ -0,0 +1,10 @@
+import { useContext } from "react";
+import { AppRailContext } from "./context/app-rail-context";
+
+export const useAppRail = () => {
+  const context = useContext(AppRailContext);
+  if (context === undefined) {
+    throw new Error("useAppRail must be used within AppRailProvider");
+  }
+  return context;
+};

From b3045000020f4f87d084b76d5eb0eb71ec765023 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Mon, 30 Jun 2025 17:24:32 +0530
Subject: [PATCH 23/47] chore: workspace and project wrapper updated

---
 web/core/layouts/auth-layout/project-wrapper.tsx   |  2 +-
 web/core/layouts/auth-layout/workspace-wrapper.tsx | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/web/core/layouts/auth-layout/project-wrapper.tsx b/web/core/layouts/auth-layout/project-wrapper.tsx
index 325d3a48755..ad192f90fa0 100644
--- a/web/core/layouts/auth-layout/project-wrapper.tsx
+++ b/web/core/layouts/auth-layout/project-wrapper.tsx
@@ -166,7 +166,7 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
   // check if the project member apis is loading
   if (isParentLoading || (!projectMemberInfo && projectId && hasPermissionToCurrentProject === null))
     return (
-      <div className="grid h-screen place-items-center bg-custom-background-100 p-4">
+      <div className="grid h-screen place-items-center bg-custom-background-100 p-4 rounded-lg border border-custom-border-200">
         <div className="flex flex-col items-center gap-3 text-center">
           <LogoSpinner />
         </div>
diff --git a/web/core/layouts/auth-layout/workspace-wrapper.tsx b/web/core/layouts/auth-layout/workspace-wrapper.tsx
index 48fd4645255..3483d21a015 100644
--- a/web/core/layouts/auth-layout/workspace-wrapper.tsx
+++ b/web/core/layouts/auth-layout/workspace-wrapper.tsx
@@ -16,11 +16,13 @@ import { Button, getButtonStyling, setToast, TOAST_TYPE, Tooltip } from "@plane/
 import { cn } from "@plane/utils";
 import { LogoSpinner } from "@/components/common";
 // hooks
+import { AppRailProvider } from "@/hooks/context/app-rail-context";
 import { useMember, useProject, useProjectState, useUser, useUserPermissions, useWorkspace } from "@/hooks/store";
 import { useFavorite } from "@/hooks/store/use-favorite";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // local
 import { persistence } from "@/local-db/storage.sqlite";
+import { WorkspaceContentWrapper } from "@/plane-web/components/workspace";
 // constants
 // images
 import PlaneBlackLogo from "@/public/plane-logos/black-horizontal-with-blue-logo.png";
@@ -136,7 +138,7 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
   // if list of workspaces are not there then we have to render the spinner
   if (isParentLoading || allWorkspaces === undefined || loader || isDBInitializing) {
     return (
-      <div className="grid h-screen place-items-center bg-custom-background-100 p-4">
+      <div className="grid h-screen place-items-center bg-custom-background-100 p-4 rounded-lg border border-custom-border-200">
         <div className="flex flex-col items-center gap-3 text-center">
           <LogoSpinner />
         </div>
@@ -236,5 +238,9 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
     );
   }
 
-  return <>{children}</>;
+  return (
+    <AppRailProvider>
+      <WorkspaceContentWrapper>{children}</WorkspaceContentWrapper>
+    </AppRailProvider>
+  );
 });

From c4f4e31c155589d4c8a929c714b33c2aac833bec Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Mon, 30 Jun 2025 17:36:25 +0530
Subject: [PATCH 24/47] chore: app rail component

---
 web/ce/components/app-rail/index.ts | 1 +
 web/ce/components/app-rail/root.tsx | 4 ++++
 web/ee/components/app-rail/index.ts | 1 +
 3 files changed, 6 insertions(+)
 create mode 100644 web/ce/components/app-rail/index.ts
 create mode 100644 web/ce/components/app-rail/root.tsx
 create mode 100644 web/ee/components/app-rail/index.ts

diff --git a/web/ce/components/app-rail/index.ts b/web/ce/components/app-rail/index.ts
new file mode 100644
index 00000000000..1efe34c51ec
--- /dev/null
+++ b/web/ce/components/app-rail/index.ts
@@ -0,0 +1 @@
+export * from "./root";
diff --git a/web/ce/components/app-rail/root.tsx b/web/ce/components/app-rail/root.tsx
new file mode 100644
index 00000000000..259764b2695
--- /dev/null
+++ b/web/ce/components/app-rail/root.tsx
@@ -0,0 +1,4 @@
+"use client";
+import React from "react";
+
+export const AppRailRoot = () => <></>;
diff --git a/web/ee/components/app-rail/index.ts b/web/ee/components/app-rail/index.ts
new file mode 100644
index 00000000000..68889686dcf
--- /dev/null
+++ b/web/ee/components/app-rail/index.ts
@@ -0,0 +1 @@
+export * from "ce/components/app-rail";

From a388c0535d40051f4f914851b55778d93218c3b3 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Mon, 30 Jun 2025 17:39:03 +0530
Subject: [PATCH 25/47] chore: content wrapper

---
 web/ee/components/workspace/upgrade-badge.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/ee/components/workspace/upgrade-badge.tsx b/web/ee/components/workspace/upgrade-badge.tsx
index 1c7fcfb644c..d12716555fc 100644
--- a/web/ee/components/workspace/upgrade-badge.tsx
+++ b/web/ee/components/workspace/upgrade-badge.tsx
@@ -1 +1,2 @@
 export * from "ce/components/workspace/upgrade-badge";
+export * from "ce/components/workspace/content-wrapper";

From 49a74fac94c5f2fade2cd55901015db67f18abc0 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Mon, 30 Jun 2025 17:44:14 +0530
Subject: [PATCH 26/47] chore: sidebar component updated

---
 web/core/components/sidebar/index.ts          |   1 +
 .../components/sidebar/resizable-sidebar.tsx  |   4 +-
 web/core/components/sidebar/sidebar-item.tsx  | 158 ++++++++++++++++++
 3 files changed, 162 insertions(+), 1 deletion(-)
 create mode 100644 web/core/components/sidebar/sidebar-item.tsx

diff --git a/web/core/components/sidebar/index.ts b/web/core/components/sidebar/index.ts
index b64ab385e78..a62431ef52f 100644
--- a/web/core/components/sidebar/index.ts
+++ b/web/core/components/sidebar/index.ts
@@ -1,2 +1,3 @@
 export * from "./sidebar-navigation";
 export * from "./resizable-sidebar";
+export * from "./sidebar-item";
diff --git a/web/core/components/sidebar/resizable-sidebar.tsx b/web/core/components/sidebar/resizable-sidebar.tsx
index 6ae8241502b..74bddf11590 100644
--- a/web/core/components/sidebar/resizable-sidebar.tsx
+++ b/web/core/components/sidebar/resizable-sidebar.tsx
@@ -23,6 +23,7 @@ interface ResizableSidebarProps {
   extendedSidebar?: ReactElement;
   isAnyExtendedSidebarExpanded?: boolean;
   isAnySidebarDropdownOpen?: boolean;
+  disablePeekTrigger?: boolean;
 }
 
 export function ResizableSidebar({
@@ -42,6 +43,7 @@ export function ResizableSidebar({
   extendedSidebar,
   isAnyExtendedSidebarExpanded = false,
   isAnySidebarDropdownOpen = false,
+  disablePeekTrigger = false,
 }: ResizableSidebarProps) {
   // states
   const [isResizing, setIsResizing] = useState(false);
@@ -221,7 +223,7 @@ export function ResizableSidebar({
       </div>
 
       {/* Peek Trigger Area */}
-      {isCollapsed && (
+      {isCollapsed && !disablePeekTrigger && (
         <div
           className={cn(
             "fixed top-0 left-0 w-1 h-full z-50 bg-transparent",
diff --git a/web/core/components/sidebar/sidebar-item.tsx b/web/core/components/sidebar/sidebar-item.tsx
new file mode 100644
index 00000000000..48d0b0ccff9
--- /dev/null
+++ b/web/core/components/sidebar/sidebar-item.tsx
@@ -0,0 +1,158 @@
+import Link from "next/link";
+import { cn } from "@plane/utils";
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+interface AppSidebarItemData {
+  href?: string;
+  label?: string;
+  icon?: React.ReactNode;
+  isActive?: boolean;
+  onClick?: () => void;
+  disabled?: boolean;
+}
+
+interface AppSidebarItemProps {
+  variant?: "link" | "button";
+  item?: AppSidebarItemData;
+}
+
+interface AppSidebarItemLabelProps {
+  highlight?: boolean;
+  label?: string;
+}
+
+interface AppSidebarItemIconProps {
+  icon?: React.ReactNode;
+  highlight?: boolean;
+}
+
+interface AppSidebarLinkItemProps {
+  href?: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface AppSidebarButtonItemProps {
+  children: React.ReactNode;
+  onClick?: () => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+// ============================================================================
+// STYLES
+// ============================================================================
+
+const styles = {
+  base: "group flex flex-col gap-0.5 items-center justify-center text-custom-text-300",
+  icon: "flex items-center justify-center gap-2 size-8 rounded-md text-custom-text-300",
+  iconActive: "bg-custom-background-80 text-custom-text-200",
+  iconInactive: "group-hover:text-custom-text-200 group-hover:bg-custom-background-80",
+  label: "text-xs font-semibold",
+  labelActive: "text-custom-text-200",
+  labelInactive: "group-hover:text-custom-text-200 text-custom-text-300",
+} as const;
+
+// ============================================================================
+// SUB-COMPONENTS
+// ============================================================================
+
+const AppSidebarItemLabel: React.FC<AppSidebarItemLabelProps> = ({ highlight = false, label }) => {
+  if (!label) return null;
+
+  return (
+    <span
+      className={cn(styles.label, {
+        [styles.labelActive]: highlight,
+        [styles.labelInactive]: !highlight,
+      })}
+    >
+      {label}
+    </span>
+  );
+};
+
+const AppSidebarItemIcon: React.FC<AppSidebarItemIconProps> = ({ icon, highlight }) => {
+  if (!icon) return null;
+
+  return (
+    <div
+      className={cn(styles.icon, {
+        [styles.iconActive]: highlight,
+        [styles.iconInactive]: !highlight,
+      })}
+    >
+      {icon}
+    </div>
+  );
+};
+
+const AppSidebarLinkItem: React.FC<AppSidebarLinkItemProps> = ({ href, children, className }) => {
+  if (!href) return null;
+
+  return (
+    <Link href={href} className={cn(styles.base, className)}>
+      {children}
+    </Link>
+  );
+};
+
+const AppSidebarButtonItem: React.FC<AppSidebarButtonItemProps> = ({
+  children,
+  onClick,
+  disabled = false,
+  className,
+}) => (
+  <button className={cn(styles.base, className)} onClick={onClick} disabled={disabled} type="button">
+    {children}
+  </button>
+);
+
+// ============================================================================
+// MAIN COMPONENT
+// ============================================================================
+
+type AppSidebarItemComponent = React.FC<AppSidebarItemProps> & {
+  Label: React.FC<AppSidebarItemLabelProps>;
+  Icon: React.FC<AppSidebarItemIconProps>;
+  Link: React.FC<AppSidebarLinkItemProps>;
+  Button: React.FC<AppSidebarButtonItemProps>;
+};
+
+const AppSidebarItem: AppSidebarItemComponent = ({ variant = "link", item }) => {
+  if (!item) return null;
+
+  const { icon, isActive, label, href, onClick, disabled } = item;
+
+  const commonItems = (
+    <>
+      <AppSidebarItemIcon icon={icon} highlight={isActive} />
+      <AppSidebarItemLabel highlight={isActive} label={label} />
+    </>
+  );
+
+  if (variant === "link") {
+    return <AppSidebarLinkItem href={href}>{commonItems}</AppSidebarLinkItem>;
+  }
+
+  return (
+    <AppSidebarButtonItem onClick={onClick} disabled={disabled}>
+      {commonItems}
+    </AppSidebarButtonItem>
+  );
+};
+
+// ============================================================================
+// COMPOUND COMPONENT ASSIGNMENT
+// ============================================================================
+
+AppSidebarItem.Label = AppSidebarItemLabel;
+AppSidebarItem.Icon = AppSidebarItemIcon;
+AppSidebarItem.Link = AppSidebarLinkItem;
+AppSidebarItem.Button = AppSidebarButtonItem;
+
+export { AppSidebarItem };
+export type { AppSidebarItemData, AppSidebarItemProps };

From 28202c13e457729ddcbd23d512d93d92deec4abb Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Mon, 30 Jun 2025 17:58:38 +0530
Subject: [PATCH 27/47] chore: layout changes and code refactoring

---
 .../[workspaceSlug]/(projects)/_sidebar.tsx   |   4 +
 .../(projects)/extended-sidebar-wrapper.tsx   |  12 +-
 .../[workspaceSlug]/(projects)/layout.tsx     |  14 +-
 .../[workspaceSlug]/(projects)/sidebar.tsx    |  36 ++-
 .../[workspaceSlug]/(settings)/layout.tsx     |  18 +-
 web/app/(all)/profile/layout.tsx              |   2 +-
 .../sidebar/sidebar-menu-hamburger-toggle.tsx |   4 +-
 web/core/components/settings/header.tsx       |  11 +-
 web/core/components/settings/sidebar/root.tsx |   8 +-
 .../workspace/sidebar/dropdown-item.tsx       |   2 +-
 .../components/workspace/sidebar/dropdown.tsx | 276 +-----------------
 .../workspace/sidebar/help-section/index.ts   |   1 +
 .../workspace/sidebar/help-section/root.tsx   | 137 +++++++++
 .../components/workspace/sidebar/index.ts     |   1 +
 .../workspace/sidebar/user-menu-root.tsx      | 159 ++++++++++
 .../workspace/sidebar/workspace-menu-root.tsx | 216 ++++++++++++++
 16 files changed, 591 insertions(+), 310 deletions(-)
 create mode 100644 web/core/components/workspace/sidebar/help-section/index.ts
 create mode 100644 web/core/components/workspace/sidebar/help-section/root.tsx
 create mode 100644 web/core/components/workspace/sidebar/user-menu-root.tsx
 create mode 100644 web/core/components/workspace/sidebar/workspace-menu-root.tsx

diff --git a/web/app/(all)/[workspaceSlug]/(projects)/_sidebar.tsx b/web/app/(all)/[workspaceSlug]/(projects)/_sidebar.tsx
index 220ceb5593b..cd91d1c28d3 100644
--- a/web/app/(all)/[workspaceSlug]/(projects)/_sidebar.tsx
+++ b/web/app/(all)/[workspaceSlug]/(projects)/_sidebar.tsx
@@ -7,6 +7,7 @@ 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";
@@ -24,6 +25,8 @@ export const ProjectAppSidebar: FC = observer(() => {
   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;
 
@@ -51,6 +54,7 @@ export const ProjectAppSidebar: FC = observer(() => {
         }
         isAnyExtendedSidebarExpanded={isAnyExtendedSidebarOpen}
         isAnySidebarDropdownOpen={isAnySidebarDropdownOpen}
+        disablePeekTrigger={shouldRenderAppRail}
       >
         <AppSidebar />
       </ResizableSidebar>
diff --git a/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx b/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx
index dfe5adbb5d8..52ac747aa7b 100644
--- a/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx
+++ b/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx
@@ -8,6 +8,7 @@ import { useLocalStorage } from "@plane/hooks";
 import { cn } from "@plane/utils";
 // hooks
 import { useAppTheme } from "@/hooks/store";
+import { useAppRail } from "@/hooks/use-app-rail";
 import useExtendedSidebarOutsideClickDetector from "@/hooks/use-extended-sidebar-overview-outside-click";
 
 type Props = {
@@ -22,6 +23,7 @@ export const ExtendedSidebarWrapper: FC<Props> = observer((props) => {
   const { children, extendedSidebarRef, isExtendedSidebarOpened, handleClose, excludedElementId } = props;
   // store hooks
   const { sidebarPeek } = useAppTheme();
+  const { shouldRenderAppRail } = useAppRail();
   const { storedValue } = useLocalStorage("sidebarWidth", SIDEBAR_WIDTH);
 
   useExtendedSidebarOutsideClickDetector(extendedSidebarRef, handleClose, excludedElementId);
@@ -31,7 +33,7 @@ export const ExtendedSidebarWrapper: FC<Props> = observer((props) => {
       id={excludedElementId}
       ref={extendedSidebarRef}
       className={cn(
-        `fixed top-0 h-full z-[19] flex flex-col w-[300px]  transform transition-all duration-300 ease-in-out bg-custom-background-100 border-r border-custom-sidebar-border-200 p-4 shadow-sm`,
+        `fixed h-full z-[19] flex flex-col w-[300px] py-2 transform transition-all duration-300 ease-in-out bg-custom-background-100 border border-l-0 border-custom-sidebar-border-200 p-4 shadow-sm`,
         {
           "translate-x-0 opacity-100": isExtendedSidebarOpened,
           "-translate-x-[600px] opacity-0 w-0": !isExtendedSidebarOpened,
@@ -39,10 +41,10 @@ export const ExtendedSidebarWrapper: FC<Props> = observer((props) => {
         }
       )}
       style={{
-        top: sidebarPeek ? "3rem" : "0",
-        bottom: sidebarPeek ? "3rem" : "0",
-        left: `${storedValue}px`,
-        height: sidebarPeek ? "calc(100% - 6rem)" : "100%",
+        top: sidebarPeek ? "3rem" : "0.5rem",
+        bottom: sidebarPeek ? "3rem" : "0.5rem",
+        left: `${(storedValue ?? SIDEBAR_WIDTH) + (shouldRenderAppRail && !sidebarPeek ? 60 : 0)}px`,
+        height: sidebarPeek ? "calc(100% - 6rem)" : "calc(100% - 1.25rem)",
       }}
     >
       {children}
diff --git a/web/app/(all)/[workspaceSlug]/(projects)/layout.tsx b/web/app/(all)/[workspaceSlug]/(projects)/layout.tsx
index 1e09ef39027..860242dc5bf 100644
--- a/web/app/(all)/[workspaceSlug]/(projects)/layout.tsx
+++ b/web/app/(all)/[workspaceSlug]/(projects)/layout.tsx
@@ -2,9 +2,7 @@
 
 import { CommandPalette } from "@/components/command-palette";
 import { AuthenticationWrapper } from "@/lib/wrappers";
-// plane web components
 import { WorkspaceAuthWrapper } from "@/plane-web/layouts/workspace-wrapper";
-// local imports
 import { ProjectAppSidebar } from "./_sidebar";
 
 export default function WorkspaceLayout({ children }: { children: React.ReactNode }) {
@@ -12,11 +10,13 @@ export default function WorkspaceLayout({ children }: { children: React.ReactNod
     <AuthenticationWrapper>
       <CommandPalette />
       <WorkspaceAuthWrapper>
-        <div className="relative flex h-screen w-full overflow-hidden">
-          <ProjectAppSidebar />
-          <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>
diff --git a/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx b/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx
index 6458b10883f..883ce74d237 100644
--- a/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx
+++ b/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx
@@ -1,26 +1,28 @@
 import { FC, useEffect, useRef } from "react";
 import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react";
+import { PanelLeft } from "lucide-react";
 // plane helpers
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useOutsideClickDetector } from "@plane/hooks";
 // components
-import { cn } from "@plane/utils";
-import { SidebarDropdown, SidebarHelpSection, SidebarProjectsList, SidebarQuickActions } from "@/components/workspace";
+import { SidebarDropdown, SidebarProjectsList, SidebarQuickActions } from "@/components/workspace";
 import { SidebarFavoritesMenu } from "@/components/workspace/sidebar/favorites/favorites-menu";
 import { SidebarMenuItems } from "@/components/workspace/sidebar/sidebar-menu-items";
 // hooks
 import { useAppTheme, useUserPermissions } from "@/hooks/store";
 import { useFavorite } from "@/hooks/store/use-favorite";
+import { useAppRail } from "@/hooks/use-app-rail";
 import useSize from "@/hooks/use-window-size";
 // plane web components
-import { SidebarAppSwitcher } from "@/plane-web/components/sidebar";
+import { WorkspaceEditionBadge } from "@/plane-web/components/workspace/edition-badge";
 import { SidebarTeamsList } from "@/plane-web/components/workspace/sidebar/teams-sidebar-list";
 
 export const AppSidebar: FC = observer(() => {
   // store hooks
   const { allowPermissions } = useUserPermissions();
-  const { toggleSidebar, sidebarCollapsed } = useAppTheme();
+  const { toggleSidebar, sidebarCollapsed, sidebarPeek, toggleSidebarPeek } = useAppTheme();
+  const { shouldRenderAppRail } = useAppRail();
   const { groupedFavorites } = useFavorite();
   const windowSize = useSize();
   // refs
@@ -49,12 +51,24 @@ export const AppSidebar: FC = observer(() => {
 
   return (
     <>
-      <div className="px-4">
+      <div className="flex flex-col gap-2 px-4">
         {/* Workspace switcher and settings */}
-        <SidebarDropdown />
-        <div className="flex-shrink-0 h-4" />
-        {/* App switcher */}
-        {canPerformWorkspaceMemberActions && <SidebarAppSwitcher />}
+        {!shouldRenderAppRail && <SidebarDropdown />}
+
+        <div className="flex items-center justify-between gap-2">
+          <span className="text-md text-custom-text-200 font-medium px-1 pt-1">Projects</span>
+          <div className="flex items-center gap-2">
+            <button
+              className="flex items-center justify-center size-6 rounded text-custom-text-200 hover:text-custom-primary-100 hover:bg-custom-background-90"
+              onClick={() => {
+                if (sidebarPeek) toggleSidebarPeek(false);
+                toggleSidebar();
+              }}
+            >
+              <PanelLeft className="size-4" />
+            </button>
+          </div>
+        </div>
         {/* Quick actions */}
         <SidebarQuickActions />
       </div>
@@ -68,7 +82,9 @@ export const AppSidebar: FC = observer(() => {
         <SidebarProjectsList />
       </div>
       {/* Help Section */}
-      <SidebarHelpSection />
+      <div className="flex items-center justify-center p-2 border-t border-custom-border-200 bg-custom-sidebar-background-100 h-12">
+        <WorkspaceEditionBadge />
+      </div>
     </>
   );
 });
diff --git a/web/app/(all)/[workspaceSlug]/(settings)/layout.tsx b/web/app/(all)/[workspaceSlug]/(settings)/layout.tsx
index 4bd4a534044..593a1b0931a 100644
--- a/web/app/(all)/[workspaceSlug]/(settings)/layout.tsx
+++ b/web/app/(all)/[workspaceSlug]/(settings)/layout.tsx
@@ -11,14 +11,16 @@ export default function SettingsLayout({ children }: { children: React.ReactNode
     <AuthenticationWrapper>
       <WorkspaceAuthWrapper>
         <CommandPalette />
-        <main className="relative flex h-screen w-full flex-col overflow-hidden bg-custom-background-100">
-          {/* Header */}
-          <SettingsHeader />
-          {/* Content */}
-          <ContentWrapper className="px-4 md:pl-12 md:flex w-full">
-            <div className="w-full h-full overflow-hidden">{children}</div>
-          </ContentWrapper>
-        </main>
+        <div className="relative flex h-full w-full overflow-hidden rounded-lg border border-custom-border-200">
+          <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
+            {/* Header */}
+            <SettingsHeader />
+            {/* Content */}
+            <ContentWrapper className="p-page-x md:flex w-full">
+              <div className="w-full h-full overflow-hidden">{children}</div>
+            </ContentWrapper>
+          </main>
+        </div>
       </WorkspaceAuthWrapper>
     </AuthenticationWrapper>
   );
diff --git a/web/app/(all)/profile/layout.tsx b/web/app/(all)/profile/layout.tsx
index 21bc6566d8e..21e02480d30 100644
--- a/web/app/(all)/profile/layout.tsx
+++ b/web/app/(all)/profile/layout.tsx
@@ -19,7 +19,7 @@ export default function ProfileSettingsLayout(props: Props) {
     <>
       <CommandPalette />
       <AuthenticationWrapper>
-        <div className="relative flex h-full w-full overflow-hidden">
+        <div className="relative flex h-full w-full overflow-hidden rounded-lg border border-custom-border-200">
           <ProfileLayoutSidebar />
           <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
             <div className="h-full w-full overflow-hidden">{children}</div>
diff --git a/web/core/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx b/web/core/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
index 314f661f9d2..76414317672 100644
--- a/web/core/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
+++ b/web/core/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { observer } from "mobx-react";
-import { Menu } from "lucide-react";
+import { PanelRight } from "lucide-react";
 import { useAppTheme } from "@/hooks/store";
 
 export const SidebarHamburgerToggle = observer(() => {
@@ -20,7 +20,7 @@ export const SidebarHamburgerToggle = observer(() => {
       className="group flex-shrink-0 size-7 grid place-items-center rounded hover:bg-custom-background-80 transition-all bg-custom-background-90"
       onClick={handleClick}
     >
-      <Menu className="size-3.5 text-custom-text-200 transition-all group-hover:text-custom-text-100" />
+      <PanelRight className="size-3.5 text-custom-text-200 transition-all group-hover:text-custom-text-100" />
     </button>
   );
 });
diff --git a/web/core/components/settings/header.tsx b/web/core/components/settings/header.tsx
index 0beb28c93ee..ee722ba0056 100644
--- a/web/core/components/settings/header.tsx
+++ b/web/core/components/settings/header.tsx
@@ -19,12 +19,9 @@ export const SettingsHeader = observer(() => {
 
   return (
     <div
-      className={cn(
-        "bg-custom-background-90 px-4 py-4 gap-2 md:px-12 md:py-8 transition-all duration-300 ease-in-out relative",
-        {
-          "!pt-4 flex md:flex-col": isScrolled,
-        }
-      )}
+      className={cn("bg-custom-background-90 p-page-x transition-all duration-300 ease-in-out relative", {
+        "!pt-4 flex md:flex-col": isScrolled,
+      })}
     >
       <Link
         href={`/${currentWorkspace?.slug}`}
@@ -41,7 +38,7 @@ export const SettingsHeader = observer(() => {
       <Link
         href={`/${currentWorkspace?.slug}`}
         className={cn(
-          "group flex  gap-2 text-custom-text-300 mb-4 border border-transparent w-fit rounded-lg",
+          "group flex  gap-2 text-custom-text-300 mb-3 border border-transparent w-fit rounded-lg",
           !isScrolled ? "hover:bg-custom-background-100 hover:border-custom-border-200 items-center pr-2 " : " h-0 m-0"
         )}
       >
diff --git a/web/core/components/settings/sidebar/root.tsx b/web/core/components/settings/sidebar/root.tsx
index b29425f9e36..e6003fc2c59 100644
--- a/web/core/components/settings/sidebar/root.tsx
+++ b/web/core/components/settings/sidebar/root.tsx
@@ -1,5 +1,6 @@
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
+import { ScrollArea } from "@plane/ui";
 import { cn } from "@plane/utils";
 import { SettingsSidebarHeader } from "./header";
 import SettingsSidebarNavItem, { TSettingItem } from "./nav-item";
@@ -45,7 +46,10 @@ export const SettingsSidebar = observer((props: SettingsSidebarProps) => {
       {/* Header */}
       <SettingsSidebarHeader customHeader={customHeader} />
       {/* Navigation */}
-      <div className="divide-y divide-custom-border-100 overflow-x-hidden w-full h-full overflow-y-scroll">
+      <ScrollArea
+        className="divide-y divide-custom-border-100 overflow-x-hidden w-full h-full overflow-y-scroll"
+        type="hover"
+      >
         {categories.map((category) => (
           <div key={category} className="py-3">
             <span className="text-sm font-semibold text-custom-text-350 capitalize mb-2">{t(category)}</span>
@@ -69,7 +73,7 @@ export const SettingsSidebar = observer((props: SettingsSidebarProps) => {
             )}
           </div>
         ))}
-      </div>
+      </ScrollArea>
     </div>
   );
 });
diff --git a/web/core/components/workspace/sidebar/dropdown-item.tsx b/web/core/components/workspace/sidebar/dropdown-item.tsx
index 68b2d5b2e98..97d22630736 100644
--- a/web/core/components/workspace/sidebar/dropdown-item.tsx
+++ b/web/core/components/workspace/sidebar/dropdown-item.tsx
@@ -64,7 +64,7 @@ const SidebarDropdownItem = observer((props: TProps) => {
             </span>
             <div className="w-[inherit]">
               <div
-                className={`truncate text-ellipsis text-sm font-medium ${workspaceSlug === workspace.slug ? "" : "text-custom-text-200"}`}
+                className={`truncate text-left text-ellipsis text-sm font-medium ${workspaceSlug === workspace.slug ? "" : "text-custom-text-200"}`}
               >
                 {workspace.name}
               </div>
diff --git a/web/core/components/workspace/sidebar/dropdown.tsx b/web/core/components/workspace/sidebar/dropdown.tsx
index 55315d52483..a70590dcd92 100644
--- a/web/core/components/workspace/sidebar/dropdown.tsx
+++ b/web/core/components/workspace/sidebar/dropdown.tsx
@@ -1,270 +1,12 @@
 "use client";
 
-import { Fragment, Ref, useState, useEffect } from "react";
 import { observer } from "mobx-react";
-import Link from "next/link";
-import { useParams } from "next/navigation";
-import { usePopper } from "react-popper";
-// icons
-import { ChevronDown, CirclePlus, LogOut, Mails, Settings } from "lucide-react";
-// ui
-import { Menu, Transition } from "@headlessui/react";
-// plane imports
-import { GOD_MODE_URL } from "@plane/constants";
-import { useTranslation } from "@plane/i18n";
-import { IWorkspace } from "@plane/types";
-import { Avatar, Loader, TOAST_TYPE, setToast } from "@plane/ui";
-import { orderWorkspacesList, cn, getFileURL } from "@plane/utils";
-// helpers
-// hooks
-import { useAppTheme, useUser, useUserProfile, useWorkspace } from "@/hooks/store";
-// plane web helpers
-import { getIsWorkspaceCreationDisabled } from "@/plane-web/helpers/instance.helper";
-// components
-import { WorkspaceLogo } from "../logo";
-import SidebarDropdownItem from "./dropdown-item";
-
-export const SidebarDropdown = observer(() => {
-  const { workspaceSlug } = useParams();
-  // store hooks
-  const { toggleSidebar, toggleAnySidebarDropdown } = useAppTheme();
-  const { data: currentUser } = useUser();
-  const { signOut } = useUser();
-  const { updateUserProfile } = useUserProfile();
-  const { currentWorkspace: activeWorkspace, workspaces } = useWorkspace();
-  // derived values
-  const isWorkspaceCreationEnabled = getIsWorkspaceCreationDisabled() === false;
-  const isUserInstanceAdmin = false;
-  // translation
-  const { t } = useTranslation();
-  // local state
-  const [isWorkspaceMenuOpen, setIsWorkspaceMenuOpen] = useState(false);
-  const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
-  // popper-js refs
-  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
-  // popper-js init
-  const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    placement: "right",
-    modifiers: [{ name: "preventOverflow", options: { padding: 12 } }],
-  });
-
-  const handleWorkspaceNavigation = (workspace: IWorkspace) => updateUserProfile({ last_workspace_id: workspace?.id });
-
-  const handleSignOut = async () => {
-    await signOut().catch(() =>
-      setToast({
-        type: TOAST_TYPE.ERROR,
-        title: t("sign_out.toast.error.title"),
-        message: t("sign_out.toast.error.message"),
-      })
-    );
-  };
-
-  const handleItemClick = () => {
-    if (window.innerWidth < 768) {
-      toggleSidebar();
-    }
-  };
-  const workspacesList = orderWorkspacesList(Object.values(workspaces ?? {}));
-  // TODO: fix workspaces list scroll
-
-  // Toggle sidebar dropdown state when either menu is open
-  useEffect(() => {
-    if (isWorkspaceMenuOpen || isUserMenuOpen) toggleAnySidebarDropdown(true);
-    else toggleAnySidebarDropdown(false);
-  }, [isWorkspaceMenuOpen, isUserMenuOpen]);
-
-  return (
-    <div className="flex items-center justify-center gap-x-3 gap-y-2">
-      <Menu as="div" className="relative h-full truncate text-left flex-grow flex justify-stretch">
-        {({ open, close }: { open: boolean; close: () => void }) => {
-          // Update local state directly
-          if (isWorkspaceMenuOpen !== open) {
-            setIsWorkspaceMenuOpen(open);
-          }
-
-          return (
-            <>
-              <Menu.Button
-                className="group/menu-button flex items-center justify-between gap-1 p-1 truncate rounded text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:outline-none flex-grow"
-                aria-label={t("aria_labels.projects_sidebar.open_workspace_switcher")}
-              >
-                <div className="flex-grow flex items-center gap-2 truncate">
-                  <WorkspaceLogo logo={activeWorkspace?.logo_url} name={activeWorkspace?.name} />
-                  <h4 className="truncate text-base font-medium text-custom-text-100">
-                    {activeWorkspace?.name ?? t("loading")}
-                  </h4>
-                </div>
-                <ChevronDown
-                  className={cn(
-                    "flex-shrink-0 mx-1 hidden size-4 group-hover/menu-button:block text-custom-sidebar-text-400 duration-300",
-                    { "rotate-180": open }
-                  )}
-                />
-              </Menu.Button>
-              <Transition
-                as={Fragment}
-                enter="transition ease-out duration-100"
-                enterFrom="transform opacity-0 scale-95"
-                enterTo="transform opacity-100 scale-100"
-                leave="transition ease-in duration-75"
-                leaveFrom="transform opacity-100 scale-100"
-                leaveTo="transform opacity-0 scale-95"
-              >
-                <Menu.Items as={Fragment}>
-                  <div className="fixed top-12 left-4 z-[21] mt-1 flex w-[19rem] origin-top-left flex-col divide-y divide-custom-border-100 rounded-md border-[0.5px] border-custom-sidebar-border-300 bg-custom-sidebar-background-100 shadow-custom-shadow-rg outline-none">
-                    <div className="overflow-x-hidden vertical-scrollbar scrollbar-sm flex max-h-96 flex-col items-start justify-start overflow-y-scroll">
-                      <span className="rounded-md px-4 sticky top-0 z-[21] h-full w-full bg-custom-sidebar-background-100 pb-1 pt-3 text-sm font-medium text-custom-text-400 truncate flex-shrink-0">
-                        {currentUser?.email}
-                      </span>
-                      {workspacesList ? (
-                        <div className="size-full flex flex-col items-start justify-start">
-                          {(activeWorkspace
-                            ? [
-                                activeWorkspace,
-                                ...workspacesList.filter((workspace) => workspace.id !== activeWorkspace?.id),
-                              ]
-                            : workspacesList
-                          ).map((workspace) => (
-                            <SidebarDropdownItem
-                              key={workspace.id}
-                              workspace={workspace}
-                              activeWorkspace={activeWorkspace}
-                              handleItemClick={handleItemClick}
-                              handleWorkspaceNavigation={handleWorkspaceNavigation}
-                              handleClose={close}
-                            />
-                          ))}
-                        </div>
-                      ) : (
-                        <div className="w-full">
-                          <Loader className="space-y-2">
-                            <Loader.Item height="30px" />
-                            <Loader.Item height="30px" />
-                          </Loader>
-                        </div>
-                      )}
-                    </div>
-                    <div className="w-full flex flex-col items-start justify-start gap-2 px-4 py-2 text-sm">
-                      {isWorkspaceCreationEnabled && (
-                        <Link href="/create-workspace" className="w-full">
-                          <Menu.Item
-                            as="div"
-                            className="flex items-center gap-2 rounded px-2 py-1 text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
-                          >
-                            <CirclePlus className="size-4 flex-shrink-0" />
-                            {t("create_workspace")}
-                          </Menu.Item>
-                        </Link>
-                      )}
-
-                      <Link href="/invitations" className="w-full" onClick={handleItemClick}>
-                        <Menu.Item
-                          as="div"
-                          className="flex items-center gap-2 rounded px-2 py-1 text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
-                        >
-                          <Mails className="h-4 w-4 flex-shrink-0" />
-                          {t("workspace_invites")}
-                        </Menu.Item>
-                      </Link>
-
-                      <div className="w-full">
-                        <Menu.Item
-                          as="button"
-                          type="button"
-                          className="flex w-full items-center gap-2 rounded px-2 py-1 text-sm font-medium text-red-600 hover:bg-custom-sidebar-background-80"
-                          onClick={handleSignOut}
-                        >
-                          <LogOut className="size-4 flex-shrink-0" />
-                          {t("sign_out")}
-                        </Menu.Item>
-                      </div>
-                    </div>
-                  </div>
-                </Menu.Items>
-              </Transition>
-            </>
-          );
-        }}
-      </Menu>
-      <Menu as="div" className="relative flex-shrink-0">
-        {({ open, close }: { open: boolean; close: () => void }) => {
-          // Update local state directly
-          if (isUserMenuOpen !== open) {
-            setIsUserMenuOpen(open);
-          }
-
-          return (
-            <>
-              <Menu.Button
-                className="grid place-items-center outline-none"
-                ref={setReferenceElement}
-                aria-label={t("aria_labels.projects_sidebar.open_user_menu")}
-              >
-                <Avatar
-                  name={currentUser?.display_name}
-                  src={getFileURL(currentUser?.avatar_url ?? "")}
-                  size={24}
-                  shape="circle"
-                  className="!text-base"
-                />
-              </Menu.Button>
-              <Transition
-                as={Fragment}
-                enter="transition ease-out duration-100"
-                enterFrom="transform opacity-0 scale-95"
-                enterTo="transform opacity-100 scale-100"
-                leave="transition ease-in duration-75"
-                leaveFrom="transform opacity-100 scale-100"
-                leaveTo="transform opacity-0 scale-95"
-              >
-                <Menu.Items
-                  className="absolute left-0 z-[21] mt-1 flex w-44 origin-top-left flex-col divide-y
-                  divide-custom-sidebar-border-200 rounded-md border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-1 py-2 text-xs shadow-lg outline-none"
-                  ref={setPopperElement as Ref<HTMLDivElement>}
-                  style={styles.popper}
-                  {...attributes.popper}
-                >
-                  <div className="flex flex-col gap-2.5 pb-2">
-                    <span className="px-2 text-custom-sidebar-text-200">{currentUser?.email}</span>
-                    <Link href={`/${workspaceSlug}/settings/account`}>
-                      <Menu.Item as="div">
-                        <span className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80">
-                          <Settings className="h-4 w-4 stroke-[1.5]" />
-                          <span>{t("settings")}</span>
-                        </span>
-                      </Menu.Item>
-                    </Link>
-                  </div>
-                  <div className={`pt-2 ${isUserInstanceAdmin || false ? "pb-2" : ""}`}>
-                    <Menu.Item
-                      as="button"
-                      type="button"
-                      className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
-                      onClick={handleSignOut}
-                    >
-                      <LogOut className="size-4 stroke-[1.5]" />
-                      {t("sign_out")}
-                    </Menu.Item>
-                  </div>
-                  {isUserInstanceAdmin && (
-                    <div className="p-2 pb-0">
-                      <Link href={GOD_MODE_URL}>
-                        <Menu.Item as="button" type="button" className="w-full">
-                          <span className="flex w-full items-center justify-center rounded bg-custom-primary-100/20 px-2 py-1 text-sm font-medium text-custom-primary-100 hover:bg-custom-primary-100/30 hover:text-custom-primary-200">
-                            {t("enter_god_mode")}
-                          </span>
-                        </Menu.Item>
-                      </Link>
-                    </div>
-                  )}
-                </Menu.Items>
-              </Transition>
-            </>
-          );
-        }}
-      </Menu>
-    </div>
-  );
-});
+import { UserMenuRoot } from "./user-menu-root";
+import { WorkspaceMenuRoot } from "./workspace-menu-root";
+
+export const SidebarDropdown = observer(() => (
+  <div className="flex items-center justify-center gap-x-3 gap-y-2">
+    <WorkspaceMenuRoot />
+    <UserMenuRoot />
+  </div>
+));
diff --git a/web/core/components/workspace/sidebar/help-section/index.ts b/web/core/components/workspace/sidebar/help-section/index.ts
new file mode 100644
index 00000000000..1efe34c51ec
--- /dev/null
+++ b/web/core/components/workspace/sidebar/help-section/index.ts
@@ -0,0 +1 @@
+export * from "./root";
diff --git a/web/core/components/workspace/sidebar/help-section/root.tsx b/web/core/components/workspace/sidebar/help-section/root.tsx
new file mode 100644
index 00000000000..88ad62f77fd
--- /dev/null
+++ b/web/core/components/workspace/sidebar/help-section/root.tsx
@@ -0,0 +1,137 @@
+"use client";
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { FileText, HelpCircle, MessagesSquare, User } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
+// ui
+import { CustomMenu, ToggleSwitch } from "@plane/ui";
+// components
+import { ProductUpdatesModal } from "@/components/global";
+import { AppSidebarItem } from "@/components/sidebar";
+// hooks
+import { useAppTheme, useCommandPalette, useInstance, useTransient, useUserSettings } from "@/hooks/store";
+// plane web components
+import { PlaneVersionNumber } from "@/plane-web/components/global";
+
+export const HelpMenuRoot = observer(() => {
+  const { workspaceSlug, projectId } = useParams();
+  // store hooks
+  const { t } = useTranslation();
+  const {} = useAppTheme();
+  const { toggleShortcutModal } = useCommandPalette();
+  const { config } = useInstance();
+  const { isIntercomToggle, toggleIntercom } = useTransient();
+  const { canUseLocalDB, toggleLocalDB } = useUserSettings();
+  // states
+  const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
+  const [isProductUpdatesModalOpen, setProductUpdatesModalOpen] = useState(false);
+
+  const handleCrispWindowShow = () => {
+    toggleIntercom(!isIntercomToggle);
+  };
+
+  return (
+    <>
+      <ProductUpdatesModal isOpen={isProductUpdatesModalOpen} handleClose={() => setProductUpdatesModalOpen(false)} />
+
+      <CustomMenu
+        customButton={
+          <AppSidebarItem
+            variant="button"
+            item={{
+              icon: <HelpCircle className="size-5" />,
+              isActive: isNeedHelpOpen,
+            }}
+          />
+        }
+        // customButtonClassName="relative grid place-items-center rounded-md p-1.5 outline-none"
+        menuButtonOnClick={() => !isNeedHelpOpen && setIsNeedHelpOpen(true)}
+        onMenuClose={() => setIsNeedHelpOpen(false)}
+        placement="top-end"
+        maxHeight="lg"
+        closeOnSelect
+      >
+        <CustomMenu.MenuItem>
+          <a
+            href="https://go.plane.so/p-docs"
+            target="_blank"
+            className="flex items-center justify- gap-x-2 rounded text-xs hover:bg-custom-background-80"
+          >
+            <FileText className="h-3.5 w-3.5 text-custom-text-200" size={14} />
+            <span className="text-xs">{t("documentation")}</span>
+          </a>
+        </CustomMenu.MenuItem>
+        {config?.intercom_app_id && config?.is_intercom_enabled && (
+          <CustomMenu.MenuItem>
+            <button
+              type="button"
+              onClick={handleCrispWindowShow}
+              className="flex w-full items-center gap-x-2 rounded text-xs hover:bg-custom-background-80"
+            >
+              <MessagesSquare className="h-3.5 w-3.5 text-custom-text-200" />
+              <span className="text-xs">{t("message_support")}</span>
+            </button>
+          </CustomMenu.MenuItem>
+        )}
+        <CustomMenu.MenuItem>
+          <a
+            href="mailto:sales@plane.so"
+            target="_blank"
+            className="flex items-center justify- gap-x-2 rounded text-xs hover:bg-custom-background-80"
+          >
+            <User className="h-3.5 w-3.5 text-custom-text-200" size={14} />
+            <span className="text-xs">{t("contact_sales")}</span>
+          </a>
+        </CustomMenu.MenuItem>
+        <div className="my-1 border-t border-custom-border-200" />
+        <CustomMenu.MenuItem>
+          <div
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+            }}
+            className="flex w-full items-center justify-between text-xs hover:bg-custom-background-80"
+          >
+            <span className="racking-tight">{t("hyper_mode")}</span>
+            <ToggleSwitch
+              value={canUseLocalDB}
+              onChange={() => toggleLocalDB(workspaceSlug?.toString(), projectId?.toString())}
+            />
+          </div>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem>
+          <button
+            type="button"
+            onClick={() => toggleShortcutModal(true)}
+            className="flex w-full items-center justify-start text-xs hover:bg-custom-background-80"
+          >
+            <span className="text-xs">{t("keyboard_shortcuts")}</span>
+          </button>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem>
+          <button
+            type="button"
+            onClick={() => setProductUpdatesModalOpen(true)}
+            className="flex w-full items-center justify-start text-xs hover:bg-custom-background-80"
+          >
+            <span className="text-xs">{t("whats_new")}</span>
+          </button>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem>
+          <a
+            href="https://go.plane.so/p-discord"
+            target="_blank"
+            className="flex items-center justify- gap-x-2 rounded text-xs hover:bg-custom-background-80"
+          >
+            <span className="text-xs">Discord</span>
+          </a>
+        </CustomMenu.MenuItem>
+        <div className="px-1 pt-2 mt-1 text-xs text-custom-text-200 border-t border-custom-border-200">
+          <PlaneVersionNumber />
+        </div>
+      </CustomMenu>
+    </>
+  );
+});
diff --git a/web/core/components/workspace/sidebar/index.ts b/web/core/components/workspace/sidebar/index.ts
index 0a1f2a920c7..8c18ceae6b3 100644
--- a/web/core/components/workspace/sidebar/index.ts
+++ b/web/core/components/workspace/sidebar/index.ts
@@ -10,3 +10,4 @@ export * from "./user-menu-item";
 export * from "./workspace-menu";
 export * from "./workspace-menu-item";
 export * from "./workspace-menu-header";
+export * from "./help-section";
diff --git a/web/core/components/workspace/sidebar/user-menu-root.tsx b/web/core/components/workspace/sidebar/user-menu-root.tsx
new file mode 100644
index 00000000000..1dda949959c
--- /dev/null
+++ b/web/core/components/workspace/sidebar/user-menu-root.tsx
@@ -0,0 +1,159 @@
+"use client";
+
+import { Fragment, Ref, useState, useEffect } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { usePopper } from "react-popper";
+// icons
+import { LogOut, PanelLeftDashed, Settings } from "lucide-react";
+// ui
+import { Menu, Transition } from "@headlessui/react";
+// plane imports
+import { GOD_MODE_URL } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Avatar, TOAST_TYPE, setToast } from "@plane/ui";
+import { getFileURL } from "@plane/utils";
+// hooks
+import { useAppTheme, useUser } from "@/hooks/store";
+import { useAppRail } from "@/hooks/use-app-rail";
+
+type Props = {
+  size?: "sm" | "md";
+};
+
+export const UserMenuRoot = observer((props: Props) => {
+  const { size = "sm" } = props;
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { toggleAnySidebarDropdown, sidebarPeek, toggleSidebarPeek } = useAppTheme();
+
+  const { isEnabled, shouldRenderAppRail, toggleAppRail } = useAppRail();
+  const { data: currentUser } = useUser();
+  const { signOut } = useUser();
+  // derived values
+
+  const isUserInstanceAdmin = false;
+  // translation
+  const { t } = useTranslation();
+  // local state
+  const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
+  // popper-js refs
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  // popper-js init
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "right",
+    modifiers: [{ name: "preventOverflow", options: { padding: 12 } }],
+  });
+
+  const handleSignOut = async () => {
+    await signOut().catch(() =>
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("sign_out.toast.error.title"),
+        message: t("sign_out.toast.error.message"),
+      })
+    );
+  };
+
+  // Toggle sidebar dropdown state when either menu is open
+  useEffect(() => {
+    if (isUserMenuOpen) toggleAnySidebarDropdown(true);
+    else toggleAnySidebarDropdown(false);
+  }, [isUserMenuOpen]);
+
+  return (
+    <Menu as="div" className="relative flex-shrink-0">
+      {({ open, close }: { open: boolean; close: () => void }) => {
+        // Update local state directly
+        if (isUserMenuOpen !== open) {
+          setIsUserMenuOpen(open);
+        }
+
+        return (
+          <>
+            <Menu.Button
+              className="grid place-items-center outline-none"
+              ref={setReferenceElement}
+              aria-label={t("aria_labels.projects_sidebar.open_user_menu")}
+            >
+              <Avatar
+                name={currentUser?.display_name}
+                src={getFileURL(currentUser?.avatar_url ?? "")}
+                size={size === "sm" ? 24 : 28}
+                shape="circle"
+                className="!text-base"
+              />
+            </Menu.Button>
+            <Transition
+              as={Fragment}
+              enter="transition ease-out duration-100"
+              enterFrom="transform opacity-0 scale-95"
+              enterTo="transform opacity-100 scale-100"
+              leave="transition ease-in duration-75"
+              leaveFrom="transform opacity-100 scale-100"
+              leaveTo="transform opacity-0 scale-95"
+            >
+              <Menu.Items
+                className="absolute left-0 z-[21] mt-1 flex w-44 origin-top-left flex-col divide-y
+              divide-custom-sidebar-border-200 rounded-md border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-1 py-2 text-xs shadow-lg outline-none"
+                ref={setPopperElement as Ref<HTMLDivElement>}
+                style={styles.popper}
+                {...attributes.popper}
+              >
+                <div className="flex flex-col gap-2.5 pb-2">
+                  <span className="px-2 text-custom-sidebar-text-200">{currentUser?.email}</span>
+                  <Link href={`/${workspaceSlug}/settings/account`}>
+                    <Menu.Item as="div">
+                      <span className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80">
+                        <Settings className="h-4 w-4 stroke-[1.5]" />
+                        <span>{t("settings")}</span>
+                      </span>
+                    </Menu.Item>
+                  </Link>
+                  {isEnabled && (
+                    <Menu.Item
+                      as="button"
+                      type="button"
+                      className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
+                      onClick={() => {
+                        if (sidebarPeek) toggleSidebarPeek(false);
+                        toggleAppRail();
+                      }}
+                    >
+                      <PanelLeftDashed className="h-4 w-4 stroke-[1.5]" />
+                      <span>{shouldRenderAppRail ? "Undock AppRail" : "Dock AppRail"}</span>
+                    </Menu.Item>
+                  )}
+                </div>
+                <div className={`pt-2 ${isUserInstanceAdmin || false ? "pb-2" : ""}`}>
+                  <Menu.Item
+                    as="button"
+                    type="button"
+                    className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
+                    onClick={handleSignOut}
+                  >
+                    <LogOut className="size-4 stroke-[1.5]" />
+                    {t("sign_out")}
+                  </Menu.Item>
+                </div>
+                {isUserInstanceAdmin && (
+                  <div className="p-2 pb-0">
+                    <Link href={GOD_MODE_URL}>
+                      <Menu.Item as="button" type="button" className="w-full">
+                        <span className="flex w-full items-center justify-center rounded bg-custom-primary-100/20 px-2 py-1 text-sm font-medium text-custom-primary-100 hover:bg-custom-primary-100/30 hover:text-custom-primary-200">
+                          {t("enter_god_mode")}
+                        </span>
+                      </Menu.Item>
+                    </Link>
+                  </div>
+                )}
+              </Menu.Items>
+            </Transition>
+          </>
+        );
+      }}
+    </Menu>
+  );
+});
diff --git a/web/core/components/workspace/sidebar/workspace-menu-root.tsx b/web/core/components/workspace/sidebar/workspace-menu-root.tsx
new file mode 100644
index 00000000000..c6f1d3ec2ce
--- /dev/null
+++ b/web/core/components/workspace/sidebar/workspace-menu-root.tsx
@@ -0,0 +1,216 @@
+"use client";
+
+import React, { Fragment, useState, useEffect } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+// icons
+import { ChevronDown, CirclePlus, LogOut, Mails } from "lucide-react";
+// ui
+import { Menu, Transition } from "@headlessui/react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { IWorkspace } from "@plane/types";
+import { Loader, TOAST_TYPE, setToast } from "@plane/ui";
+import { orderWorkspacesList, cn } from "@plane/utils";
+// helpers
+import { AppSidebarItem } from "@/components/sidebar";
+// hooks
+import { useAppTheme, useUser, useUserProfile, useWorkspace } from "@/hooks/store";
+// plane web helpers
+import { getIsWorkspaceCreationDisabled } from "@/plane-web/helpers/instance.helper";
+// components
+import { WorkspaceLogo } from "../logo";
+import SidebarDropdownItem from "./dropdown-item";
+
+type WorkspaceMenuRootProps = {
+  renderLogoOnly?: boolean;
+};
+
+export const WorkspaceMenuRoot = observer((props: WorkspaceMenuRootProps) => {
+  const { renderLogoOnly } = props;
+  // store hooks
+  const { toggleSidebar, toggleAnySidebarDropdown } = useAppTheme();
+  const { data: currentUser } = useUser();
+  const { signOut } = useUser();
+  const { updateUserProfile } = useUserProfile();
+  const { currentWorkspace: activeWorkspace, workspaces } = useWorkspace();
+  // derived values
+  const isWorkspaceCreationEnabled = getIsWorkspaceCreationDisabled() === false;
+  // translation
+  const { t } = useTranslation();
+  // local state
+  const [isWorkspaceMenuOpen, setIsWorkspaceMenuOpen] = useState(false);
+
+  const handleWorkspaceNavigation = (workspace: IWorkspace) => updateUserProfile({ last_workspace_id: workspace?.id });
+
+  const handleSignOut = async () => {
+    await signOut().catch(() =>
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("sign_out.toast.error.title"),
+        message: t("sign_out.toast.error.message"),
+      })
+    );
+  };
+
+  const handleItemClick = () => {
+    if (window.innerWidth < 768) {
+      toggleSidebar();
+    }
+  };
+  const workspacesList = orderWorkspacesList(Object.values(workspaces ?? {}));
+  // TODO: fix workspaces list scroll
+
+  // Toggle sidebar dropdown state when either menu is open
+  useEffect(() => {
+    if (isWorkspaceMenuOpen) toggleAnySidebarDropdown(true);
+    else toggleAnySidebarDropdown(false);
+  }, [isWorkspaceMenuOpen]);
+
+  const logo = activeWorkspace?.logo_url;
+  const name = activeWorkspace?.name;
+
+  return (
+    <Menu
+      as="div"
+      className={cn("relative h-full flex ", {
+        "justify-center text-center": renderLogoOnly,
+        "flex-grow justify-stretch text-left truncate": !renderLogoOnly,
+      })}
+    >
+      {({ open, close }: { open: boolean; close: () => void }) => {
+        // Update local state directly
+        if (isWorkspaceMenuOpen !== open) {
+          setIsWorkspaceMenuOpen(open);
+        }
+
+        return (
+          <>
+            {renderLogoOnly ? (
+              <Menu.Button className="flex items-center justify-center size-8">
+                <AppSidebarItem
+                  variant="button"
+                  item={{
+                    icon: (
+                      <WorkspaceLogo
+                        logo={activeWorkspace?.logo_url}
+                        name={activeWorkspace?.name}
+                        classNames="size-8 rounded-md"
+                      />
+                    ),
+                  }}
+                />
+              </Menu.Button>
+            ) : (
+              <Menu.Button
+                className={cn(
+                  "group/menu-button flex items-center  gap-1 p-1 truncate rounded text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:outline-none ",
+                  {
+                    "justify-center text-center": renderLogoOnly,
+                    "justify-between flex-grow": !renderLogoOnly,
+                  }
+                )}
+                aria-label={t("aria_labels.projects_sidebar.open_workspace_switcher")}
+              >
+                <div className="flex-grow flex items-center gap-2 truncate">
+                  <WorkspaceLogo logo={activeWorkspace?.logo_url} name={activeWorkspace?.name} />
+                  <h4 className="truncate text-base font-medium text-custom-text-100">
+                    {activeWorkspace?.name ?? t("loading")}
+                  </h4>
+                </div>
+                <ChevronDown
+                  className={cn(
+                    "flex-shrink-0 mx-1 hidden size-4 group-hover/menu-button:block text-custom-sidebar-text-400 duration-300",
+                    { "rotate-180": open }
+                  )}
+                />
+              </Menu.Button>
+            )}
+
+            <Transition
+              as={Fragment}
+              enter="transition ease-out duration-100"
+              enterFrom="transform opacity-0 scale-95"
+              enterTo="trnsform opacity-100 scale-100"
+              leave="transition ease-in duration-75"
+              leaveFrom="transform opacity-100 scale-100"
+              leaveTo="transform opacity-0 scale-95"
+            >
+              <Menu.Items as={Fragment}>
+                <div className="fixed top-12 left-4 z-[21] mt-1 flex w-[19rem] origin-top-left flex-col divide-y divide-custom-border-100 rounded-md border-[0.5px] border-custom-sidebar-border-300 bg-custom-sidebar-background-100 shadow-custom-shadow-rg outline-none">
+                  <div className="overflow-x-hidden vertical-scrollbar scrollbar-sm flex max-h-96 flex-col items-start justify-start overflow-y-scroll">
+                    <span className="rounded-md text-left px-4 sticky top-0 z-[21] h-full w-full bg-custom-sidebar-background-100 pb-1 pt-3 text-sm font-medium text-custom-text-400 truncate flex-shrink-0">
+                      {currentUser?.email}
+                    </span>
+                    {workspacesList ? (
+                      <div className="size-full flex flex-col items-start justify-start">
+                        {(activeWorkspace
+                          ? [
+                              activeWorkspace,
+                              ...workspacesList.filter((workspace) => workspace.id !== activeWorkspace?.id),
+                            ]
+                          : workspacesList
+                        ).map((workspace) => (
+                          <SidebarDropdownItem
+                            key={workspace.id}
+                            workspace={workspace}
+                            activeWorkspace={activeWorkspace}
+                            handleItemClick={handleItemClick}
+                            handleWorkspaceNavigation={handleWorkspaceNavigation}
+                            handleClose={close}
+                          />
+                        ))}
+                      </div>
+                    ) : (
+                      <div className="w-full">
+                        <Loader className="space-y-2">
+                          <Loader.Item height="30px" />
+                          <Loader.Item height="30px" />
+                        </Loader>
+                      </div>
+                    )}
+                  </div>
+                  <div className="w-full flex flex-col items-start justify-start gap-2 px-4 py-2 text-sm">
+                    {isWorkspaceCreationEnabled && (
+                      <Link href="/create-workspace" className="w-full">
+                        <Menu.Item
+                          as="div"
+                          className="flex items-center gap-2 rounded px-2 py-1 text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
+                        >
+                          <CirclePlus className="size-4 flex-shrink-0" />
+                          {t("create_workspace")}
+                        </Menu.Item>
+                      </Link>
+                    )}
+
+                    <Link href="/invitations" className="w-full" onClick={handleItemClick}>
+                      <Menu.Item
+                        as="div"
+                        className="flex items-center gap-2 rounded px-2 py-1 text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
+                      >
+                        <Mails className="h-4 w-4 flex-shrink-0" />
+                        {t("workspace_invites")}
+                      </Menu.Item>
+                    </Link>
+
+                    <div className="w-full">
+                      <Menu.Item
+                        as="button"
+                        type="button"
+                        className="flex w-full items-center gap-2 rounded px-2 py-1 text-sm font-medium text-red-600 hover:bg-custom-sidebar-background-80"
+                        onClick={handleSignOut}
+                      >
+                        <LogOut className="size-4 flex-shrink-0" />
+                        {t("sign_out")}
+                      </Menu.Item>
+                    </div>
+                  </div>
+                </div>
+              </Menu.Items>
+            </Transition>
+          </>
+        );
+      }}
+    </Menu>
+  );
+});

From 49ecef6c8761a3c0ffb02faea7fc238708e6378a Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Mon, 30 Jun 2025 19:17:50 +0530
Subject: [PATCH 28/47] chore: code refactor

---
 web/ce/components/workspace/app-switcher.tsx  |  5 +++
 web/ce/components/workspace/index.ts          |  1 +
 .../workspace/sidebar/workspace-menu-root.tsx | 45 ++++++++++---------
 3 files changed, 31 insertions(+), 20 deletions(-)
 create mode 100644 web/ce/components/workspace/app-switcher.tsx

diff --git a/web/ce/components/workspace/app-switcher.tsx b/web/ce/components/workspace/app-switcher.tsx
new file mode 100644
index 00000000000..8650d2a56bf
--- /dev/null
+++ b/web/ce/components/workspace/app-switcher.tsx
@@ -0,0 +1,5 @@
+"use client";
+
+import React from "react";
+
+export const WorkspaceAppSwitcher = () => <></>;
diff --git a/web/ce/components/workspace/index.ts b/web/ce/components/workspace/index.ts
index ff5aa27ef6d..489ef6352cb 100644
--- a/web/ce/components/workspace/index.ts
+++ b/web/ce/components/workspace/index.ts
@@ -5,3 +5,4 @@ export * from "./delete-workspace-section";
 export * from "./sidebar";
 export * from "./members";
 export * from "./content-wrapper";
+export * from "./app-switcher";
diff --git a/web/core/components/workspace/sidebar/workspace-menu-root.tsx b/web/core/components/workspace/sidebar/workspace-menu-root.tsx
index c6f1d3ec2ce..6a67b6e6b89 100644
--- a/web/core/components/workspace/sidebar/workspace-menu-root.tsx
+++ b/web/core/components/workspace/sidebar/workspace-menu-root.tsx
@@ -17,6 +17,7 @@ import { AppSidebarItem } from "@/components/sidebar";
 // hooks
 import { useAppTheme, useUser, useUserProfile, useWorkspace } from "@/hooks/store";
 // plane web helpers
+import { WorkspaceAppSwitcher } from "@/plane-web/components/workspace";
 import { getIsWorkspaceCreationDisabled } from "@/plane-web/helpers/instance.helper";
 // components
 import { WorkspaceLogo } from "../logo";
@@ -102,29 +103,33 @@ export const WorkspaceMenuRoot = observer((props: WorkspaceMenuRootProps) => {
                 />
               </Menu.Button>
             ) : (
-              <Menu.Button
+              <div
                 className={cn(
-                  "group/menu-button flex items-center  gap-1 p-1 truncate rounded text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:outline-none ",
-                  {
-                    "justify-center text-center": renderLogoOnly,
-                    "justify-between flex-grow": !renderLogoOnly,
-                  }
+                  "group/menu-button flex justify-between flex-grow items-center gap-1 p-1 truncate rounded text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:outline-none"
                 )}
-                aria-label={t("aria_labels.projects_sidebar.open_workspace_switcher")}
               >
-                <div className="flex-grow flex items-center gap-2 truncate">
-                  <WorkspaceLogo logo={activeWorkspace?.logo_url} name={activeWorkspace?.name} />
-                  <h4 className="truncate text-base font-medium text-custom-text-100">
-                    {activeWorkspace?.name ?? t("loading")}
-                  </h4>
-                </div>
-                <ChevronDown
-                  className={cn(
-                    "flex-shrink-0 mx-1 hidden size-4 group-hover/menu-button:block text-custom-sidebar-text-400 duration-300",
-                    { "rotate-180": open }
-                  )}
-                />
-              </Menu.Button>
+                <WorkspaceAppSwitcher />
+                <Menu.Button
+                  className={cn("flex items-center  gap-1 p-1 truncate", {
+                    "justify-center text-center": renderLogoOnly,
+                    "justify-between flex-grow": !renderLogoOnly,
+                  })}
+                  aria-label={t("aria_labels.projects_sidebar.open_workspace_switcher")}
+                >
+                  <div className="flex-grow flex items-center gap-2 truncate">
+                    <WorkspaceLogo logo={activeWorkspace?.logo_url} name={activeWorkspace?.name} />
+                    <h4 className="truncate text-base font-medium text-custom-text-100">
+                      {activeWorkspace?.name ?? t("loading")}
+                    </h4>
+                  </div>
+                  <ChevronDown
+                    className={cn(
+                      "flex-shrink-0 mx-1 hidden size-4 group-hover/menu-button:block text-custom-sidebar-text-400 duration-300",
+                      { "rotate-180": open }
+                    )}
+                  />
+                </Menu.Button>
+              </div>
             )}
 
             <Transition

From 787cf5404cfd98e030e9abba305c068e140b87e6 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Mon, 30 Jun 2025 19:20:17 +0530
Subject: [PATCH 29/47] chore: code refactor

---
 web/ee/components/workspace/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/ee/components/workspace/index.ts b/web/ee/components/workspace/index.ts
index b0b8ffd3ad0..4e148736d6a 100644
--- a/web/ee/components/workspace/index.ts
+++ b/web/ee/components/workspace/index.ts
@@ -3,3 +3,4 @@ export * from "./upgrade-badge";
 export * from "./billing";
 export * from "./delete-workspace-section";
 export * from "./sidebar";
+export * from "ce/components/workspace/app-switcher";

From 41cc6424d8809934ddd3e4b8cc06aae0cc2e640e Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Mon, 30 Jun 2025 19:49:40 +0530
Subject: [PATCH 30/47] chore: code refactor

---
 web/app/(all)/[workspaceSlug]/layout.tsx           | 12 ++++++++++++
 web/core/layouts/auth-layout/workspace-wrapper.tsx |  9 +--------
 2 files changed, 13 insertions(+), 8 deletions(-)
 create mode 100644 web/app/(all)/[workspaceSlug]/layout.tsx

diff --git a/web/app/(all)/[workspaceSlug]/layout.tsx b/web/app/(all)/[workspaceSlug]/layout.tsx
new file mode 100644
index 00000000000..7cecc697fa4
--- /dev/null
+++ b/web/app/(all)/[workspaceSlug]/layout.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import { AppRailProvider } from "@/hooks/context/app-rail-context";
+import { WorkspaceContentWrapper } from "@/plane-web/components/workspace";
+
+export default function WorkspaceLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <AppRailProvider>
+      <WorkspaceContentWrapper>{children}</WorkspaceContentWrapper>
+    </AppRailProvider>
+  );
+}
diff --git a/web/core/layouts/auth-layout/workspace-wrapper.tsx b/web/core/layouts/auth-layout/workspace-wrapper.tsx
index 3483d21a015..a05d64e1b16 100644
--- a/web/core/layouts/auth-layout/workspace-wrapper.tsx
+++ b/web/core/layouts/auth-layout/workspace-wrapper.tsx
@@ -16,14 +16,11 @@ import { Button, getButtonStyling, setToast, TOAST_TYPE, Tooltip } from "@plane/
 import { cn } from "@plane/utils";
 import { LogoSpinner } from "@/components/common";
 // hooks
-import { AppRailProvider } from "@/hooks/context/app-rail-context";
 import { useMember, useProject, useProjectState, useUser, useUserPermissions, useWorkspace } from "@/hooks/store";
 import { useFavorite } from "@/hooks/store/use-favorite";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // local
 import { persistence } from "@/local-db/storage.sqlite";
-import { WorkspaceContentWrapper } from "@/plane-web/components/workspace";
-// constants
 // images
 import PlaneBlackLogo from "@/public/plane-logos/black-horizontal-with-blue-logo.png";
 import PlaneWhiteLogo from "@/public/plane-logos/white-horizontal-with-blue-logo.png";
@@ -238,9 +235,5 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
     );
   }
 
-  return (
-    <AppRailProvider>
-      <WorkspaceContentWrapper>{children}</WorkspaceContentWrapper>
-    </AppRailProvider>
-  );
+  return <>{children}</>;
 });

From 121fec7be178e0c18d66cd3f312734472d89797f Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Mon, 30 Jun 2025 20:10:41 +0530
Subject: [PATCH 31/47] chore: code refactor

---
 .../[workspaceSlug]/(projects)/sidebar.tsx    |   4 +-
 .../workspace/sidebar/help-menu.tsx           | 149 ++++++++++++++++++
 .../workspace/sidebar/workspace-menu-root.tsx |   4 +-
 3 files changed, 155 insertions(+), 2 deletions(-)
 create mode 100644 web/core/components/workspace/sidebar/help-menu.tsx

diff --git a/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx b/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx
index 883ce74d237..f0a04a5e2af 100644
--- a/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx
+++ b/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx
@@ -8,6 +8,7 @@ import { useOutsideClickDetector } from "@plane/hooks";
 // components
 import { SidebarDropdown, SidebarProjectsList, SidebarQuickActions } from "@/components/workspace";
 import { SidebarFavoritesMenu } from "@/components/workspace/sidebar/favorites/favorites-menu";
+import { HelpMenu } from "@/components/workspace/sidebar/help-menu";
 import { SidebarMenuItems } from "@/components/workspace/sidebar/sidebar-menu-items";
 // hooks
 import { useAppTheme, useUserPermissions } from "@/hooks/store";
@@ -82,8 +83,9 @@ export const AppSidebar: FC = observer(() => {
         <SidebarProjectsList />
       </div>
       {/* Help Section */}
-      <div className="flex items-center justify-center p-2 border-t border-custom-border-200 bg-custom-sidebar-background-100 h-12">
+      <div className="flex items-center justify-between p-2 border-t border-custom-border-200 bg-custom-sidebar-background-100 h-12">
         <WorkspaceEditionBadge />
+        {!shouldRenderAppRail && <HelpMenu />}
       </div>
     </>
   );
diff --git a/web/core/components/workspace/sidebar/help-menu.tsx b/web/core/components/workspace/sidebar/help-menu.tsx
new file mode 100644
index 00000000000..3a1dc8320a2
--- /dev/null
+++ b/web/core/components/workspace/sidebar/help-menu.tsx
@@ -0,0 +1,149 @@
+"use client";
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { FileText, HelpCircle, MessagesSquare, User } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
+// ui
+import { CustomMenu, Tooltip, ToggleSwitch } from "@plane/ui";
+// components
+import { cn } from "@plane/utils";
+import { ProductUpdatesModal } from "@/components/global";
+// helpers
+// hooks
+import { useCommandPalette, useInstance, useTransient, useUserSettings } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// plane web components
+import { PlaneVersionNumber } from "@/plane-web/components/global";
+
+export interface WorkspaceHelpSectionProps {
+  setSidebarActive?: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const HelpMenu: React.FC<WorkspaceHelpSectionProps> = observer(() => {
+  const { workspaceSlug, projectId } = useParams();
+  // store hooks
+  const { t } = useTranslation();
+  const { toggleShortcutModal } = useCommandPalette();
+  const { isMobile } = usePlatformOS();
+  const { config } = useInstance();
+  const { isIntercomToggle, toggleIntercom } = useTransient();
+  const { canUseLocalDB, toggleLocalDB } = useUserSettings();
+  // states
+  const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
+  const [isProductUpdatesModalOpen, setProductUpdatesModalOpen] = useState(false);
+
+  const handleCrispWindowShow = () => {
+    toggleIntercom(!isIntercomToggle);
+  };
+
+  return (
+    <>
+      <ProductUpdatesModal isOpen={isProductUpdatesModalOpen} handleClose={() => setProductUpdatesModalOpen(false)} />
+      <div className="relative flex flex-shrink-0 items-center gap-1 justify-evenly">
+        <CustomMenu
+          customButton={
+            <div
+              className={cn(
+                "grid place-items-center rounded-md p-1 outline-none text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90",
+                {
+                  "bg-custom-background-90": isNeedHelpOpen,
+                }
+              )}
+            >
+              <Tooltip tooltipContent="Help" isMobile={isMobile} disabled={isNeedHelpOpen}>
+                <HelpCircle className="h-[18px] w-[18px] outline-none" />
+              </Tooltip>
+            </div>
+          }
+          customButtonClassName="relative grid place-items-center rounded-md p-1.5 outline-none"
+          menuButtonOnClick={() => !isNeedHelpOpen && setIsNeedHelpOpen(true)}
+          onMenuClose={() => setIsNeedHelpOpen(false)}
+          placement="top-end"
+          maxHeight="lg"
+          closeOnSelect
+        >
+          <CustomMenu.MenuItem>
+            <a
+              href="https://go.plane.so/p-docs"
+              target="_blank"
+              className="flex items-center justify- gap-x-2 rounded text-xs hover:bg-custom-background-80"
+            >
+              <FileText className="h-3.5 w-3.5 text-custom-text-200" size={14} />
+              <span className="text-xs">{t("documentation")}</span>
+            </a>
+          </CustomMenu.MenuItem>
+          {config?.intercom_app_id && config?.is_intercom_enabled && (
+            <CustomMenu.MenuItem>
+              <button
+                type="button"
+                onClick={handleCrispWindowShow}
+                className="flex w-full items-center gap-x-2 rounded text-xs hover:bg-custom-background-80"
+              >
+                <MessagesSquare className="h-3.5 w-3.5 text-custom-text-200" />
+                <span className="text-xs">{t("message_support")}</span>
+              </button>
+            </CustomMenu.MenuItem>
+          )}
+          <CustomMenu.MenuItem>
+            <a
+              href="mailto:sales@plane.so"
+              target="_blank"
+              className="flex items-center justify- gap-x-2 rounded text-xs hover:bg-custom-background-80"
+            >
+              <User className="h-3.5 w-3.5 text-custom-text-200" size={14} />
+              <span className="text-xs">{t("contact_sales")}</span>
+            </a>
+          </CustomMenu.MenuItem>
+          <div className="my-1 border-t border-custom-border-200" />
+          <CustomMenu.MenuItem>
+            <div
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              }}
+              className="flex w-full items-center justify-between text-xs hover:bg-custom-background-80"
+            >
+              <span className="racking-tight">{t("hyper_mode")}</span>
+              <ToggleSwitch
+                value={canUseLocalDB}
+                onChange={() => toggleLocalDB(workspaceSlug?.toString(), projectId?.toString())}
+              />
+            </div>
+          </CustomMenu.MenuItem>
+          <CustomMenu.MenuItem>
+            <button
+              type="button"
+              onClick={() => toggleShortcutModal(true)}
+              className="flex w-full items-center justify-start text-xs hover:bg-custom-background-80"
+            >
+              <span className="text-xs">{t("keyboard_shortcuts")}</span>
+            </button>
+          </CustomMenu.MenuItem>
+          <CustomMenu.MenuItem>
+            <button
+              type="button"
+              onClick={() => setProductUpdatesModalOpen(true)}
+              className="flex w-full items-center justify-start text-xs hover:bg-custom-background-80"
+            >
+              <span className="text-xs">{t("whats_new")}</span>
+            </button>
+          </CustomMenu.MenuItem>
+          <CustomMenu.MenuItem>
+            <a
+              href="https://go.plane.so/p-discord"
+              target="_blank"
+              className="flex items-center justify- gap-x-2 rounded text-xs hover:bg-custom-background-80"
+            >
+              <span className="text-xs">Discord</span>
+            </a>
+          </CustomMenu.MenuItem>
+          <div className="px-1 pt-2 mt-1 text-xs text-custom-text-200 border-t border-custom-border-200">
+            <PlaneVersionNumber />
+          </div>
+        </CustomMenu>
+      </div>
+    </>
+  );
+});
diff --git a/web/core/components/workspace/sidebar/workspace-menu-root.tsx b/web/core/components/workspace/sidebar/workspace-menu-root.tsx
index 6a67b6e6b89..a7e129aed5e 100644
--- a/web/core/components/workspace/sidebar/workspace-menu-root.tsx
+++ b/web/core/components/workspace/sidebar/workspace-menu-root.tsx
@@ -17,6 +17,7 @@ import { AppSidebarItem } from "@/components/sidebar";
 // hooks
 import { useAppTheme, useUser, useUserProfile, useWorkspace } from "@/hooks/store";
 // plane web helpers
+import { useAppRail } from "@/hooks/use-app-rail";
 import { WorkspaceAppSwitcher } from "@/plane-web/components/workspace";
 import { getIsWorkspaceCreationDisabled } from "@/plane-web/helpers/instance.helper";
 // components
@@ -35,6 +36,7 @@ export const WorkspaceMenuRoot = observer((props: WorkspaceMenuRootProps) => {
   const { signOut } = useUser();
   const { updateUserProfile } = useUserProfile();
   const { currentWorkspace: activeWorkspace, workspaces } = useWorkspace();
+  const { shouldRenderAppRail, isEnabled: isAppRailEnabled } = useAppRail();
   // derived values
   const isWorkspaceCreationEnabled = getIsWorkspaceCreationDisabled() === false;
   // translation
@@ -108,7 +110,7 @@ export const WorkspaceMenuRoot = observer((props: WorkspaceMenuRootProps) => {
                   "group/menu-button flex justify-between flex-grow items-center gap-1 p-1 truncate rounded text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:outline-none"
                 )}
               >
-                <WorkspaceAppSwitcher />
+                {isAppRailEnabled && !shouldRenderAppRail && <WorkspaceAppSwitcher />}
                 <Menu.Button
                   className={cn("flex items-center  gap-1 p-1 truncate", {
                     "justify-center text-center": renderLogoOnly,

From 1e3ad143225c1806496d9bf2a5bf0795500567f0 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Mon, 30 Jun 2025 20:22:53 +0530
Subject: [PATCH 32/47] chore: code refactor

---
 web/core/hooks/context/app-rail-context.tsx | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/web/core/hooks/context/app-rail-context.tsx b/web/core/hooks/context/app-rail-context.tsx
index 94755a3c795..6fe902cdd88 100644
--- a/web/core/hooks/context/app-rail-context.tsx
+++ b/web/core/hooks/context/app-rail-context.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { createContext, ReactNode, useEffect } from "react";
+import React, { createContext, ReactNode } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // hooks
@@ -29,12 +29,6 @@ export const AppRailProvider = observer(({ children }: AppRailProviderProps) =>
 
   const isEnabled = false;
 
-  useEffect(() => {
-    if (!isEnabled && isAppRailVisible) {
-      setIsAppRailVisible(false);
-    }
-  }, [workspaceSlug]);
-
   const toggleAppRail = (value?: boolean) => {
     if (value === undefined) {
       setIsAppRailVisible(!isAppRailVisible);
@@ -45,7 +39,7 @@ export const AppRailProvider = observer(({ children }: AppRailProviderProps) =>
 
   const contextValue: AppRailContextType = {
     isEnabled,
-    shouldRenderAppRail: !!isAppRailVisible,
+    shouldRenderAppRail: !!isAppRailVisible && isEnabled,
     toggleAppRail,
   };
 

From cc7e2f5fd6d69f2b910efb96d858f0ce62ba22a7 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Mon, 30 Jun 2025 20:28:15 +0530
Subject: [PATCH 33/47] chore: code refactor

---
 web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx b/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx
index f0a04a5e2af..03d7645f302 100644
--- a/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx
+++ b/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx
@@ -73,7 +73,7 @@ export const AppSidebar: FC = observer(() => {
         {/* Quick actions */}
         <SidebarQuickActions />
       </div>
-      <div className="flex flex-col gap-1 overflow-x-hidden scrollbar-sm h-full w-full overflow-y-auto pt-3 pb-0.5 vertical-scrollbar px-4">
+      <div className="flex flex-col gap-0.5 overflow-x-hidden scrollbar-sm h-full w-full overflow-y-auto pt-3 pb-0.5 vertical-scrollbar px-4">
         <SidebarMenuItems />
         {/* Favorites Menu */}
         {canPerformWorkspaceMemberActions && !isFavoriteEmpty && <SidebarFavoritesMenu />}

From 59f9d4793caa71f610aa114f4ec2ddc3cd1cd07c Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Tue, 1 Jul 2025 16:00:11 +0530
Subject: [PATCH 34/47] chore: appsidebar toggle button

---
 .../[workspaceSlug]/(projects)/sidebar.tsx    | 33 +++++++++----------
 web/core/components/core/app-header.tsx       |  4 +--
 web/core/components/sidebar/index.ts          |  1 +
 .../sidebar/sidebar-toggle-button.tsx         | 23 +++++++++++++
 4 files changed, 41 insertions(+), 20 deletions(-)
 create mode 100644 web/core/components/sidebar/sidebar-toggle-button.tsx

diff --git a/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx b/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx
index 03d7645f302..065fa95dc64 100644
--- a/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx
+++ b/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx
@@ -1,11 +1,11 @@
 import { FC, useEffect, useRef } from "react";
 import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react";
-import { PanelLeft } from "lucide-react";
 // plane helpers
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useOutsideClickDetector } from "@plane/hooks";
 // components
+import { AppSidebarToggleButton } from "@/components/sidebar";
 import { SidebarDropdown, SidebarProjectsList, SidebarQuickActions } from "@/components/workspace";
 import { SidebarFavoritesMenu } from "@/components/workspace/sidebar/favorites/favorites-menu";
 import { HelpMenu } from "@/components/workspace/sidebar/help-menu";
@@ -22,8 +22,8 @@ import { SidebarTeamsList } from "@/plane-web/components/workspace/sidebar/teams
 export const AppSidebar: FC = observer(() => {
   // store hooks
   const { allowPermissions } = useUserPermissions();
-  const { toggleSidebar, sidebarCollapsed, sidebarPeek, toggleSidebarPeek } = useAppTheme();
-  const { shouldRenderAppRail } = useAppRail();
+  const { toggleSidebar, sidebarCollapsed } = useAppTheme();
+  const { shouldRenderAppRail, isEnabled: isAppRailEnabled } = useAppRail();
   const { groupedFavorites } = useFavorite();
   const windowSize = useSize();
   // refs
@@ -56,20 +56,14 @@ export const AppSidebar: FC = observer(() => {
         {/* Workspace switcher and settings */}
         {!shouldRenderAppRail && <SidebarDropdown />}
 
-        <div className="flex items-center justify-between gap-2">
-          <span className="text-md text-custom-text-200 font-medium px-1 pt-1">Projects</span>
-          <div className="flex items-center gap-2">
-            <button
-              className="flex items-center justify-center size-6 rounded text-custom-text-200 hover:text-custom-primary-100 hover:bg-custom-background-90"
-              onClick={() => {
-                if (sidebarPeek) toggleSidebarPeek(false);
-                toggleSidebar();
-              }}
-            >
-              <PanelLeft className="size-4" />
-            </button>
+        {isAppRailEnabled && (
+          <div className="flex items-center justify-between gap-2">
+            <span className="text-md text-custom-text-200 font-medium px-1 pt-1">Projects</span>
+            <div className="flex items-center gap-2">
+              <AppSidebarToggleButton />
+            </div>
           </div>
-        </div>
+        )}
         {/* Quick actions */}
         <SidebarQuickActions />
       </div>
@@ -83,9 +77,12 @@ export const AppSidebar: FC = observer(() => {
         <SidebarProjectsList />
       </div>
       {/* Help Section */}
-      <div className="flex items-center justify-between p-2 border-t border-custom-border-200 bg-custom-sidebar-background-100 h-12">
+      <div className="flex items-center justify-between p-3 border-t border-custom-border-200 bg-custom-sidebar-background-100 h-12">
         <WorkspaceEditionBadge />
-        {!shouldRenderAppRail && <HelpMenu />}
+        <div className="flex items-center gap-2">
+          {!shouldRenderAppRail && <HelpMenu />}
+          {!isAppRailEnabled && <AppSidebarToggleButton />}
+        </div>
       </div>
     </>
   );
diff --git a/web/core/components/core/app-header.tsx b/web/core/components/core/app-header.tsx
index 605b53fa38f..1957f86b8bf 100644
--- a/web/core/components/core/app-header.tsx
+++ b/web/core/components/core/app-header.tsx
@@ -5,7 +5,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { Row } from "@plane/ui";
 // components
-import { SidebarHamburgerToggle } from "@/components/core";
+import { AppSidebarToggleButton } from "@/components/sidebar";
 // hooks
 import { useAppTheme } from "@/hooks/store";
 
@@ -22,7 +22,7 @@ export const AppHeader = observer((props: AppHeaderProps) => {
   return (
     <div className="z-[18]">
       <Row className="h-[3.75rem] flex gap-2 w-full items-center border-b border-custom-border-200 bg-custom-sidebar-background-100">
-        {sidebarCollapsed && <SidebarHamburgerToggle />}
+        {sidebarCollapsed && <AppSidebarToggleButton />}
         <div className="w-full">{header}</div>
       </Row>
       {mobileHeader && mobileHeader}
diff --git a/web/core/components/sidebar/index.ts b/web/core/components/sidebar/index.ts
index a62431ef52f..c639b0bac80 100644
--- a/web/core/components/sidebar/index.ts
+++ b/web/core/components/sidebar/index.ts
@@ -1,3 +1,4 @@
 export * from "./sidebar-navigation";
 export * from "./resizable-sidebar";
 export * from "./sidebar-item";
+export * from "./sidebar-toggle-button";
diff --git a/web/core/components/sidebar/sidebar-toggle-button.tsx b/web/core/components/sidebar/sidebar-toggle-button.tsx
new file mode 100644
index 00000000000..b48aed863c5
--- /dev/null
+++ b/web/core/components/sidebar/sidebar-toggle-button.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { PanelLeft } from "lucide-react";
+// hooks
+import { useAppTheme } from "@/hooks/store";
+
+export const AppSidebarToggleButton = observer(() => {
+  // store hooks
+  const { toggleSidebar, sidebarPeek, toggleSidebarPeek } = useAppTheme();
+
+  return (
+    <button
+      className="flex items-center justify-center size-6 rounded-md text-custom-text-200 hover:text-custom-primary-100 hover:bg-custom-background-90"
+      onClick={() => {
+        if (sidebarPeek) toggleSidebarPeek(false);
+        toggleSidebar();
+      }}
+    >
+      <PanelLeft className="size-4" />
+    </button>
+  );
+});

From bcee463b34707aaf4f1774a9db0d0cbd3d8489da Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Tue, 1 Jul 2025 16:11:01 +0530
Subject: [PATCH 35/47] chore: code refactor

---
 web/core/layouts/auth-layout/project-wrapper.tsx   | 4 ++--
 web/core/layouts/auth-layout/workspace-wrapper.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/core/layouts/auth-layout/project-wrapper.tsx b/web/core/layouts/auth-layout/project-wrapper.tsx
index ad192f90fa0..23881acb5ee 100644
--- a/web/core/layouts/auth-layout/project-wrapper.tsx
+++ b/web/core/layouts/auth-layout/project-wrapper.tsx
@@ -166,7 +166,7 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
   // check if the project member apis is loading
   if (isParentLoading || (!projectMemberInfo && projectId && hasPermissionToCurrentProject === null))
     return (
-      <div className="grid h-screen place-items-center bg-custom-background-100 p-4 rounded-lg border border-custom-border-200">
+      <div className="grid h-full place-items-center bg-custom-background-100 p-4 rounded-lg border border-custom-border-200">
         <div className="flex flex-col items-center gap-3 text-center">
           <LogoSpinner />
         </div>
@@ -184,7 +184,7 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
   // check if the project info is not found.
   if (loader === "loaded" && projectId && !!hasPermissionToCurrentProject === false)
     return (
-      <div className="grid h-screen place-items-center bg-custom-background-100">
+      <div className="grid h-full place-items-center bg-custom-background-100">
         <DetailedEmptyState
           title={t("workspace_projects.empty_state.general.title")}
           description={t("workspace_projects.empty_state.general.description")}
diff --git a/web/core/layouts/auth-layout/workspace-wrapper.tsx b/web/core/layouts/auth-layout/workspace-wrapper.tsx
index a05d64e1b16..c711870d4d7 100644
--- a/web/core/layouts/auth-layout/workspace-wrapper.tsx
+++ b/web/core/layouts/auth-layout/workspace-wrapper.tsx
@@ -135,7 +135,7 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
   // if list of workspaces are not there then we have to render the spinner
   if (isParentLoading || allWorkspaces === undefined || loader || isDBInitializing) {
     return (
-      <div className="grid h-screen place-items-center bg-custom-background-100 p-4 rounded-lg border border-custom-border-200">
+      <div className="grid h-full place-items-center bg-custom-background-100 p-4 rounded-lg border border-custom-border-200">
         <div className="flex flex-col items-center gap-3 text-center">
           <LogoSpinner />
         </div>
@@ -146,7 +146,7 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
   // if workspaces are there and we are trying to access the workspace that we are not part of then show the existing workspaces
   if (currentWorkspace === undefined && !currentWorkspaceInfo) {
     return (
-      <div className="relative flex h-screen w-full flex-col items-center justify-center bg-custom-background-90 ">
+      <div className="relative flex h-full w-full flex-col items-center justify-center bg-custom-background-90 ">
         <div className="container relative mx-auto flex h-full w-full flex-col overflow-hidden overflow-y-auto px-5 py-14 md:px-0">
           <div className="relative flex flex-shrink-0 items-center justify-between gap-4">
             <div className="z-10 flex-shrink-0 bg-custom-background-90 py-4">

From 0a5b37fdd61ac2574f5cbf6e715f46583262234b Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Tue, 1 Jul 2025 16:38:23 +0530
Subject: [PATCH 36/47] chore: workspace menu improvements

---
 .../components/workspace/sidebar/dropdown.tsx | 22 ++++++---
 .../workspace/sidebar/workspace-menu-root.tsx | 47 ++++++++-----------
 2 files changed, 36 insertions(+), 33 deletions(-)

diff --git a/web/core/components/workspace/sidebar/dropdown.tsx b/web/core/components/workspace/sidebar/dropdown.tsx
index a70590dcd92..c3eedc4c610 100644
--- a/web/core/components/workspace/sidebar/dropdown.tsx
+++ b/web/core/components/workspace/sidebar/dropdown.tsx
@@ -1,12 +1,22 @@
 "use client";
 
 import { observer } from "mobx-react";
+// hooks
+import { useAppRail } from "@/hooks/use-app-rail";
+// components
+import { WorkspaceAppSwitcher } from "@/plane-web/components/workspace/app-switcher";
 import { UserMenuRoot } from "./user-menu-root";
 import { WorkspaceMenuRoot } from "./workspace-menu-root";
 
-export const SidebarDropdown = observer(() => (
-  <div className="flex items-center justify-center gap-x-3 gap-y-2">
-    <WorkspaceMenuRoot />
-    <UserMenuRoot />
-  </div>
-));
+export const SidebarDropdown = observer(() => {
+  // hooks
+  const { shouldRenderAppRail, isEnabled: isAppRailEnabled } = useAppRail();
+
+  return (
+    <div className="flex items-center justify-center gap-1.5 w-full">
+      {isAppRailEnabled && !shouldRenderAppRail && <WorkspaceAppSwitcher />}
+      <WorkspaceMenuRoot />
+      <UserMenuRoot />
+    </div>
+  );
+});
diff --git a/web/core/components/workspace/sidebar/workspace-menu-root.tsx b/web/core/components/workspace/sidebar/workspace-menu-root.tsx
index a7e129aed5e..5e607737246 100644
--- a/web/core/components/workspace/sidebar/workspace-menu-root.tsx
+++ b/web/core/components/workspace/sidebar/workspace-menu-root.tsx
@@ -17,8 +17,6 @@ import { AppSidebarItem } from "@/components/sidebar";
 // hooks
 import { useAppTheme, useUser, useUserProfile, useWorkspace } from "@/hooks/store";
 // plane web helpers
-import { useAppRail } from "@/hooks/use-app-rail";
-import { WorkspaceAppSwitcher } from "@/plane-web/components/workspace";
 import { getIsWorkspaceCreationDisabled } from "@/plane-web/helpers/instance.helper";
 // components
 import { WorkspaceLogo } from "../logo";
@@ -36,7 +34,6 @@ export const WorkspaceMenuRoot = observer((props: WorkspaceMenuRootProps) => {
   const { signOut } = useUser();
   const { updateUserProfile } = useUserProfile();
   const { currentWorkspace: activeWorkspace, workspaces } = useWorkspace();
-  const { shouldRenderAppRail, isEnabled: isAppRailEnabled } = useAppRail();
   // derived values
   const isWorkspaceCreationEnabled = getIsWorkspaceCreationDisabled() === false;
   // translation
@@ -105,33 +102,29 @@ export const WorkspaceMenuRoot = observer((props: WorkspaceMenuRootProps) => {
                 />
               </Menu.Button>
             ) : (
-              <div
+              <Menu.Button
                 className={cn(
-                  "group/menu-button flex justify-between flex-grow items-center gap-1 p-1 truncate rounded text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:outline-none"
-                )}
-              >
-                {isAppRailEnabled && !shouldRenderAppRail && <WorkspaceAppSwitcher />}
-                <Menu.Button
-                  className={cn("flex items-center  gap-1 p-1 truncate", {
+                  "group/menu-button flex items-center  gap-1 p-1 truncate rounded text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:outline-none ",
+                  {
                     "justify-center text-center": renderLogoOnly,
                     "justify-between flex-grow": !renderLogoOnly,
-                  })}
-                  aria-label={t("aria_labels.projects_sidebar.open_workspace_switcher")}
-                >
-                  <div className="flex-grow flex items-center gap-2 truncate">
-                    <WorkspaceLogo logo={activeWorkspace?.logo_url} name={activeWorkspace?.name} />
-                    <h4 className="truncate text-base font-medium text-custom-text-100">
-                      {activeWorkspace?.name ?? t("loading")}
-                    </h4>
-                  </div>
-                  <ChevronDown
-                    className={cn(
-                      "flex-shrink-0 mx-1 hidden size-4 group-hover/menu-button:block text-custom-sidebar-text-400 duration-300",
-                      { "rotate-180": open }
-                    )}
-                  />
-                </Menu.Button>
-              </div>
+                  }
+                )}
+                aria-label={t("aria_labels.projects_sidebar.open_workspace_switcher")}
+              >
+                <div className="flex-grow flex items-center gap-2 truncate">
+                  <WorkspaceLogo logo={activeWorkspace?.logo_url} name={activeWorkspace?.name} />
+                  <h4 className="truncate text-base font-medium text-custom-text-100">
+                    {activeWorkspace?.name ?? t("loading")}
+                  </h4>
+                </div>
+                <ChevronDown
+                  className={cn(
+                    "flex-shrink-0 mx-1 opacity-0 size-4 group-hover/menu-button:opacity-100 text-custom-sidebar-text-400 duration-300",
+                    { "rotate-180": open }
+                  )}
+                />
+              </Menu.Button>
             )}
 
             <Transition

From 220d812f11d2c5c5fd54b311f425c960f51d8be4 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Tue, 1 Jul 2025 16:43:20 +0530
Subject: [PATCH 37/47] chore: sidebar spacing and padding improvements

---
 web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx | 4 ++--
 web/core/components/sidebar/resizable-sidebar.tsx    | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx b/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx
index 065fa95dc64..65083dc73d5 100644
--- a/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx
+++ b/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx
@@ -52,7 +52,7 @@ export const AppSidebar: FC = observer(() => {
 
   return (
     <>
-      <div className="flex flex-col gap-2 px-4">
+      <div className="flex flex-col gap-2 px-3">
         {/* Workspace switcher and settings */}
         {!shouldRenderAppRail && <SidebarDropdown />}
 
@@ -67,7 +67,7 @@ export const AppSidebar: FC = observer(() => {
         {/* Quick actions */}
         <SidebarQuickActions />
       </div>
-      <div className="flex flex-col gap-0.5 overflow-x-hidden scrollbar-sm h-full w-full overflow-y-auto pt-3 pb-0.5 vertical-scrollbar px-4">
+      <div className="flex flex-col gap-3 overflow-x-hidden scrollbar-sm h-full w-full overflow-y-auto vertical-scrollbar px-3 pt-3 pb-0.5">
         <SidebarMenuItems />
         {/* Favorites Menu */}
         {canPerformWorkspaceMemberActions && !isFavoriteEmpty && <SidebarFavoritesMenu />}
diff --git a/web/core/components/sidebar/resizable-sidebar.tsx b/web/core/components/sidebar/resizable-sidebar.tsx
index 74bddf11590..92d554b1b97 100644
--- a/web/core/components/sidebar/resizable-sidebar.tsx
+++ b/web/core/components/sidebar/resizable-sidebar.tsx
@@ -199,7 +199,7 @@ export function ResizableSidebar({
       >
         <aside
           className={cn(
-            "group/sidebar h-full w-full bg-custom-background-100 overflow-hidden relative flex flex-col pt-4",
+            "group/sidebar h-full w-full bg-custom-background-100 overflow-hidden relative flex flex-col pt-3",
             isAnyExtendedSidebarExpanded && "rounded-none"
           )}
         >

From 5c2d1e97e45d4dd2c9f26949b763284323789f31 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Tue, 1 Jul 2025 16:54:06 +0530
Subject: [PATCH 38/47] chore: settings layout improvement

---
 web/core/components/settings/header.tsx       | 4 ++++
 web/core/components/settings/sidebar/root.tsx | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/web/core/components/settings/header.tsx b/web/core/components/settings/header.tsx
index ee722ba0056..832f7f39b88 100644
--- a/web/core/components/settings/header.tsx
+++ b/web/core/components/settings/header.tsx
@@ -2,6 +2,7 @@
 
 import { observer } from "mobx-react";
 import Link from "next/link";
+import { useTheme } from "next-themes";
 import { ChevronLeftIcon } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
 import { getButtonStyling } from "@plane/ui/src/button";
@@ -15,12 +16,15 @@ export const SettingsHeader = observer(() => {
   const { t } = useTranslation();
   const { currentWorkspace } = useWorkspace();
   const { isScrolled } = useUserSettings();
+  // resolved theme
+  const { resolvedTheme } = useTheme();
   // redirect url for normal mode
 
   return (
     <div
       className={cn("bg-custom-background-90 p-page-x transition-all duration-300 ease-in-out relative", {
         "!pt-4 flex md:flex-col": isScrolled,
+        "bg-custom-background-90/50": resolvedTheme === "dark",
       })}
     >
       <Link
diff --git a/web/core/components/settings/sidebar/root.tsx b/web/core/components/settings/sidebar/root.tsx
index e6003fc2c59..8559611d02e 100644
--- a/web/core/components/settings/sidebar/root.tsx
+++ b/web/core/components/settings/sidebar/root.tsx
@@ -52,7 +52,7 @@ export const SettingsSidebar = observer((props: SettingsSidebarProps) => {
       >
         {categories.map((category) => (
           <div key={category} className="py-3">
-            <span className="text-sm font-semibold text-custom-text-350 capitalize mb-2">{t(category)}</span>
+            <span className="text-sm font-semibold text-custom-text-350 capitalize mb-2 px-2">{t(category)}</span>
             {groupedSettings[category].length > 0 && (
               <div className="relative flex flex-col gap-0.5 h-full mt-2">
                 {groupedSettings[category].map(

From db0a62dd10445d46583567fd6d8a60818b070e85 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Tue, 1 Jul 2025 18:23:26 +0530
Subject: [PATCH 39/47] chore: enhancements

---
 packages/constants/src/workspace.ts           |   3 +
 .../(projects)/extended-sidebar-wrapper.tsx   |  12 +-
 .../[workspaceSlug]/(projects)/sidebar.tsx    |   4 +-
 .../components/sidebar/resizable-sidebar.tsx  |  11 +-
 .../workspace/sidebar/sidebar-menu-items.tsx  | 118 ++++++++++++++----
 .../workspace/sidebar/workspace-menu-root.tsx |   2 +-
 6 files changed, 106 insertions(+), 44 deletions(-)

diff --git a/packages/constants/src/workspace.ts b/packages/constants/src/workspace.ts
index 25c942dfc64..471223c6f04 100644
--- a/packages/constants/src/workspace.ts
+++ b/packages/constants/src/workspace.ts
@@ -318,6 +318,9 @@ export const WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS: Record<string, IWorkspac
 export const WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS_LINKS: IWorkspaceSidebarNavigationItem[] = [
   WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["home"],
   WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["inbox"],
+];
+
+export const WORKSPACE_SIDEBAR_STATIC_PINNED_NAVIGATION_ITEMS_LINKS: IWorkspaceSidebarNavigationItem[] = [
   WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["projects"],
 ];
 
diff --git a/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx b/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx
index 52ac747aa7b..86d6c4b9429 100644
--- a/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx
+++ b/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx
@@ -7,8 +7,6 @@ import { SIDEBAR_WIDTH } from "@plane/constants";
 import { useLocalStorage } from "@plane/hooks";
 import { cn } from "@plane/utils";
 // hooks
-import { useAppTheme } from "@/hooks/store";
-import { useAppRail } from "@/hooks/use-app-rail";
 import useExtendedSidebarOutsideClickDetector from "@/hooks/use-extended-sidebar-overview-outside-click";
 
 type Props = {
@@ -22,8 +20,6 @@ type Props = {
 export const ExtendedSidebarWrapper: FC<Props> = observer((props) => {
   const { children, extendedSidebarRef, isExtendedSidebarOpened, handleClose, excludedElementId } = props;
   // store hooks
-  const { sidebarPeek } = useAppTheme();
-  const { shouldRenderAppRail } = useAppRail();
   const { storedValue } = useLocalStorage("sidebarWidth", SIDEBAR_WIDTH);
 
   useExtendedSidebarOutsideClickDetector(extendedSidebarRef, handleClose, excludedElementId);
@@ -33,18 +29,14 @@ export const ExtendedSidebarWrapper: FC<Props> = observer((props) => {
       id={excludedElementId}
       ref={extendedSidebarRef}
       className={cn(
-        `fixed h-full z-[19] flex flex-col w-[300px] py-2 transform transition-all duration-300 ease-in-out bg-custom-background-100 border border-l-0 border-custom-sidebar-border-200 p-4 shadow-sm`,
+        `absolute h-full z-[19] flex flex-col w-[300px] 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-[600px] opacity-0 w-0": !isExtendedSidebarOpened,
-          "border border-l-none rounded-tr-md rounded-br-md": sidebarPeek,
         }
       )}
       style={{
-        top: sidebarPeek ? "3rem" : "0.5rem",
-        bottom: sidebarPeek ? "3rem" : "0.5rem",
-        left: `${(storedValue ?? SIDEBAR_WIDTH) + (shouldRenderAppRail && !sidebarPeek ? 60 : 0)}px`,
-        height: sidebarPeek ? "calc(100% - 6rem)" : "calc(100% - 1.25rem)",
+        left: `${storedValue ?? SIDEBAR_WIDTH}px`,
       }}
     >
       {children}
diff --git a/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx b/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx
index 65083dc73d5..b5dbec81cef 100644
--- a/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx
+++ b/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx
@@ -52,13 +52,13 @@ export const AppSidebar: FC = observer(() => {
 
   return (
     <>
-      <div className="flex flex-col gap-2 px-3">
+      <div className="flex flex-col gap-3 px-3">
         {/* Workspace switcher and settings */}
         {!shouldRenderAppRail && <SidebarDropdown />}
 
         {isAppRailEnabled && (
           <div className="flex items-center justify-between gap-2">
-            <span className="text-md text-custom-text-200 font-medium px-1 pt-1">Projects</span>
+            <span className="text-md text-custom-text-200 font-medium pt-1">Projects</span>
             <div className="flex items-center gap-2">
               <AppSidebarToggleButton />
             </div>
diff --git a/web/core/components/sidebar/resizable-sidebar.tsx b/web/core/components/sidebar/resizable-sidebar.tsx
index 92d554b1b97..61280e7c5d5 100644
--- a/web/core/components/sidebar/resizable-sidebar.tsx
+++ b/web/core/components/sidebar/resizable-sidebar.tsx
@@ -226,7 +226,7 @@ export function ResizableSidebar({
       {isCollapsed && !disablePeekTrigger && (
         <div
           className={cn(
-            "fixed top-0 left-0 w-1 h-full z-50 bg-transparent",
+            "absolute top-0 left-0 w-1 h-full z-50 bg-transparent",
             "transition-opacity duration-200",
             isHoveringTrigger ? "opacity-100" : "opacity-0"
           )}
@@ -240,7 +240,7 @@ export function ResizableSidebar({
       {/* Peek View */}
       <div
         className={cn(
-          "fixed left-0 z-30 bg-custom-background-100 shadow-sm",
+          "absolute left-0 z-30 bg-custom-background-100 shadow-sm h-full",
           !isResizing && "transition-all duration-300 ease-in-out",
           isCollapsed && showPeek ? "translate-x-0 opacity-100" : "translate-x-[-100%] opacity-0",
           "pointer-events-none",
@@ -249,8 +249,6 @@ export function ResizableSidebar({
         )}
         style={{
           width: `${width}px`,
-          height: "calc(100% - 6rem)",
-          top: "3rem",
         }}
         onMouseEnter={handlePeekEnter}
         onMouseLeave={handlePeekLeave}
@@ -260,9 +258,8 @@ export function ResizableSidebar({
         <aside
           className={cn(
             "group/sidebar h-full w-full bg-custom-background-100 overflow-hidden relative flex flex-col z-20 pt-4",
-            "self-center border-y border-r border-custom-sidebar-border-200 rounded-md rounded-tl-none rounded-bl-none",
-            isAnyExtendedSidebarExpanded && "rounded-none",
-            !isResizing && !isAnyExtendedSidebarExpanded && "border-r"
+            "self-center border-r border-custom-sidebar-border-200 rounded-md rounded-tl-none rounded-bl-none",
+            isAnyExtendedSidebarExpanded && "rounded-none"
           )}
         >
           {children}
diff --git a/web/core/components/workspace/sidebar/sidebar-menu-items.tsx b/web/core/components/workspace/sidebar/sidebar-menu-items.tsx
index 5b501c3b08e..3a2676c816a 100644
--- a/web/core/components/workspace/sidebar/sidebar-menu-items.tsx
+++ b/web/core/components/workspace/sidebar/sidebar-menu-items.tsx
@@ -2,23 +2,32 @@
 import React, { useMemo } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { Ellipsis } from "lucide-react";
+import { ChevronRight, Ellipsis } from "lucide-react";
+import { Disclosure, Transition } from "@headlessui/react";
 // plane imports
 import {
   WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS_LINKS,
   WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS_LINKS,
+  WORKSPACE_SIDEBAR_STATIC_PINNED_NAVIGATION_ITEMS_LINKS,
 } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { cn } from "@plane/utils";
 // components
 import { SidebarNavItem } from "@/components/sidebar";
 // store hooks
 import { useAppTheme, useWorkspace } from "@/hooks/store";
+import useLocalStorage from "@/hooks/use-local-storage";
 // plane-web imports
 import { SidebarItem } from "@/plane-web/components/workspace/sidebar";
 
 export const SidebarMenuItems = observer(() => {
   // routers
   const { workspaceSlug } = useParams();
+  const { setValue: toggleWorkspaceMenu, storedValue: isWorkspaceMenuOpen } = useLocalStorage<boolean>(
+    "is_workspace_menu_open",
+    true
+  );
+
   // store hooks
   const { isExtendedSidebarOpened, toggleExtendedSidebar } = useAppTheme();
   const { getNavigationPreferences } = useWorkspace();
@@ -27,6 +36,10 @@ export const SidebarMenuItems = observer(() => {
   // derived values
   const currentWorkspaceNavigationPreferences = getNavigationPreferences(workspaceSlug.toString());
 
+  const toggleListDisclosure = (isOpen: boolean) => {
+    toggleWorkspaceMenu(isOpen);
+  };
+
   const sortedNavigationItems = useMemo(
     () =>
       WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS_LINKS.map((item) => {
@@ -40,29 +53,86 @@ export const SidebarMenuItems = observer(() => {
   );
 
   return (
-    <div className="flex flex-col gap-0.5">
-      {WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS_LINKS.map((item, _index) => (
-        <SidebarItem key={`static_${_index}`} item={item} />
-      ))}
-      {sortedNavigationItems.map((item, _index) => (
-        <SidebarItem key={`dynamic_${_index}`} item={item} />
-      ))}
-      <SidebarNavItem>
-        <button
-          type="button"
-          onClick={() => toggleExtendedSidebar()}
-          className="flex items-center gap-1.5 text-sm font-medium flex-grow text-custom-text-350"
-          id="extended-sidebar-toggle"
-          aria-label={t(
-                     isExtendedSidebarOpened
-                       ? "aria_labels.projects_sidebar.close_extended_sidebar"
-                       : "aria_labels.projects_sidebar.open_extended_sidebar"
-          )}
+    <>
+      <div className="flex flex-col gap-0.5">
+        {WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS_LINKS.map((item, _index) => (
+          <SidebarItem key={`static_${_index}`} item={item} />
+        ))}
+      </div>
+      <Disclosure as="div" className="flex flex-col" defaultOpen={!!isWorkspaceMenuOpen}>
+        <div className="group w-full flex items-center justify-between px-2 py-1.5 rounded text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-90">
+          <Disclosure.Button
+            as="button"
+            type="button"
+            className="w-full flex items-center gap-1 whitespace-nowrap text-left text-sm font-semibold text-custom-sidebar-text-400"
+            onClick={() => toggleListDisclosure(!isWorkspaceMenuOpen)}
+            aria-label={t(
+              isWorkspaceMenuOpen
+                ? "aria_labels.app_sidebar.close_workspace_menu"
+                : "aria_labels.app_sidebar.open_workspace_menu"
+            )}
+          >
+            <span className="text-sm font-semibold">{t("workspace")}</span>
+          </Disclosure.Button>
+          <div className="flex items-center opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto">
+            <Disclosure.Button
+              as="button"
+              type="button"
+              className="p-0.5 rounded hover:bg-custom-sidebar-background-80 flex-shrink-0"
+              onClick={() => toggleListDisclosure(!isWorkspaceMenuOpen)}
+              aria-label={t(
+                isWorkspaceMenuOpen
+                  ? "aria_labels.app_sidebar.close_workspace_menu"
+                  : "aria_labels.app_sidebar.open_workspace_menu"
+              )}
+            >
+              <ChevronRight
+                className={cn("flex-shrink-0 size-3 transition-all", {
+                  "rotate-90": isWorkspaceMenuOpen,
+                })}
+              />
+            </Disclosure.Button>
+          </div>
+        </div>
+        <Transition
+          show={!!isWorkspaceMenuOpen}
+          enter="transition duration-100 ease-out"
+          enterFrom="transform scale-95 opacity-0"
+          enterTo="transform scale-100 opacity-100"
+          leave="transition duration-75 ease-out"
+          leaveFrom="transform scale-100 opacity-100"
+          leaveTo="transform scale-95 opacity-0"
         >
-          <Ellipsis className="flex-shrink-0 size-4" />
-          <span>More</span>
-        </button>
-      </SidebarNavItem>
-    </div>
+          {isWorkspaceMenuOpen && (
+            <Disclosure.Panel as="div" className="flex flex-col gap-0.5" static>
+              <>
+                {WORKSPACE_SIDEBAR_STATIC_PINNED_NAVIGATION_ITEMS_LINKS.map((item, _index) => (
+                  <SidebarItem key={`static_${_index}`} item={item} />
+                ))}
+                {sortedNavigationItems.map((item, _index) => (
+                  <SidebarItem key={`dynamic_${_index}`} item={item} />
+                ))}
+                <SidebarNavItem>
+                  <button
+                    type="button"
+                    onClick={() => toggleExtendedSidebar()}
+                    className="flex items-center gap-1.5 text-sm font-medium flex-grow text-custom-text-350"
+                    id="extended-sidebar-toggle"
+                    aria-label={t(
+                      isExtendedSidebarOpened
+                        ? "aria_labels.app_sidebar.close_extended_sidebar"
+                        : "aria_labels.app_sidebar.open_extended_sidebar"
+                    )}
+                  >
+                    <Ellipsis className="flex-shrink-0 size-4" />
+                    <span>{isExtendedSidebarOpened ? "Hide" : "More"}</span>
+                  </button>
+                </SidebarNavItem>
+              </>
+            </Disclosure.Panel>
+          )}
+        </Transition>
+      </Disclosure>
+    </>
   );
 });
diff --git a/web/core/components/workspace/sidebar/workspace-menu-root.tsx b/web/core/components/workspace/sidebar/workspace-menu-root.tsx
index 5e607737246..c6f1d3ec2ce 100644
--- a/web/core/components/workspace/sidebar/workspace-menu-root.tsx
+++ b/web/core/components/workspace/sidebar/workspace-menu-root.tsx
@@ -120,7 +120,7 @@ export const WorkspaceMenuRoot = observer((props: WorkspaceMenuRootProps) => {
                 </div>
                 <ChevronDown
                   className={cn(
-                    "flex-shrink-0 mx-1 opacity-0 size-4 group-hover/menu-button:opacity-100 text-custom-sidebar-text-400 duration-300",
+                    "flex-shrink-0 mx-1 hidden size-4 group-hover/menu-button:block text-custom-sidebar-text-400 duration-300",
                     { "rotate-180": open }
                   )}
                 />

From ee16f1aacd45ee3ddfc64baf59454018b87b1e32 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Thu, 3 Jul 2025 11:51:35 +0530
Subject: [PATCH 40/47] chore: extended sidebar code refactor

---
 packages/constants/src/sidebar.ts                            | 1 +
 .../[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx  | 5 +++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/constants/src/sidebar.ts b/packages/constants/src/sidebar.ts
index f68f7f0fdba..7468597549c 100644
--- a/packages/constants/src/sidebar.ts
+++ b/packages/constants/src/sidebar.ts
@@ -1 +1,2 @@
 export const SIDEBAR_WIDTH = 250;
+export const EXTENDED_SIDEBAR_WIDTH = 300;
diff --git a/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx b/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx
index 86d6c4b9429..fcb99c4356a 100644
--- a/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx
+++ b/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx
@@ -3,7 +3,7 @@
 import React, { FC } from "react";
 import { observer } from "mobx-react";
 // plane imports
-import { SIDEBAR_WIDTH } from "@plane/constants";
+import { EXTENDED_SIDEBAR_WIDTH, SIDEBAR_WIDTH } from "@plane/constants";
 import { useLocalStorage } from "@plane/hooks";
 import { cn } from "@plane/utils";
 // hooks
@@ -29,7 +29,7 @@ export const ExtendedSidebarWrapper: FC<Props> = observer((props) => {
       id={excludedElementId}
       ref={extendedSidebarRef}
       className={cn(
-        `absolute h-full z-[19] flex flex-col w-[300px] 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`,
+        `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-[600px] opacity-0 w-0": !isExtendedSidebarOpened,
@@ -37,6 +37,7 @@ export const ExtendedSidebarWrapper: FC<Props> = observer((props) => {
       )}
       style={{
         left: `${storedValue ?? SIDEBAR_WIDTH}px`,
+        width: `${EXTENDED_SIDEBAR_WIDTH}px`,
       }}
     >
       {children}

From dc51f84150ed14db6c113029d71a05ef4f3874b0 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Thu, 3 Jul 2025 12:11:11 +0530
Subject: [PATCH 41/47] chore: code refactor

---
 web/core/hooks/use-workspace-paths.ts | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 web/core/hooks/use-workspace-paths.ts

diff --git a/web/core/hooks/use-workspace-paths.ts b/web/core/hooks/use-workspace-paths.ts
new file mode 100644
index 00000000000..fd0e742191f
--- /dev/null
+++ b/web/core/hooks/use-workspace-paths.ts
@@ -0,0 +1,24 @@
+"use client";
+
+import { useParams, usePathname } from "next/navigation";
+
+/**
+ * Custom hook to detect different workspace paths
+ * @returns Object containing boolean flags for different workspace paths
+ */
+export const useWorkspacePaths = () => {
+  const { workspaceSlug } = useParams();
+  const pathname = usePathname();
+
+  const isSettingsPath = pathname.includes(`/${workspaceSlug}/settings`);
+  const isWikiPath = pathname.includes(`/${workspaceSlug}/pages`);
+  const isAiPath = pathname.includes(`/${workspaceSlug}/pi-chat`);
+  const isProjectsPath = pathname.includes(`/${workspaceSlug}/`) && !isWikiPath && !isAiPath && !isSettingsPath;
+
+  return {
+    isSettingsPath,
+    isWikiPath,
+    isAiPath,
+    isProjectsPath,
+  };
+};

From b0a70ab06d9fc9d2ea7a65b14d3f2d2d2f428e4d Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Thu, 3 Jul 2025 13:50:13 +0530
Subject: [PATCH 42/47] fix: merge conflict

---
 web/ce/components/app-rail/index.ts | 1 -
 web/ce/components/app-rail/root.tsx | 4 ----
 web/ee/components/app-rail/index.ts | 1 -
 3 files changed, 6 deletions(-)
 delete mode 100644 web/ce/components/app-rail/index.ts
 delete mode 100644 web/ce/components/app-rail/root.tsx
 delete mode 100644 web/ee/components/app-rail/index.ts

diff --git a/web/ce/components/app-rail/index.ts b/web/ce/components/app-rail/index.ts
deleted file mode 100644
index 1efe34c51ec..00000000000
--- a/web/ce/components/app-rail/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./root";
diff --git a/web/ce/components/app-rail/root.tsx b/web/ce/components/app-rail/root.tsx
deleted file mode 100644
index 259764b2695..00000000000
--- a/web/ce/components/app-rail/root.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-"use client";
-import React from "react";
-
-export const AppRailRoot = () => <></>;
diff --git a/web/ee/components/app-rail/index.ts b/web/ee/components/app-rail/index.ts
deleted file mode 100644
index 68889686dcf..00000000000
--- a/web/ee/components/app-rail/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/app-rail";

From 6876ed8d1cb8cc35e253a870677ea63613e1924a Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Thu, 3 Jul 2025 14:45:17 +0530
Subject: [PATCH 43/47] fix: merge conflict

---
 apps/web/ce/components/app-rail/index.ts           |  1 +
 apps/web/ce/components/app-rail/root.tsx           |  4 ++++
 .../workspace/sidebar/projects-list-item.tsx       | 12 +++++++-----
 .../components/workspace/sidebar/projects-list.tsx |  9 ++++-----
 .../components/workspace/sidebar/quick-actions.tsx |  7 +++----
 .../workspace/sidebar/user-menu-item.tsx           | 14 +++++++++-----
 apps/web/ee/components/app-rail/index.ts           |  1 +
 7 files changed, 29 insertions(+), 19 deletions(-)
 create mode 100644 apps/web/ce/components/app-rail/index.ts
 create mode 100644 apps/web/ce/components/app-rail/root.tsx
 create mode 100644 apps/web/ee/components/app-rail/index.ts

diff --git a/apps/web/ce/components/app-rail/index.ts b/apps/web/ce/components/app-rail/index.ts
new file mode 100644
index 00000000000..1efe34c51ec
--- /dev/null
+++ b/apps/web/ce/components/app-rail/index.ts
@@ -0,0 +1 @@
+export * from "./root";
diff --git a/apps/web/ce/components/app-rail/root.tsx b/apps/web/ce/components/app-rail/root.tsx
new file mode 100644
index 00000000000..259764b2695
--- /dev/null
+++ b/apps/web/ce/components/app-rail/root.tsx
@@ -0,0 +1,4 @@
+"use client";
+import React from "react";
+
+export const AppRailRoot = () => <></>;
diff --git a/apps/web/core/components/workspace/sidebar/projects-list-item.tsx b/apps/web/core/components/workspace/sidebar/projects-list-item.tsx
index cc7c0e4d369..281c31375c9 100644
--- a/apps/web/core/components/workspace/sidebar/projects-list-item.tsx
+++ b/apps/web/core/components/workspace/sidebar/projects-list-item.tsx
@@ -12,7 +12,7 @@ import { createRoot } from "react-dom/client";
 import { LinkIcon, Settings, Share2, LogOut, MoreHorizontal, ChevronRight } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 // plane helpers
-import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { EUserPermissions, EUserPermissionsLevel, MEMBER_TRACKER_ELEMENTS } from "@plane/constants";
 import { useOutsideClickDetector } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
 // ui
@@ -23,7 +23,7 @@ import { Logo } from "@/components/common/logo";
 import { LeaveProjectModal, PublishProjectModal } from "@/components/project";
 // helpers
 // hooks
-import { useAppTheme, useCommandPalette, useEventTracker, useProject, useUserPermissions } from "@/hooks/store";
+import { useAppTheme, useCommandPalette, useProject, useUserPermissions } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane-web components
 import { ProjectNavigationRoot } from "@/plane-web/components/sidebar";
@@ -58,12 +58,12 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
   } = props;
   // store hooks
   const { t } = useTranslation();
-  const { setTrackElement } = useEventTracker();
   const { getPartialProjectById } = useProject();
   const { isMobile } = usePlatformOS();
   const { allowPermissions } = useUserPermissions();
   const { getIsProjectListOpen, toggleProjectListOpen } = useCommandPalette();
   const { toggleAnySidebarDropdown } = useAppTheme();
+
   // states
   const [leaveProjectModalOpen, setLeaveProjectModal] = useState(false);
   const [publishModalOpen, setPublishModal] = useState(false);
@@ -97,7 +97,6 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
   );
 
   const handleLeaveProject = () => {
-    setTrackElement("APP_SIDEBAR_PROJECT_DROPDOWN");
     setLeaveProjectModal(true);
   };
 
@@ -354,7 +353,10 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
                 </CustomMenu.MenuItem>
                 {/* leave project */}
                 {!isAuthorized && (
-                  <CustomMenu.MenuItem onClick={handleLeaveProject}>
+                  <CustomMenu.MenuItem
+                    onClick={handleLeaveProject}
+                    data-ph-element={MEMBER_TRACKER_ELEMENTS.SIDEBAR_PROJECT_QUICK_ACTIONS}
+                  >
                     <div className="flex items-center justify-start gap-2">
                       <LogOut className="h-3.5 w-3.5 stroke-[1.5]" />
                       <span>{t("leave_project")}</span>
diff --git a/apps/web/core/components/workspace/sidebar/projects-list.tsx b/apps/web/core/components/workspace/sidebar/projects-list.tsx
index 54099faace9..1f4a8f71ff0 100644
--- a/apps/web/core/components/workspace/sidebar/projects-list.tsx
+++ b/apps/web/core/components/workspace/sidebar/projects-list.tsx
@@ -7,7 +7,7 @@ import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";
 import { ChevronRight, Plus } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
-import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { EUserPermissions, EUserPermissionsLevel, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // ui
 import { Loader, TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
@@ -17,7 +17,7 @@ import { CreateProjectModal } from "@/components/project";
 import { SidebarProjectsListItem } from "@/components/workspace";
 // helpers
 // hooks
-import { useCommandPalette, useEventTracker, useProject, useUserPermissions } from "@/hooks/store";
+import { useCommandPalette, useProject, useUserPermissions } from "@/hooks/store";
 // plane web types
 import { TProject } from "@/plane-web/types";
 
@@ -32,7 +32,6 @@ export const SidebarProjectsList: FC = observer(() => {
   // store hooks
   const { t } = useTranslation();
   const { toggleCreateProjectModal } = useCommandPalette();
-  const { setTrackElement } = useEventTracker();
   const { allowPermissions } = useUserPermissions();
 
   const { loader, getPartialProjectById, joinedProjectIds: joinedProjects, updateProjectView } = useProject();
@@ -168,9 +167,9 @@ export const SidebarProjectsList: FC = observer(() => {
                   <Tooltip tooltipHeading={t("create_project")} tooltipContent="">
                     <button
                       type="button"
+                      data-ph-element={PROJECT_TRACKER_ELEMENTS.SIDEBAR_CREATE_PROJECT_TOOLTIP}
                       className="p-0.5 rounded hover:bg-custom-sidebar-background-80 flex-shrink-0"
                       onClick={() => {
-                        setTrackElement(`APP_SIDEBAR_JOINED_BLOCK`);
                         setIsProjectModalOpen(true);
                       }}
                       aria-label={t("aria_labels.projects_sidebar.create_new_project")}
@@ -239,9 +238,9 @@ export const SidebarProjectsList: FC = observer(() => {
         {isAuthorizedUser && joinedProjects?.length === 0 && (
           <button
             type="button"
+            data-ph-element={PROJECT_TRACKER_ELEMENTS.SIDEBAR_CREATE_PROJECT_BUTTON}
             className="w-full flex items-center gap-1.5 px-2 py-1.5 text-sm leading-5 font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-90 rounded-md"
             onClick={() => {
-              setTrackElement("Sidebar");
               toggleCreateProjectModal(true);
             }}
           >
diff --git a/apps/web/core/components/workspace/sidebar/quick-actions.tsx b/apps/web/core/components/workspace/sidebar/quick-actions.tsx
index dbf910a60ee..8784472331a 100644
--- a/apps/web/core/components/workspace/sidebar/quick-actions.tsx
+++ b/apps/web/core/components/workspace/sidebar/quick-actions.tsx
@@ -2,7 +2,7 @@ import { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { PenSquare } from "lucide-react";
-import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { EUserPermissions, EUserPermissionsLevel, SIDEBAR_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // types
 import { TIssue } from "@plane/types";
@@ -12,7 +12,7 @@ import { CreateUpdateIssueModal } from "@/components/issues";
 // constants
 // helpers
 // hooks
-import { useCommandPalette, useEventTracker, useProject, useUserPermissions } from "@/hooks/store";
+import { useCommandPalette, useProject, useUserPermissions } from "@/hooks/store";
 import useLocalStorage from "@/hooks/use-local-storage";
 // plane web components
 import { AppSearch } from "@/plane-web/components/workspace";
@@ -30,7 +30,6 @@ export const SidebarQuickActions = observer(() => {
   const workspaceSlug = routerWorkspaceSlug?.toString();
   // store hooks
   const { toggleCreateIssueModal } = useCommandPalette();
-  const { setTrackElement } = useEventTracker();
   const { joinedProjectIds } = useProject();
   const { allowPermissions } = useUserPermissions();
   // local storage
@@ -82,8 +81,8 @@ export const SidebarQuickActions = observer(() => {
               "cursor-not-allowed opacity-50 ": disabled,
             }
           )}
+          data-ph-element={SIDEBAR_TRACKER_ELEMENTS.CREATE_WORK_ITEM_BUTTON}
           onClick={() => {
-            setTrackElement("APP_SIDEBAR_QUICK_ACTIONS");
             toggleCreateIssueModal(true);
           }}
           onMouseEnter={handleMouseEnter}
diff --git a/apps/web/core/components/workspace/sidebar/user-menu-item.tsx b/apps/web/core/components/workspace/sidebar/user-menu-item.tsx
index d4967c6e382..5d0b555dc1b 100644
--- a/apps/web/core/components/workspace/sidebar/user-menu-item.tsx
+++ b/apps/web/core/components/workspace/sidebar/user-menu-item.tsx
@@ -3,14 +3,16 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
 // plane imports
-import { EUserPermissionsLevel, SIDEBAR_TRACKER_EVENTS } from "@plane/constants";
+import { EUserPermissionsLevel, SIDEBAR_TRACKER_ELEMENTS } from "@plane/constants";
+
 import { useTranslation } from "@plane/i18n";
 import { EUserWorkspaceRoles } from "@plane/types";
 // components
 import { SidebarNavItem } from "@/components/sidebar";
 import { NotificationAppSidebarOption } from "@/components/workspace-notifications";
 // hooks
-import { useAppTheme, useEventTracker, useUserPermissions } from "@/hooks/store";
+import { captureClick } from "@/helpers/event-tracker.helper";
+import { useAppTheme, useUserPermissions } from "@/hooks/store";
 
 export interface SidebarUserMenuItemProps {
   item: {
@@ -32,7 +34,6 @@ export const SidebarUserMenuItem: FC<SidebarUserMenuItemProps> = observer((props
   // package hooks
   const { t } = useTranslation();
   // store hooks
-  const { captureEvent } = useEventTracker();
   const { allowPermissions } = useUserPermissions();
   const { toggleSidebar } = useAppTheme();
 
@@ -47,8 +48,11 @@ export const SidebarUserMenuItem: FC<SidebarUserMenuItemProps> = observer((props
     if (window.innerWidth < 768) {
       toggleSidebar();
     }
-    captureEvent(SIDEBAR_TRACKER_EVENTS.click, {
-      destination: itemKey,
+    captureClick({
+      elementName: SIDEBAR_TRACKER_ELEMENTS.USER_MENU_ITEM,
+      context: {
+        destination: itemKey,
+      },
     });
   };
 
diff --git a/apps/web/ee/components/app-rail/index.ts b/apps/web/ee/components/app-rail/index.ts
new file mode 100644
index 00000000000..68889686dcf
--- /dev/null
+++ b/apps/web/ee/components/app-rail/index.ts
@@ -0,0 +1 @@
+export * from "ce/components/app-rail";

From 604b5e29fdf731be259faacce30a2b79273b1783 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Mon, 7 Jul 2025 13:27:18 +0530
Subject: [PATCH 44/47] chore: code refactor

---
 apps/web/core/components/sidebar/sidebar-toggle-button.tsx | 2 +-
 apps/web/core/components/workspace/sidebar/dropdown.tsx    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/core/components/sidebar/sidebar-toggle-button.tsx b/apps/web/core/components/sidebar/sidebar-toggle-button.tsx
index b48aed863c5..45caea0c6ae 100644
--- a/apps/web/core/components/sidebar/sidebar-toggle-button.tsx
+++ b/apps/web/core/components/sidebar/sidebar-toggle-button.tsx
@@ -11,7 +11,7 @@ export const AppSidebarToggleButton = observer(() => {
 
   return (
     <button
-      className="flex items-center justify-center size-6 rounded-md text-custom-text-200 hover:text-custom-primary-100 hover:bg-custom-background-90"
+      className="flex items-center justify-center size-6 rounded-md text-custom-text-400 hover:text-custom-primary-100 hover:bg-custom-background-90"
       onClick={() => {
         if (sidebarPeek) toggleSidebarPeek(false);
         toggleSidebar();
diff --git a/apps/web/core/components/workspace/sidebar/dropdown.tsx b/apps/web/core/components/workspace/sidebar/dropdown.tsx
index c3eedc4c610..e9f3adee0a2 100644
--- a/apps/web/core/components/workspace/sidebar/dropdown.tsx
+++ b/apps/web/core/components/workspace/sidebar/dropdown.tsx
@@ -14,8 +14,8 @@ export const SidebarDropdown = observer(() => {
 
   return (
     <div className="flex items-center justify-center gap-1.5 w-full">
-      {isAppRailEnabled && !shouldRenderAppRail && <WorkspaceAppSwitcher />}
       <WorkspaceMenuRoot />
+      {isAppRailEnabled && !shouldRenderAppRail && <WorkspaceAppSwitcher />}
       <UserMenuRoot />
     </div>
   );

From 8ca8a240a3125bf08ace1065e8faaf5a9eae62c4 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Tue, 8 Jul 2025 19:04:27 +0530
Subject: [PATCH 45/47] chore: code refactor

---
 .../[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx
index fcb99c4356a..4d1c22b3ac5 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx
@@ -32,7 +32,7 @@ export const ExtendedSidebarWrapper: FC<Props> = observer((props) => {
         `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-[600px] opacity-0 w-0": !isExtendedSidebarOpened,
+          [`-translate-x-[${EXTENDED_SIDEBAR_WIDTH}px] opacity-0 w-0`]: !isExtendedSidebarOpened,
         }
       )}
       style={{

From d6dd7b86054a16f4fddb5dbb79fcaadf97211684 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Tue, 8 Jul 2025 19:34:27 +0530
Subject: [PATCH 46/47] chore: code refactor

---
 .../core/components/workspace/sidebar/help-section/root.tsx    | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/web/core/components/workspace/sidebar/help-section/root.tsx b/apps/web/core/components/workspace/sidebar/help-section/root.tsx
index 88ad62f77fd..bf2a547d62c 100644
--- a/apps/web/core/components/workspace/sidebar/help-section/root.tsx
+++ b/apps/web/core/components/workspace/sidebar/help-section/root.tsx
@@ -11,7 +11,7 @@ import { CustomMenu, ToggleSwitch } from "@plane/ui";
 import { ProductUpdatesModal } from "@/components/global";
 import { AppSidebarItem } from "@/components/sidebar";
 // hooks
-import { useAppTheme, useCommandPalette, useInstance, useTransient, useUserSettings } from "@/hooks/store";
+import { useCommandPalette, useInstance, useTransient, useUserSettings } from "@/hooks/store";
 // plane web components
 import { PlaneVersionNumber } from "@/plane-web/components/global";
 
@@ -19,7 +19,6 @@ export const HelpMenuRoot = observer(() => {
   const { workspaceSlug, projectId } = useParams();
   // store hooks
   const { t } = useTranslation();
-  const {} = useAppTheme();
   const { toggleShortcutModal } = useCommandPalette();
   const { config } = useInstance();
   const { isIntercomToggle, toggleIntercom } = useTransient();

From b8c2729e60fde424c4c4dc719c823fd24be9a2d3 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Tue, 8 Jul 2025 19:49:35 +0530
Subject: [PATCH 47/47] chore: code refactor

---
 .../(projects)/extended-sidebar-wrapper.tsx         |  4 ++--
 .../core/components/sidebar/resizable-sidebar.tsx   |  2 +-
 apps/web/core/store/workspace/index.ts              | 13 -------------
 3 files changed, 3 insertions(+), 16 deletions(-)

diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx
index 4d1c22b3ac5..22d2b2c48a8 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx
@@ -32,12 +32,12 @@ export const ExtendedSidebarWrapper: FC<Props> = observer((props) => {
         `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 w-0`]: !isExtendedSidebarOpened,
+          [`-translate-x-[${EXTENDED_SIDEBAR_WIDTH}px] opacity-0 hidden`]: !isExtendedSidebarOpened,
         }
       )}
       style={{
         left: `${storedValue ?? SIDEBAR_WIDTH}px`,
-        width: `${EXTENDED_SIDEBAR_WIDTH}px`,
+        width: `${isExtendedSidebarOpened ? EXTENDED_SIDEBAR_WIDTH : 0}px`,
       }}
     >
       {children}
diff --git a/apps/web/core/components/sidebar/resizable-sidebar.tsx b/apps/web/core/components/sidebar/resizable-sidebar.tsx
index 61280e7c5d5..9f0741297b4 100644
--- a/apps/web/core/components/sidebar/resizable-sidebar.tsx
+++ b/apps/web/core/components/sidebar/resizable-sidebar.tsx
@@ -240,7 +240,7 @@ export function ResizableSidebar({
       {/* Peek View */}
       <div
         className={cn(
-          "absolute left-0 z-30 bg-custom-background-100 shadow-sm h-full",
+          "absolute left-0 z-20 bg-custom-background-100 shadow-sm h-full",
           !isResizing && "transition-all duration-300 ease-in-out",
           isCollapsed && showPeek ? "translate-x-0 opacity-100" : "translate-x-[-100%] opacity-0",
           "pointer-events-none",
diff --git a/apps/web/core/store/workspace/index.ts b/apps/web/core/store/workspace/index.ts
index 2c1ded1a8ab..36a47d35dc2 100644
--- a/apps/web/core/store/workspace/index.ts
+++ b/apps/web/core/store/workspace/index.ts
@@ -17,8 +17,6 @@ export interface IWorkspaceRootStore {
   loader: boolean;
   // observables
   workspaces: Record<string, IWorkspace>;
-  // record of app rail visibility for each workspace
-  appRailVisibilityMap: Record<string, boolean>;
   // computed
   currentWorkspace: IWorkspace | null;
   workspacesCreatedByCurrentUser: IWorkspace[] | null;
@@ -41,8 +39,6 @@ export interface IWorkspaceRootStore {
     data: Partial<IWorkspaceSidebarNavigationItem>
   ) => Promise<IWorkspaceSidebarNavigationItem | undefined>;
   getNavigationPreferences: (workspaceSlug: string) => IWorkspaceSidebarNavigation | undefined;
-  getAppRailVisibility: (workspaceSlug: string) => boolean;
-  toggleAppRailVisibility: (workspaceSlug: string) => void;
   // sub-stores
   webhook: IWebhookStore;
   apiToken: IApiTokenStore;
@@ -53,7 +49,6 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
   loader: boolean = false;
   // observables
   workspaces: Record<string, IWorkspace> = {};
-  appRailVisibilityMap: Record<string, boolean> = {};
   navigationPreferencesMap: Record<string, IWorkspaceSidebarNavigation> = {};
   // services
   workspaceService;
@@ -85,8 +80,6 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
       deleteWorkspace: action,
       fetchSidebarNavigationPreferences: action,
       updateSidebarPreference: action,
-      getAppRailVisibility: action,
-      toggleAppRailVisibility: action,
     });
 
     // services
@@ -119,12 +112,6 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
     return redirectionRoute;
   };
 
-  getAppRailVisibility = (workspaceSlug: string) => this.appRailVisibilityMap[workspaceSlug] || false;
-
-  toggleAppRailVisibility = (workspaceSlug: string) => {
-    this.appRailVisibilityMap[workspaceSlug] = !this.appRailVisibilityMap[workspaceSlug];
-  };
-
   /**
    * computed value of current workspace based on workspace slug saved in the query store
    */