EmployeeWebClient - optimize root routing

bartstc · Nov 2, 2022 · b90182c · b90182c
1 parent f4e7bbe
commit b90182c
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 22 deletions.
diff --git a/employee-web-client/src/shared/Layout/DesktopDrawer.tsx b/employee-web-client/src/shared/Layout/DesktopDrawer.tsx
@@ -42,19 +42,23 @@ const DesktopDrawer = ({ toggle, extended }: IProps) => {
  />
  <VStack justify='space-between' width='100%' height='100%' pb={10} pt={20}>
  <VStack spacing={4} as='ul' px='20px' align='flex-start' width='100%' overflow='hidden'>
- {links.map(({ label, to, path, signature }) => (
- <HStack w='100%' key={to} as='li'>
- {extended ? (
- <NavButton onClick={() => navigate(`/${to}`)} path={path} isActive={pathname.includes(signature)}>
- <Text pl={2} fontWeight='400' lineHeight='100%'>
- {label}
- </Text>
- </NavButton>
- ) : (
- <NavIconButton onClick={() => navigate(`/${to}`)} title={label} path={path} isActive={pathname.includes(signature)} />
- )}
- </HStack>
- ))}
+ {links.map(({ label, to, path, signature }) => {
+ const isActive = pathname.includes(signature);
+
+ return (
+ <HStack w='100%' key={to} as='li'>
+ {extended ? (
+ <NavButton onClick={isActive ? undefined : () => navigate(`/${to}`)} path={path} isActive={isActive}>
+ <Text pl={2} fontWeight='400' lineHeight='100%'>
+ {label}
+ </Text>
+ </NavButton>
+ ) : (
+ <NavIconButton onClick={isActive ? undefined : () => navigate(`/${to}`)} title={label} path={path} isActive={isActive} />
+ )}
+ </HStack>
+ );
+ })}
  </VStack>
  <VStack px='20px' align='flex-start' w='100%'>
  <VStack align='flex-start' w='100%'>

diff --git a/employee-web-client/src/shared/Layout/MobileDrawer.tsx b/employee-web-client/src/shared/Layout/MobileDrawer.tsx
@@ -34,15 +34,19 @@ const MobileDrawer = ({ toggle, extended }: IProps) => {
  <DrawerCloseButton />
  <DrawerBody as={VStack} justify='space-between' width='100%' height='100%' pb={4} pt={16}>
  <VStack as='ul' spacing={2} align='flex-start' width='100%'>
- {links.map(({ label, to, path, signature }) => (
- <HStack w='100%' key={to} as='li'>
- <NavButton onClick={() => navigate(`/${to}`)} path={path} isActive={pathname.includes(signature)}>
- <Text pl={2} fontWeight='700' fontSize='md'>
- {label}
- </Text>
- </NavButton>
- </HStack>
- ))}
+ {links.map(({ label, to, path, signature }) => {
+ const isActive = pathname.includes(signature);
+
+ return (
+ <HStack w='100%' key={to} as='li'>
+ <NavButton onClick={isActive ? undefined : () => navigate(`/${to}`)} path={path} isActive={isActive}>
+ <Text pl={2} fontWeight='700' fontSize='md'>
+ {label}
+ </Text>
+ </NavButton>
+ </HStack>
+ );
+ })}
  </VStack>
  <VStack align='flex-start' width='100%'>
  <VStack align='flex-start' w='100%'>