All files / src/components/Navbar/NavbarLinksGroup NavbarLinksGroup.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client';
 
import { Box, Collapse, Group, rem, Text, UnstyledButton } from '@mantine/core';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useState } from 'react';
import { FiChevronRight } from 'react-icons/fi';
import classes from './NavbarLinksGroup.module.css';
import type { NavbarLinksGroupProps } from './types';
 
const NavbarLinksGroup = ({
  icon: Icon,
  label,
  initiallyOpened,
  link,
  links,
}: NavbarLinksGroupProps) => {
  const pathname = usePathname();
  const hasLinks = Array.isArray(links);
  const isChildActive = hasLinks && links.some((l) => pathname === l.link);
  const [expanded, setExpanded] = useState(
    initiallyOpened || isChildActive || false,
  );
  const ChevronIcon = FiChevronRight;
 
  const items = (hasLinks ? links : []).map((link) => (
    <Text
      component={Link}
      className={classes.link}
      href={link.link}
      key={link.label}
      data-active={pathname === link.link || undefined}
    >
      {link.label}
    </Text>
  ));
 
  const content = (
    <Group justify="space-between" gap={0} wrap="nowrap">
      <Box style={{ display: 'flex', alignItems: 'center', flex: 1 }}>
        {Icon && <Icon style={{ width: rem(20), height: rem(20) }} />}
        <Box ml={Icon ? 'md' : 0} style={{ flex: 1 }}>
          {label}
        </Box>
      </Box>
      {hasLinks && (
        <ChevronIcon
          className={classes.chevron}
          style={{
            width: rem(16),
            height: rem(16),
            transform: expanded ? 'rotate(90deg)' : 'none',
          }}
        />
      )}
    </Group>
  );
 
  if (!hasLinks && link) {
    return (
      <UnstyledButton
        component={Link}
        href={link}
        className={classes.control}
        data-active={pathname === link || undefined}
      >
        {content}
      </UnstyledButton>
    );
  }
 
  return (
    <>
      <UnstyledButton
        onClick={() => setExpanded((o) => !o)}
        className={classes.control}
        data-active-child={isChildActive || undefined}
      >
        {content}
      </UnstyledButton>
      {hasLinks ? <Collapse expanded={expanded}>{items}</Collapse> : null}
    </>
  );
};
 
export default NavbarLinksGroup;