{"size": 1909, "ext": "js", "max_stars_repo_path": "packages/chakra-ui-docs/components/SideNav.js", "max_stars_repo_name": "export-mike/chakra-ui", "max_stars_repo_stars_event_min_datetime": "2020-03-30T20:56:44.000Z", "max_stars_repo_stars_event_max_datetime": "2021-12-26T20:46:10.000Z", "max_issues_repo_path": "packages/chakra-ui-docs/components/SideNav.js", "max_issues_repo_name": "export-mike/chakra-ui", "max_issues_repo_issues_event_min_datetime": "2020-02-27T16:18:45.000Z", "max_issues_repo_issues_event_max_datetime": "2021-08-02T07:52:04.000Z", "max_forks_repo_path": "packages/chakra-ui-docs/components/SideNav.js", "max_forks_repo_name": "export-mike/chakra-ui", "max_forks_repo_forks_event_min_datetime": "2020-10-06T14:23:28.000Z", "max_forks_repo_forks_event_max_datetime": "2021-12-22T11:56:39.000Z"}
{"max_stars_count": 11, "max_issues_count": 54, "max_forks_count": 5, "avg_line_length": 19.6804123711, "max_line_length": 68, "alphanum_fraction": 0.553693033}
import { Box, Heading } from "@chakra-ui/core";
import React from "react";
import components from "./components";
import { ComponentLink, stringToUrl, TopNavLink } from "./NavLink";

const topNavLinks = [
  "Getting Started",
  "Principles",
  "Style Props",
  "Color Mode",
  "Responsive Styles",
  "Theme",
  "Recipes",
];

const utilsNavLinks = ["useClipboard", "useDisclosure", "useTheme"];

const NavGroupHeading = props => (
  <Heading
    fontSize="xs"
    color="gray.400"
    letterSpacing="wide"
    mb={2}
    textTransform="uppercase"
    {...props}
  />
);

export const SideNavContent = ({
  contentHeight = "calc(100vh - 4rem)",
  ...props
}) => (
  <Box
    top="4rem"
    position="relative"
    overflowY="auto"
    borderRightWidth="1px"
    {...props}
  >
    <Box
      as="nav"
      height={contentHeight}
      aria-label="Main navigation"
      fontSize="sm"
      p="6"
    >
      <Box mb="8">
        {topNavLinks.map(link => (
          <TopNavLink key={link} href={stringToUrl(link)}>
            {link}
          </TopNavLink>
        ))}
      </Box>

      <Box mb="10">
        <NavGroupHeading>Components</NavGroupHeading>
        {components.map(link => (
          <ComponentLink key={link} href={stringToUrl(link)}>
            {link}
          </ComponentLink>
        ))}
      </Box>

      <Box mb="10">
        <NavGroupHeading>Utilities</NavGroupHeading>
        {utilsNavLinks.map(link => (
          <ComponentLink key={link} href={stringToUrl(link)}>
            {link}
          </ComponentLink>
        ))}
      </Box>
    </Box>
  </Box>
);

const SideNavContainer = props => (
  <Box
    position="fixed"
    left="0"
    width="100%"
    height="100%"
    top="0"
    right="0"
    {...props}
  />
);

const SideNav = props => {
  return (
    <SideNavContainer {...props}>
      <SideNavContent />
    </SideNavContainer>
  );
};

export default SideNav;
