[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
This commit is contained in:
Anmol Singh Bhatia 2026-02-13 17:43:07 +05:30 committed by GitHub
parent efc600ad8c
commit 8fa08b2506
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 8 additions and 4 deletions

View file

@ -43,7 +43,7 @@ export const ProjectNavigation = observer(function ProjectNavigation(props: TPro
const { workItem: workItemIdentifierFromRoute } = useParams(); const { workItem: workItemIdentifierFromRoute } = useParams();
// store hooks // store hooks
const { t } = useTranslation(); const { t } = useTranslation();
const { toggleSidebar } = useAppTheme(); const { isExtendedProjectSidebarOpened, toggleExtendedProjectSidebar, toggleSidebar } = useAppTheme();
const { getPartialProjectById } = useProject(); const { getPartialProjectById } = useProject();
const { allowPermissions } = useUserPermissions(); const { allowPermissions } = useUserPermissions();
const { const {
@ -62,6 +62,10 @@ export const ProjectNavigation = observer(function ProjectNavigation(props: TPro
if (window.innerWidth < 768) { if (window.innerWidth < 768) {
toggleSidebar(); toggleSidebar();
} }
// close the extended sidebar if it is open
if (isExtendedProjectSidebarOpened) {
toggleExtendedProjectSidebar(false);
}
}; };
const baseNavigation = useCallback( const baseNavigation = useCallback(

View file

@ -260,6 +260,8 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
if (!project) return null; if (!project) return null;
const isAccordionMode = projectPreferences.navigationMode === "ACCORDION";
const handleItemClick = () => { const handleItemClick = () => {
if (projectPreferences.navigationMode === "ACCORDION") { if (projectPreferences.navigationMode === "ACCORDION") {
setIsProjectListOpen(!isProjectListOpen); setIsProjectListOpen(!isProjectListOpen);
@ -267,13 +269,11 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
router.push(defaultTabUrl); router.push(defaultTabUrl);
} }
// close the extended sidebar if it is open // close the extended sidebar if it is open
if (isExtendedProjectSidebarOpened) { if (isExtendedProjectSidebarOpened && !isAccordionMode) {
toggleExtendedProjectSidebar(false); toggleExtendedProjectSidebar(false);
} }
}; };
const isAccordionMode = projectPreferences.navigationMode === "ACCORDION";
const shouldHighlightProject = URLProjectId === project?.id && projectPreferences.navigationMode !== "ACCORDION"; const shouldHighlightProject = URLProjectId === project?.id && projectPreferences.navigationMode !== "ACCORDION";
return ( return (