Skip to content

F
frontend
Commit 7a2d5858 authored by isstuev's avatar isstuev
Browse files
Options

fix menu again

parent 3b8c6a27
Hide whitespace changes
Inline Side-by-side
Showing with 50 additions and 44 deletions
ui/snippets/navigation/NavigationMobile.tsx
View file @ 7a2d5858
...@@ -38,12 +38,19 @@ const NavigationMobile = () => { ...@@ -38,12 +38,19 @@ const NavigationMobile = () => {
const openedItem = mainNavItems[openedGroupIndex]; const openedItem = mainNavItems[openedGroupIndex];
return ( return (
<> <Flex position="relative" flexDirection="column" flexGrow={ 1 }>
<Box position="relative"> <Box
display="flex"
flexDirection="column"
flexGrow={ 1 }
as={ motion.div }
style={{ x: mainX }}
maxHeight={ openedGroupIndex > -1 ? '100vh' : 'unset' }
overflowY={ openedGroupIndex > -1 ? 'hidden' : 'unset' }
>
<Box <Box
as={ motion.nav } as="nav"
mt={ 6 } mt={ 6 }
style={{ x: mainX }}
> >
<VStack <VStack
w="100%" w="100%"
...@@ -62,60 +69,59 @@ const NavigationMobile = () => { ...@@ -62,60 +69,59 @@ const NavigationMobile = () => {
</Box> </Box>
{ isAuth && ( { isAuth && (
<Box <Box
as={ motion.nav } as="nav"
mt={ 6 } mt={ 6 }
pt={ 6 } pt={ 6 }
borderTopWidth="1px" borderTopWidth="1px"
borderColor="divider" borderColor="divider"
style={{ x: mainX }}
> >
<VStack as="ul" spacing="1" alignItems="flex-start"> <VStack as="ul" spacing="1" alignItems="flex-start">
{ accountNavItems.map((item) => <NavLink key={ item.text } item={ item }/>) } { accountNavItems.map((item) => <NavLink key={ item.text } item={ item }/>) }
</VStack> </VStack>
</Box> </Box>
) } ) }
{ openedGroupIndex >= 0 && ( <NavFooter hasAccount={ hasAccount }/>
</Box>
{ openedGroupIndex >= 0 && (
<Box
as={ motion.nav }
w="100%"
mt={ 6 }
position="absolute"
top={ 0 }
style={{ x: subX }}
key="sub"
>
<Flex alignItems="center" px={ 3 } py={ 2.5 } w="100%" h="50px" onClick={ onGroupItemClose } mb={ 1 }>
<Icon as={ chevronIcon } boxSize={ 6 } mr={ 2 } color={ iconColor }/>
<Text variant="secondary" fontSize="sm">{ mainNavItems[openedGroupIndex].text }</Text>
</Flex>
<Box <Box
as={ motion.nav }
w="100%" w="100%"
mt={ 6 } as="ul"
position="absolute"
top={ 0 }
style={{ x: subX }}
key="sub"
> >
<Flex alignItems="center" px={ 3 } py={ 2.5 } w="100%" h="50px" onClick={ onGroupItemClose } mb={ 1 }> { isGroupItem(openedItem) && openedItem.subItems?.map(
<Icon as={ chevronIcon } boxSize={ 6 } mr={ 2 } color={ iconColor }/> (item, index) => Array.isArray(item) ? (
<Text variant="secondary" fontSize="sm">{ mainNavItems[openedGroupIndex].text }</Text> <Box
</Flex> key={ index }
<Box w="100%"
w="100%" as="ul"
as="ul" _notLast={{
> mb: 2,
{ isGroupItem(openedItem) && openedItem.subItems?.map( pb: 2,
(item, index) => Array.isArray(item) ? ( borderBottomWidth: '1px',
<Box borderColor: 'divider',
key={ index } }}
w="100%" >
as="ul" { item.map(subItem => <NavLink key={ subItem.text } item={ subItem }/>) }
_notLast={{ </Box>
mb: 2, ) :
pb: 2, <NavLink key={ item.text } item={ item } mb={ 1 }/>,
borderBottomWidth: '1px', ) }
borderColor: 'divider',
}}
>
{ item.map(subItem => <NavLink key={ subItem.text } item={ subItem }/>) }
</Box>
) :
<NavLink key={ item.text } item={ item } mb={ 1 }/>,
) }
</Box>
</Box> </Box>
) } </Box>
</Box> ) }
<NavFooter hasAccount={ hasAccount }/> </Flex>
</>
); );
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment