text: import React from "react";
  import { Link } from "react-router-dom";
  import { Box, Flex, Text, Button } from "@chakra-ui/react";
  import { CloseIcon, HamburgerIcon } from "@chakra-ui/icons";
  import Logo from "../ui/Logo";
  import SpecialButton from "../ui/SpecialButton";
  
  import { Auth } from "@aws-amplify/auth";
  
  const MenuItems = (props) => {
    const { children, isLast, to = "/", ...rest } = props;
    return (
      <Text
        mb={{ base: isLast ? 0 : 8, sm: 0 }}
        mr={{ base: 0, sm: isLast ? 0 : 4 }}
        display="block"
        {...rest}
      >
        <Link to={to}>{children}</Link>
      </Text>
    );
  };
  
  const DashboardHeader = (props) => {
    const [show, setShow] = React.useState(false);
    const toggleMenu = () => setShow(!show);
  
    const signOut = () => {
      Auth.signOut()
        .then((data) => console.log(data))
        .catch((err) => console.log(err));
    };
  
    return (
      <Flex
        as="nav"
        align="center"
        justify="space-between"
        wrap="wrap"
        w="100%"
        mb={8}
        p={8}
        {...props}
      >
        <Flex align="center">
          <Logo />
        </Flex>
  
        <Box display={{ base: "block", md: "none" }} onClick={toggleMenu}>
          {show ? <CloseIcon /> : <HamburgerIcon />}
        </Box>
  
        <Box
          display={{ base: show ? "block" : "none", md: "block" }}
          flexBasis={{ base: "100%", md: "auto" }}
        >
          <Flex
            align={["center", "center", "center", "center"]}
            justify={["center", "space-between", "flex-end", "flex-end"]}
            direction={["column", "row", "row", "row"]}
            pt={[4, 4, 0, 0]}
          >
            <MenuItems to="/">
              <SpecialButton message="Home" width={100} />
            </MenuItems>
            <MenuItems isLast>
              <SpecialButton message="Sign Out" width={100} />
            </MenuItems>
          </Flex>
        </Box>
      </Flex>
    );
  };
  
  export default DashboardHeader;
  