From 8fa08b250612ad3ba70fa11ef2757ba503b2dfae Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 13 Feb 2026 17:43:07 +0530
Subject: [PATCH] [GIT-57 | WEB-5912] fix: app sidebar ux and responsiveness
 (#8560)

* fix: project extended sidebar accordion ux

* fix: app sidebar mobile responsiveness ux

* chore: code refactor
---
 .../components/workspace/sidebar/project-navigation.tsx     | 6 +++++-
 .../components/workspace/sidebar/projects-list-item.tsx     | 6 +++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/apps/web/core/components/workspace/sidebar/project-navigation.tsx b/apps/web/core/components/workspace/sidebar/project-navigation.tsx
index 8f50d3951..95914de56 100644
--- a/apps/web/core/components/workspace/sidebar/project-navigation.tsx
+++ b/apps/web/core/components/workspace/sidebar/project-navigation.tsx
@@ -43,7 +43,7 @@ export const ProjectNavigation = observer(function ProjectNavigation(props: TPro
   const { workItem: workItemIdentifierFromRoute } = useParams();
   // store hooks
   const { t } = useTranslation();
-  const { toggleSidebar } = useAppTheme();
+  const { isExtendedProjectSidebarOpened, toggleExtendedProjectSidebar, toggleSidebar } = useAppTheme();
   const { getPartialProjectById } = useProject();
   const { allowPermissions } = useUserPermissions();
   const {
@@ -62,6 +62,10 @@ export const ProjectNavigation = observer(function ProjectNavigation(props: TPro
     if (window.innerWidth < 768) {
       toggleSidebar();
     }
+    // close the extended sidebar if it is open
+    if (isExtendedProjectSidebarOpened) {
+      toggleExtendedProjectSidebar(false);
+    }
   };
 
   const baseNavigation = useCallback(
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 e633cca8c..9f95ccb90 100644
--- a/apps/web/core/components/workspace/sidebar/projects-list-item.tsx
+++ b/apps/web/core/components/workspace/sidebar/projects-list-item.tsx
@@ -260,6 +260,8 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
 
   if (!project) return null;
 
+  const isAccordionMode = projectPreferences.navigationMode === "ACCORDION";
+
   const handleItemClick = () => {
     if (projectPreferences.navigationMode === "ACCORDION") {
       setIsProjectListOpen(!isProjectListOpen);
@@ -267,13 +269,11 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
       router.push(defaultTabUrl);
     }
     // close the extended sidebar if it is open
-    if (isExtendedProjectSidebarOpened) {
+    if (isExtendedProjectSidebarOpened && !isAccordionMode) {
       toggleExtendedProjectSidebar(false);
     }
   };
 
-  const isAccordionMode = projectPreferences.navigationMode === "ACCORDION";
-
   const shouldHighlightProject = URLProjectId === project?.id && projectPreferences.navigationMode !== "ACCORDION";
 
   return (