{"size": 2337, "ext": "js", "max_stars_repo_path": "src/templates/Nav/HeaderBar.js", "max_stars_repo_name": "pingidentity/astro", "max_stars_repo_stars_event_min_datetime": "2022-01-22T03:09:32.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-25T06:47:12.000Z", "max_issues_repo_path": "src/templates/Nav/HeaderBar.js", "max_issues_repo_name": "pingidentity/astro", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/templates/Nav/HeaderBar.js", "max_forks_repo_name": "pingidentity/astro", "max_forks_repo_forks_event_min_datetime": "2022-01-23T05:11:41.000Z", "max_forks_repo_forks_event_max_datetime": "2022-01-23T23:01:47.000Z"}
{"max_stars_count": 7, "max_issues_count": null, "max_forks_count": 3, "avg_line_length": 27.4941176471, "max_line_length": 125, "alphanum_fraction": 0.5798031665}
import React, { useState } from 'react';
import HelpCircleOutlineIcon from 'mdi-react/HelpCircleOutlineIcon';
import MenuDownIcon from 'mdi-react/MenuDownIcon';
import ExploreIcon from 'mdi-react/CompassOutlineIcon';
import { WithSections as EnvironmentBreadcrumb } from '../../components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories';
import {
  Box,
  Icon,
  IconButton,
  Item,
  Menu,
  OverlayProvider,
  PopoverMenu,
  Text,
} from '../../index';
import { PersonIcon } from './NavData';

const CustomPopoverMenu = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <OverlayProvider>
      <PopoverMenu onOpenChange={setIsOpen}>
        <IconButton aria-label="default icon button">
          <Icon
            icon={MenuDownIcon}
            size={15}
            color="neutral.30"
            sx={isOpen ? { transform: 'rotate(180deg)' } : null}
          />
        </IconButton>
        <Menu>
          <Item key="option1">First Option</Item>
          <Item key="option2">Second Option</Item>
          <Item key="option3">Third Option</Item>
        </Menu>
      </PopoverMenu>
    </OverlayProvider>
  );
};

const HeaderBar = () => {
  const Rectangle = () => (
    <Box width="1px" height={30} bg="neutral.80" mx={25} />
  );

  return (
    <Box
      ml={230}
      px={15}
      bg="white"
      height="40px"
      isRow
      alignItems="center"
      justifyContent="space-between"
    >
      <EnvironmentBreadcrumb />
      <Box isRow>
        <Box isRow alignItems="center">
          <Icon icon={HelpCircleOutlineIcon} size={20} color="neutral.30" />
          <CustomPopoverMenu />
        </Box>
        <Rectangle />
        <Box isRow color="neutral.30" alignItems="center">
          <Icon icon={ExploreIcon} size={20} />
          <Text color="neutral.30" fontSize="md" fontWeight={1} mx={7} variant="textEllipsis">
            Explore
          </Text>
          <CustomPopoverMenu />
        </Box>
        <Rectangle />
        <Box isRow color="neutral.30" alignItems="center">
          <Icon icon={PersonIcon} size={20} />
          <Text color="neutral.30" fontSize="md" fontWeight={1} mx={7} variant="textEllipsis">
            Alyssa Chambers
          </Text>
          <CustomPopoverMenu />
        </Box>
      </Box>
    </Box>
  );
};

export default HeaderBar;
