{"ast":null,"code":"var __jsx = React.createElement;\nimport { Link, useTranslation } from '~/utils/i18n';\nimport React from 'react';\nimport { border, navbarBackgroundColor, navbarHighlightColor, navbarHoverBackgroundColor, rem, size, textInvertColor, transitionProps } from '~/utils/style';\nimport styled from 'styled-components';\nimport { useRouter } from 'next/router';\nconst navItems = ['scalars', 'samples', 'graphs', 'high-dimensional'];\nconst Nav = styled.nav.withConfig({\n  displayName: \"Navbar__Nav\",\n  componentId: \"y1v757-0\"\n})([\"background-color:\", \";color:\", \";\", \" padding:0 \", \";display:flex;justify-content:flex-start;align-items:center;\"], navbarBackgroundColor, textInvertColor, size('100%'), rem(20));\nconst Logo = styled.a.withConfig({\n  displayName: \"Navbar__Logo\",\n  componentId: \"y1v757-1\"\n})([\"font-size:\", \";font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';font-weight:600;margin-right:\", \";> img{\", \" vertical-align:middle;margin-right:\", \";}> span{vertical-align:middle;}\"], rem(20), rem(40), size(rem(31), rem(98)), rem(8));\nconst NavItem = styled.a.withConfig({\n  displayName: \"Navbar__NavItem\",\n  componentId: \"y1v757-2\"\n})([\"padding:0 \", \";height:100%;display:inline-flex;justify-content:center;align-items:center;background-color:\", \";\", \" &:hover{background-color:\", \";}> span{padding:\", \" 0 \", \";\", \" \", \" text-transform:uppercase;}\"], rem(20), navbarBackgroundColor, transitionProps('background-color'), navbarHoverBackgroundColor, rem(10), rem(7), props => border('bottom', rem(3), 'solid', props.active ? navbarHighlightColor : 'transparent'), transitionProps('border-bottom'));\n\nconst Navbar = () => {\n  const {\n    t\n  } = useTranslation('common');\n  const {\n    pathname\n  } = useRouter();\n  return __jsx(Nav, null, __jsx(Logo, {\n    href: process.env.PUBLIC_PATH || '/'\n  }, __jsx(\"img\", {\n    alt: \"PaddlePaddle\",\n    src: `${process.env.PUBLIC_PATH}/images/logo.svg`\n  }), __jsx(\"span\", null, \"VisualDL\")), navItems.map(name => {\n    const href = `/${name}`;\n    return (// https://nextjs.org/docs/api-reference/next/link#if-the-child-is-a-custom-component-that-wraps-an-a-tag\n      __jsx(Link, {\n        href: href,\n        key: name,\n        passHref: true\n      }, __jsx(NavItem, {\n        active: pathname === href\n      }, __jsx(\"span\", null, t(name))))\n    );\n  }));\n};\n\nexport default Navbar;","map":null,"metadata":{},"sourceType":"module"}