main

src/components/layout/header/mobile-header-link.tsx

@@ -0,0 +1,84 @@
+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;