[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:
parent
efc600ad8c
commit
8fa08b2506
2 changed files with 8 additions and 4 deletions
|
|
@ -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(
|
||||||
|
|
|
||||||
|
|
@ -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 (
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue