All files / src/components/layouts/Global Nav.tsx

64.7% Statements 11/17
30% Branches 6/20
60% Functions 3/5
64.7% Lines 11/17

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103                              1x 1x 1x 1x     3x                                                       1x 3x 3x 3x   3x                                                                               3x                
import { useContext, useState, Fragment } from "react";
import { generatePath, Link } from "react-router-dom";
import { KeyboardArrowDown, KeyboardArrowUp } from "@rimble/icons";
import { Flex, Text } from "rimble-ui";
import { SertoUiContext, SertoUiContextInterface } from "../../../context/SertoUiContext";
import { baseColors, colors } from "../../../themes";
import { NavItemPrimary, NavItemStyled, NavItemTabsStyled, SubNavItemStyled } from "./NavComponents";
 
export interface NavProps {
  currentUrl: string;
  hasPermissions?: boolean;
  navItems?: NavItemProps[];
  currentSection?: string;
}
 
export const Nav: React.FunctionComponent<NavProps> = (props) => {
  const context = useContext<SertoUiContextInterface>(SertoUiContext);
  const navItems = props.navItems || context.navItems;
  return (
    <>
      {navItems?.map((navItemProps) => (
        <NavItem
          {...navItemProps}
          currentUrl={props.currentUrl}
          hasPermissions={props.hasPermissions}
          key={navItemProps.url}
          currentSection={props.currentSection}
        />
      ))}
    </>
  );
};
 
// props from SertoUiWrapper navItem
export interface NavItemProps {
  icon: React.FunctionComponent<any>;
  section?: string;
  subNav?: any[];
  text: string;
  url: string;
}
 
// props from Global Layout
export interface NavItemGlobalProps {
  currentSection?: string;
  currentUrl: string;
  hasPermissions?: boolean;
}
 
const NavItem: React.FunctionComponent<NavItemProps & NavItemGlobalProps> = (props) => {
  const { currentSection, currentUrl, hasPermissions, icon, section, subNav, text, url } = props;
  const sectionActive = section ? section === currentSection : url === currentUrl;
  const [isOpen, setIsOpen] = useState<boolean>(sectionActive);
 
  Iif (subNav) {
    return (
      <NavItemTabsStyled
        active={sectionActive}
        open={isOpen}
        bg={sectionActive || isOpen ? baseColors.white : "none"}
        borderRadius={1}
        mb={1}
        p={1}
      >
        <Flex
          alignItems="center"
          justifyContent="space-between"
          onClick={() => setIsOpen(!isOpen)}
          p="8px"
          width="100%"
        >
          <NavItemPrimary active={sectionActive} icon={icon} text={text} />
          {isOpen ? <KeyboardArrowUp color={colors.moonGray} /> : <KeyboardArrowDown color={colors.moonGray} />}
        </Flex>
        {isOpen &&
          subNav?.map((tab: any, i: number) => {
            const subNavActive = currentUrl === tab.url;
            if (tab.admin && !hasPermissions) {
              return <Fragment key={i}></Fragment>;
            }
            return (
              <SubNavItemStyled active={subNavActive} key={i}>
                <Link to={generatePath(tab.url)}>
                  <Text.span color={baseColors.black} fontSize={1} fontWeight={3} px={2}>
                    {tab.text}
                  </Text.span>
                </Link>
              </SubNavItemStyled>
            );
          })}
      </NavItemTabsStyled>
    );
  }
 
  return (
    <NavItemStyled className={sectionActive ? "active" : ""} active={sectionActive} mb={1}>
      <Link to={generatePath(url)}>
        <NavItemPrimary active={sectionActive} icon={icon} text={text} />
      </Link>
    </NavItemStyled>
  );
};