tbg-ecomm-nextjs/.next/cache/next-babel-loader/1a196421238df838888cd0c0fa7f330c.json

{"ast":null,"code":"var __jsx = React.createElement;\nimport React from \"react\";\nimport Link from \"next/link\"; // nodejs library that concatenates classes\n\nimport classNames from \"classnames\"; // nodejs library to set properties for components\n\n// @material-ui/core components\nimport { makeStyles } from \"@material-ui/core/styles\";\nimport AppBar from \"@material-ui/core/AppBar\";\nimport Toolbar from \"@material-ui/core/Toolbar\";\nimport IconButton from \"@material-ui/core/IconButton\";\nimport Button from \"@material-ui/core/Button\";\nimport Hidden from \"@material-ui/core/Hidden\";\nimport Drawer from \"@material-ui/core/Drawer\"; // @material-ui/icons\n\nimport Menu from \"@material-ui/icons/Menu\"; // core components\n\nimport styles from \"assets/jss/nextjs-material-kit/components/headerStyle.js\";\nconst useStyles = makeStyles(styles);\nexport default function Header(props) {\n  const classes = useStyles();\n  const [mobileOpen, setMobileOpen] = React.useState(false);\n  React.useEffect(() => {\n    if (props.changeColorOnScroll) {\n      window.addEventListener(\"scroll\", headerColorChange);\n    }\n\n    return function cleanup() {\n      if (props.changeColorOnScroll) {\n        window.removeEventListener(\"scroll\", headerColorChange);\n      }\n    };\n  });\n\n  const handleDrawerToggle = () => {\n    setMobileOpen(!mobileOpen);\n  };\n\n  const headerColorChange = () => {\n    const {\n      color,\n      changeColorOnScroll\n    } = props;\n    const windowsScrollTop = window.pageYOffset;\n\n    if (windowsScrollTop > changeColorOnScroll.height) {\n      document.body.getElementsByTagName(\"header\")[0].classList.remove(classes[color]);\n      document.body.getElementsByTagName(\"header\")[0].classList.add(classes[changeColorOnScroll.color]);\n    } else {\n      document.body.getElementsByTagName(\"header\")[0].classList.add(classes[color]);\n      document.body.getElementsByTagName(\"header\")[0].classList.remove(classes[changeColorOnScroll.color]);\n    }\n  };\n\n  const {\n    color,\n    rightLinks,\n    leftLinks,\n    brand,\n    fixed,\n    absolute\n  } = props;\n  const appBarClasses = classNames({\n    [classes.appBar]: true,\n    [classes[color]]: color,\n    [classes.absolute]: absolute,\n    [classes.fixed]: fixed\n  });\n\n  const brandComponent = __jsx(Link, {\n    href: \"/components\",\n    as: \"/components\"\n  }, __jsx(Button, {\n    className: classes.title\n  }, brand));\n\n  return __jsx(AppBar, {\n    className: appBarClasses\n  }, __jsx(Toolbar, {\n    className: classes.container\n  }, leftLinks !== undefined ? brandComponent : null, __jsx(\"div\", {\n    className: classes.flex\n  }, leftLinks !== undefined ? __jsx(Hidden, {\n    smDown: true,\n    implementation: \"css\"\n  }, leftLinks) : brandComponent), __jsx(Hidden, {\n    smDown: true,\n    implementation: \"css\"\n  }, rightLinks), __jsx(Hidden, {\n    mdUp: true\n  }, __jsx(IconButton, {\n    color: \"inherit\",\n    \"aria-label\": \"open drawer\",\n    onClick: handleDrawerToggle\n  }, __jsx(Menu, null)))), __jsx(Hidden, {\n    mdUp: true,\n    implementation: \"js\"\n  }, __jsx(Drawer, {\n    variant: \"temporary\",\n    anchor: \"right\",\n    open: mobileOpen,\n    classes: {\n      paper: classes.drawerPaper\n    },\n    onClose: handleDrawerToggle\n  }, __jsx(\"div\", {\n    className: classes.appResponsive\n  }, leftLinks, rightLinks))));\n}\nHeader.defaultProp = {\n  color: \"black\"\n};","map":null,"metadata":{},"sourceType":"module"}