85 lines
3.0 KiB
TypeScript
85 lines
3.0 KiB
TypeScript
import { Text, Box, Link as ChakraLink, useDisclosure, VStack } from '@chakra-ui/react';
|
|
import { RxChevronDown } from 'react-icons/rx';
|
|
import { NavItem } from '@/config/navigation';
|
|
import { useActiveNavItem } from '@/hooks/useActiveNavItem';
|
|
import { Link } from '@/i18n/navigation';
|
|
import { useTranslations } from 'next-intl';
|
|
|
|
function MobileHeaderLink({ item }: { item: NavItem }) {
|
|
const t = useTranslations();
|
|
const { isActive, isChildActive } = useActiveNavItem(item);
|
|
const { open, onToggle } = useDisclosure();
|
|
|
|
return (
|
|
<Box key={item.label} w='full'>
|
|
{item.children ? (
|
|
<VStack align='start' w='full' spaceY={0}>
|
|
<Text
|
|
onClick={onToggle}
|
|
display='inline-flex'
|
|
alignItems='center'
|
|
gap='1'
|
|
cursor='pointer'
|
|
color={isActive ? { base: 'primary.500', _dark: 'primary.300' } : 'fg.muted'}
|
|
textUnderlineOffset='4px'
|
|
textUnderlinePosition='from-font'
|
|
textDecoration={isActive ? 'underline' : 'none'}
|
|
fontWeight='semibold'
|
|
fontSize={{ base: 'md', md: 'lg' }}
|
|
_hover={{
|
|
color: { base: 'primary.500', _dark: 'primary.300' },
|
|
transition: 'all 0.2s ease-in-out',
|
|
}}
|
|
>
|
|
{t(item.label)}
|
|
<RxChevronDown
|
|
style={{ transform: open ? 'rotate(-180deg)' : 'rotate(0deg)', transition: 'transform 0.2s' }}
|
|
/>
|
|
</Text>
|
|
{open && item.children && (
|
|
<VStack align='start' pl='4' pt='1' pb='2' w='full' spaceY={1}>
|
|
{item.children.map((child, index) => {
|
|
const isActiveChild = isChildActive(child.href);
|
|
|
|
return (
|
|
<ChakraLink
|
|
key={index}
|
|
as={Link}
|
|
href={child.href}
|
|
focusRing='none'
|
|
color={isActiveChild ? { base: 'primary.500', _dark: 'primary.300' } : 'fg.muted'}
|
|
textUnderlineOffset='4px'
|
|
textUnderlinePosition='from-font'
|
|
textDecoration={isActiveChild ? 'underline' : 'none'}
|
|
fontWeight='semibold'
|
|
fontSize={{ base: 'md', md: 'lg' }}
|
|
>
|
|
{t(child.label)}
|
|
</ChakraLink>
|
|
);
|
|
})}
|
|
</VStack>
|
|
)}
|
|
</VStack>
|
|
) : (
|
|
<ChakraLink
|
|
as={Link}
|
|
href={item.href}
|
|
w='full'
|
|
focusRing='none'
|
|
color={isActive ? { base: 'primary.500', _dark: 'primary.300' } : 'fg.muted'}
|
|
textUnderlineOffset='4px'
|
|
textUnderlinePosition='from-font'
|
|
textDecoration={isActive ? 'underline' : 'none'}
|
|
fontWeight='semibold'
|
|
fontSize={{ base: 'md', md: 'lg' }}
|
|
>
|
|
{t(item.label)}
|
|
</ChakraLink>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export default MobileHeaderLink;
|