[GIT-57 | WEB-5912] fix: app sidebar ux and responsiveness

apps/web/core/components/sidebar/resizable-sidebar.tsx

@@ -186,6 +186,7 @@ export function ResizableSidebar({
         }}
         role="complementary"
         aria-label="Main sidebar"
+        data-prevent-outside-click={isMobile}
       >
         <aside
           className={cn(

apps/web/core/components/workspace/sidebar/project-navigation.tsx

@@ -37,7 +37,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 {
@@ -56,6 +56,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(

apps/web/core/components/workspace/sidebar/projects-list-item.tsx

@@ -254,19 +254,20 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
 
   if (!project) return null;
 
+  const isAccordionMode = projectPreferences.navigationMode === "ACCORDION";
+
   const handleItemClick = () => {
     if (projectPreferences.navigationMode === "ACCORDION") {
       setIsProjectListOpen(!isProjectListOpen);
     } else {
       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";