SideBar Chakra component

ActiveLink.tsx

import { Link as ChakraLink } from '@chakra-ui/react';
import React, { cloneElement, ReactElement } from 'react';
import { useLocation } from 'react-router';
import { Link, LinkProps } from 'react-router-dom';

interface IActiveLinkProps extends LinkProps {
  children: ReactElement;
  shouldMatchExactHref?: boolean;
}

export const ActiveLink: React.FC<IActiveLinkProps> = ({
  children,
  shouldMatchExactHref = false,
  to,
  ...rest
}) => {
  const { pathname } = useLocation();

  let isActive = false;

  if (shouldMatchExactHref && pathname === to) {
    isActive = true;
  }

  if (!shouldMatchExactHref && pathname.startsWith(String(to))) {
    isActive = true;
  }

  return (
    <ChakraLink as={Link} to={to} display="flex" alignItems="center" {...rest}>
      {cloneElement(children, {
        color: isActive ? 'blue.500' : 'gray.700',
      })}
    </ChakraLink>
  );
};

index.tsx

import {
  Box,
  Drawer,
  DrawerBody,
  DrawerCloseButton,
  DrawerContent,
  DrawerHeader,
  DrawerOverlay,
  useBreakpointValue,
} from '@chakra-ui/react';
import { useSidebarDrawer } from '../../hooks/sidebarDrawer';
import { SidebarNav } from './SidebarNav';

export const Sidebar = (): JSX.Element => {
  const { isOpen, onClose } = useSidebarDrawer();

  const isDrawerSidebar = useBreakpointValue({
    base: true,
    lg: false,
  });

  if (isDrawerSidebar) {
    return (
      <Drawer isOpen={isOpen} placement="left" onClose={onClose}>
        <DrawerOverlay>
          <DrawerContent>
            <DrawerCloseButton mt="6" />
            <DrawerHeader>Navegação</DrawerHeader>

            <DrawerBody>
              <SidebarNav />
            </DrawerBody>
          </DrawerContent>
        </DrawerOverlay>
      </Drawer>
    );
  }

  return (
    <Box as="aside" p="8" bg="white">
      <SidebarNav />
    </Box>
  );
};

NavLink.tsx

import {
  Icon,
  Link as ChakraLink,
  LinkProps as ChakraLinkProps,
  Text,
} from '@chakra-ui/react';
import { ElementType } from 'react';
import { ActiveLink } from './ActiveLink';

interface INavLinkProps extends ChakraLinkProps {
  icon: ElementType;
  children: string;
  shouldMatchExactHref?: boolean;
  to: string;
}

export const NavLink: React.FC<INavLinkProps> = ({
  icon,
  children,
  shouldMatchExactHref,
  to,
  ...rest
}) => (
  <ActiveLink to={to} shouldMatchExactHref={shouldMatchExactHref}>
    <ChakraLink display="flex" alignItems="center" {...rest}>
      <Icon as={icon} fontSize="20" />
      <Text ml="4" fontWeight="medium">
        {children}
      </Text>
    </ChakraLink>
  </ActiveLink>
);

NavSection.tsx

import { Box, Stack, Text } from '@chakra-ui/react';
import { ReactNode } from 'react';

interface INavSectionProps {
  title: string;
  children: ReactNode;
}

export const NavSection: React.FC<INavSectionProps> = ({ title, children }) => (
  <Box>
    <Text fontWeight="bold" color="gray.500" fontSize="sm">
      {title}
    </Text>
    <Stack spacing="4" mt="8" align="stretch">
      {children}
    </Stack>
  </Box>
);

SidebarNav.tsx

import { Stack } from '@chakra-ui/react';
import {
  RiBuilding2Line,
  RiBuilding4Line,
  RiClipboardLine,
  RiContactsLine,
  RiDashboardLine,
  RiFilmLine,
  RiHomeWifiLine,
  RiSuitcaseLine,
  RiTeamLine,
} from 'react-icons/ri';
import { NavLink } from './NavLink';
import { NavSection } from './NavSection';

export const SidebarNav = (): JSX.Element => (
  <Stack spacing="12" align="flex-start" minWidth="170px">
    <NavSection title="GERAL">
      <NavLink icon={RiDashboardLine} to="/dashboard">
        Dashboard
      </NavLink>
    </NavSection>

    <NavSection title="PROPRIEDADES">
      <NavLink icon={RiBuilding2Line} to="/ventures">
        Empreendimentos
      </NavLink>
      <NavLink icon={RiHomeWifiLine} to="/leads">
        Leads
      </NavLink>
      <NavLink icon={RiClipboardLine} to="/appointments">
        Atendimentos
      </NavLink>
      <NavLink icon={RiBuilding4Line} to="/properties">
        Imóveis
      </NavLink>
    </NavSection>

    <NavSection title="ADMINISTRATIVO">
      <NavLink icon={RiSuitcaseLine} to="/property-owners">
        Proprietários
      </NavLink>
      <NavLink icon={RiContactsLine} to="/brokers">
        Corretores
      </NavLink>
      <NavLink icon={RiTeamLine} to="/teams">
        Times
      </NavLink>
      <NavLink icon={RiFilmLine} to="/medias">
        Tipos de mídia
      </NavLink>
    </NavSection>
  </Stack>
);