1import React from 'react' 2import styled from 'styled-components' 3import {Flex, Image, Box} from 'rebass' 4import cliLogo from '../images/cli-logo.svg' 5import {Link} from 'gatsby' 6import {NavLink, BasicNavLink} from './links' 7import MobileSidebar from '../components/MobileSidebar' 8import hamburger from '../images/hamburger.svg' 9import hamburgerClose from '../images/hamburger-close.svg' 10 11const IS_STATIC = !!process.env.GATSBY_IS_STATIC 12 13const Container = styled(Flex)` 14 width: 100%; 15 border-bottom: 1px solid #86838333; 16 position: sticky; 17 top: 0; 18 background-color: ${(props) => props.theme.colors.white}; 19 z-index: 1; 20` 21 22const Inner = styled(Flex)` 23 border-top: 3px solid; 24 border-image: linear-gradient(139deg, #fb8817, #ff4b01, #c12127, #e02aff) 3; 25 margin: auto; 26 height: 53px; 27 padding: 0 30px; 28 align-items: center; 29 width: 100%; 30` 31 32const Logo = styled(Image)` 33 width: 120px; 34 padding: 0px 5px; 35 height: 18px; 36 vertical-align: middle; 37 display: inline-block; 38 transition: opacity .5s; 39 40 &:hover { 41 opacity: .8; 42 } 43` 44 45const Links = styled.ul` 46 display: none; 47 48 @media screen and (min-width: ${(props) => props.theme.breakpoints.TABLET}) { 49 display: block; 50 margin-left: auto; 51 } 52` 53 54const Heart = styled(Box)` 55 font-size: 15px; 56 display: inline-block; 57` 58 59const Hamburger = styled.button` 60 border: none; 61 background: center no-repeat url(${(props) => props.isOpen ? hamburgerClose : hamburger}); 62 height: 30px; 63 width: 30px; 64 display: block; 65 margin-left: auto; 66 transition: opacity .5s; 67 cursor: pointer; 68 69 &:hover { 70 opacity: .6; 71 } 72 73 @media screen and (min-width: ${(props) => props.theme.breakpoints.TABLET}) { 74 display: none; 75 } 76` 77 78class Navbar extends React.Component { 79 constructor (props) { 80 super(props) 81 this.state = { 82 value: null, 83 showMobileNav: false 84 } 85 this.enableBody = this.enableBody.bind(this) 86 this.toggleNav = this.toggleNav.bind(this) 87 } 88 89 componentDidMount () { 90 window.addEventListener('resize', () => { 91 this.enableBody() 92 this.setState({showMobileNav: false}) 93 }) 94 } 95 96 componentWillUnmount () { 97 this.enableBody() 98 } 99 100 enableBody () { 101 window.document.getElementsByTagName('body')[0].classList.remove('disabled-body') 102 } 103 104 toggleNav () { 105 this.setState({showMobileNav: !this.state.showMobileNav}) 106 window.document.getElementsByTagName('body')[0].classList.toggle('disabled-body') 107 } 108 109 render () { 110 return ( 111 <React.Fragment> 112 <Container> 113 <Inner> 114 <Link to='/'> 115 <Heart ml={1} mr={'24px'}>❤</Heart><Logo src={cliLogo} /> 116 </Link> 117 <Links> 118 <NavLink 119 to={`cli-commands/npm${IS_STATIC ? '/index.html' : ''}`} 120 partiallyActive 121 activeClassName='active-navbar-link' 122 > 123 docs 124 </NavLink> 125 <BasicNavLink href='https://www.npmjs.com/'>npmjs.org</BasicNavLink> 126 </Links> 127 <Hamburger isOpen={this.state.showMobileNav} onClick={this.toggleNav} /> 128 </Inner> 129 </Container> 130 {this.state.showMobileNav && <MobileSidebar />} 131 </React.Fragment> 132 ) 133 } 134} 135 136export default Navbar 137
