Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/lowmess/az-golf-gurus. www.azgolfgurus.com
astro datocms typescript
Something went wrong. Try again.
2.3 kB · 99 lines
JSX
at v1
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100import React, { useState, useEffect, useRef } from 'react'import noScroll from 'no-scroll'import { useTheme } from 'emotion-theming'import { Box, Flex, Button } from 'rebass'import Container from '../Container'import { useMediaQuery } from '../../utils/hooks'import SkipNavLink from './SkipNavLink'import Logo from './Logo'import LinkList from './LinkList'import { Hamburger } from './Icons'
const openButtonStyles = { display: [null, 'none'], position: 'absolute', left: 0,
'&:hover': { color: 'green', },}
const Navigation = () => { const [open, setOpen] = useState(false) const openButtonEl = useRef(null) const theme = useTheme() const notMobile = useMediaQuery(`(min-width: ${theme.breakpoints[0]})`) const menuId = 'navigation-menu'
const toggleMenu = () => { setOpen(!open) noScroll.toggle() }
const focusOpenButton = () => { if (openButtonEl.current) openButtonEl.current.focus() }
useEffect(() => { if (notMobile) { noScroll.off() } else if (open && !notMobile) { noScroll.on() }
return () => { noScroll.off() } }, [open, notMobile])
return ( <Box as="header" sx={{ position: 'relative', boxShadow: '0 -0.25rem 0.5rem 0.125rem rgba(0, 0, 0, 0.25)', }} > <SkipNavLink />
<Container> <Flex as="nav" alignItems="center" justifyContent={['center', 'space-between']} > {!notMobile && ( <Button ref={openButtonEl} variant="reset" aria-label="Open the menu" aria-expanded={open} aria-controls={menuId} onClick={toggleMenu} sx={openButtonStyles} > <Hamburger ariaHidden="true" /> </Button> )}
<Logo py={[2, 0]} tabIndex={notMobile ? -1 : 0} aria-hidden={notMobile ? true : undefined} />
<LinkList id={menuId} open={open} toggleMenu={toggleMenu} focusOpenButton={focusOpenButton} notMobile={notMobile} /> </Flex> </Container> </Box> )}
export default Navigation