- \n {results.map(r => (\n
\n Powered by \n \n
\n \n )\n}\n","import React, { useState, useMemo, useEffect } from \"react\"\nimport { useStaticQuery, graphql } from \"gatsby\"\nimport { makeStyles } from \"@material-ui/core/styles\"\nimport {\n Toolbar,\n Typography,\n IconButton,\n SwipeableDrawer,\n useScrollTrigger,\n Slide,\n AppBar,\n} from \"@material-ui/core\"\nimport {\n Menu,\n Search,\n Facebook,\n Instagram,\n DirectionsBike,\n LocationOn,\n Info,\n Build,\n} from \"@material-ui/icons\"\nimport Logo from \"./logo\"\nimport SideNav from \"./side-nav\"\nimport SearchBox from \"./search\"\n\nconst useStyles = makeStyles(theme => ({\n toolbar: {\n display: \"block\",\n padding: 0,\n width: \"100vw\",\n },\n toolbarMenu: {\n display: \"flex\",\n flexDirection: \"row\",\n flexWrap: \"nowrap\",\n width: \"100vw\",\n paddingLeft: \"1%\",\n paddingRight: \"1%\",\n justifyContent: \"space-between\",\n [theme.breakpoints.up(\"md\")]: {\n marginLeft: \"-10px\",\n },\n },\n menuButton: {\n textTransform: \"uppercase\",\n fontSize: \"large\",\n margin: 0,\n transition: \"all .1s ease-in-out\",\n filter: \"drop-shadow(0px 0px 1px #000)\",\n \"&:hover\": {\n backgroundColor: \"rgba(255,255,255,.1)\",\n borderRadius: \"2px\",\n },\n \"& > span\": { overflow: \"visible !important\" },\n },\n toolbarSecondary: {\n display: \"flex\",\n flexDirection: \"row\",\n flexWrap: \"nowrap\",\n justifyContent: \"space-between\",\n backgroundColor: \"rgba(0,0,0,0)\",\n color: \"#fff\",\n zIndex: 101,\n width: \"100vw\",\n marginBottom: theme.spacing(0),\n minHeight: \"32px\",\n paddingRight: \"1%\",\n paddingLeft: \"1%\",\n [theme.breakpoints.up(\"md\")]: {\n marginLeft: \"-10px\",\n },\n },\n toolbarSecDivs: {\n display: \"flex\",\n flexDirection: \"row\",\n flexWrap: \"nowrap\",\n alignItems: \"center\",\n textShadow: \"0px 0px 2px #000\",\n \"& > p\": {\n display: \"none\",\n margin: 0,\n textTransform: \"uppercase\",\n fontWeight: 900,\n fontSize: \"1.4vh\",\n textWrap: \"nowrap\",\n [theme.breakpoints.up(\"md\")]: {\n display: \"contents\",\n },\n },\n },\n toolbarSecDivP: {\n textDecoration: \"none\",\n display: \"none\",\n margin: 0,\n textTransform: \"uppercase\",\n fontWeight: 900,\n fontSize: \"1.4vh\",\n textWrap: \"nowrap\",\n color: \"#fff\",\n [theme.breakpoints.up(\"md\")]: {\n display: \"contents\",\n cursor: \"default\",\n },\n },\n navIcons: {\n fontSize: \"2.5vh !important\",\n [theme.breakpoints.up(\"md\")]: {\n fontSize: \"1vw\",\n },\n },\n toolbarLink: {\n padding: theme.spacing(0),\n flexShrink: 0,\n fontSize: \"0.5vw\",\n },\n drawerPaper: {\n backgroundColor: \"#fff\",\n color: \"#000\",\n boxShadow: \"0px 0px 100px rgba(0,0,0,.5)\",\n borderTopRightRadius: 5,\n borderBottomRightRadius: 5,\n borderRight: `1px solid ${theme.palette.divider}`,\n borderColor: \"#252525 !important\",\n \"&::-webkit-scrollbar\": {\n width: 0,\n },\n },\n drawerPaper1: {\n backgroundColor: \"#fff\",\n boxShadow: \"0px 0px 100px rgba(255,255,255,.5)\",\n borderLeft: `1px solid ${theme.palette.divider}`,\n borderColor: \"#252525\",\n borderTopLeftRadius: 5,\n borderBottomLeftRadius: 5,\n },\n facebook: {\n opacity: 0.9,\n transition: \"all .2s ease-in-out\",\n padding: 0,\n margin: \"5px\",\n filter: \"drop-shadow(0px 0px 1px #000)\",\n \"&:hover\": {\n opacity: 1,\n transform: \"scale(1.2)\",\n color: \"#3578E5\",\n filter: \"none\",\n },\n },\n instagram: {\n opacity: 0.9,\n transition: \"all .2s ease-in-out\",\n padding: 0,\n margin: \"5px\",\n filter: \"drop-shadow(0px 0px 1px #000)\",\n \"&:hover\": {\n opacity: 1,\n transform: \"scale(1.2)\",\n color: \"#C13584\",\n filter: \"none\",\n },\n },\n twitter: {\n opacity: 0.9,\n transition: \"all .2s ease-in-out\",\n padding: 0,\n margin: \"5px\",\n filter: \"drop-shadow(0px 0px 1px #000)\",\n \"&:hover\": {\n opacity: 1,\n transform: \"scale(1.2)\",\n color: \"#00acee\",\n filter: \"none\",\n },\n },\n youtube: {\n opacity: 0.9,\n transition: \"all .2s ease-in-out\",\n padding: 0,\n margin: \"5px\",\n filter: \"drop-shadow(0px 0px 1px #000)\",\n \"&:hover\": {\n opacity: 1,\n transform: \"scale(1.2)\",\n color: \"#FF0000\",\n filter: \"none\",\n },\n },\n strava: {\n opacity: 0.9,\n transition: \"all .2s ease-in-out\",\n padding: 0,\n margin: \"5px\",\n filter: \"drop-shadow(0px 0px 1px #000)\",\n \"&:hover\": {\n opacity: 1,\n transform: \"scale(1.2)\",\n color: \"#F77737\",\n filter: \"none\",\n },\n },\n location: {\n opacity: 0.9,\n transition: \"all .2s ease-in-out\",\n padding: 0,\n margin: \"5px\",\n filter: \"drop-shadow(0px 0px 1px #000)\",\n \"&:hover\": {\n opacity: 1,\n transform: \"scale(1.2)\",\n color: \"#FD1D1D\",\n },\n },\n menuIcons: {\n fontSize: \"8vw\",\n [theme.breakpoints.up(\"md\")]: {\n fontSize: \"2vw\",\n },\n },\n menuIconText: {\n [theme.breakpoints.up(\"md\")]: {\n marginLeft: 5,\n fontSize: \"0.8vw\",\n display: \"block\",\n fontWeight: \"800\",\n },\n display: \"none\",\n },\n searchIconText: {\n [theme.breakpoints.up(\"md\")]: {\n marginRight: 5,\n fontSize: \"0.8vw\",\n display: \"block\",\n fontWeight: \"800\",\n },\n display: \"none\",\n },\n links: {\n opacity: 0.9,\n transition: \"all .2s ease-in-out\",\n padding: 0,\n margin: \"5px\",\n filter: \"drop-shadow(0px 0px 1px #000)\",\n \"&:hover\": {\n opacity: 1,\n transform: \"scale(1.2)\",\n color: \"#03dbfc\",\n filter: \"none\",\n },\n },\n appBarTransparent: {\n backgroundColor: \"rgba(0,0,0,0)\",\n minHeight: \"60px\",\n width: \"100%\",\n color: \"#fff\",\n },\n appBarSolid: {\n backgroundColor: \"rgba(0,0,0)\",\n minHeight: \"60px\",\n width: \"100%\",\n color: \"#fff\",\n },\n}))\n\nexport default function Header() {\n const d = useStaticQuery(\n graphql`\n query Header {\n site {\n siteMetadata {\n headerLinks {\n link\n text\n }\n treeLevels\n }\n }\n allMarkdownRemark(\n filter: { frontmatter: { price: { eq: null } } }\n sort: { order: ASC, fields: frontmatter___order }\n ) {\n nodes {\n fields {\n slug\n }\n frontmatter {\n title\n order\n }\n }\n }\n }\n `\n )\n\n const navCalc = useMemo(() => {\n const nav = {\n 1: [],\n 2: [],\n 3: [],\n 4: [],\n 5: [],\n 6: [],\n 7: [],\n 8: [],\n 9: [],\n }\n for (let i = 0; i < d.allMarkdownRemark.nodes.length; i++) {\n const page = d.allMarkdownRemark.nodes[i]\n\n const node = {\n text: page.frontmatter.title,\n link: page.fields.slug,\n order: page.frontmatter.order,\n parts: page.fields.slug\n .substring(1, page.fields.slug.length - 1)\n .split(\"/\"),\n }\n\n if (node.parts.length === undefined) continue // root page\n\n node.parentLink = `/${node.parts\n .slice(0, node.parts.length - 1)\n .join(\"/\")}/`\n nav[node.parts.length].push(node)\n }\n\n const processLevel = level => {\n for (let index = 0; index < nav[level].length; index++) {\n const element = nav[level][index]\n element.children = nav[level + 1].filter(\n e => e.parentLink === element.link\n )\n }\n if (level > 1) processLevel(level - 1)\n }\n processLevel(d.site.siteMetadata.treeLevels - 1)\n return nav[1]\n }, [d])\n\n const [navBackground, setNavBackground] = useState(\"appBarTransparent\")\n const navRef = React.useRef()\n navRef.current = navBackground\n useEffect(() => {\n const handleScroll = () => {\n const show = window.scrollY > 100\n if (show) {\n setNavBackground(\"appBarSolid\")\n } else {\n setNavBackground(\"appBarTransparent\")\n }\n }\n document.addEventListener(\"scroll\", handleScroll)\n return () => {\n document.removeEventListener(\"scroll\", handleScroll)\n }\n }, [])\n const trigger = useScrollTrigger({ threshold: 5 })\n const [navigationOpen, setNavigationOpen] = useState(false)\n const [searchOpen, setSearchOpen] = useState(false)\n const toggleNavigation = () => setNavigationOpen(p => !p)\n const toggleSearch = () => setSearchOpen(p => !p)\n const classes = useStyles()\n\n return (\n <>\n {/* \n {d.site.siteMetadata.headerLinks.map(l => (\n \n {l.text}\n \n ))}
*/}\n\n {/* Navigation */}\n \n
\n \n \n \n \n \n \n \n
\n Lokacija:
\n \nServis:
\n \nInformacije:
\n \n\n \n \n \n
\n Zaprati nas:
\n\n \n \n \n Izbornik\n \n \n \n \n Pretraži\n \n
\n