1 | import React from 'react'
|
2 | import styled from 'styled-components'
|
3 | import {Flex, Image, Box} from 'rebass'
|
4 | import cliLogo from '../images/cli-logo.svg'
|
5 | import {Link} from 'gatsby'
|
6 | import {NavLink, BasicNavLink} from './links'
|
7 | import MobileSidebar from '../components/MobileSidebar'
|
8 | import hamburger from '../images/hamburger.svg'
|
9 | import hamburgerClose from '../images/hamburger-close.svg'
|
10 |
|
11 | const IS_STATIC = !!process.env.GATSBY_IS_STATIC
|
12 |
|
13 | const 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 |
|
22 | const 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 |
|
32 | const 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 |
|
45 | const 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 |
|
54 | const Heart = styled(Box)`
|
55 | font-size: 15px;
|
56 | display: inline-block;
|
57 | `
|
58 |
|
59 | const 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 |
|
78 | class 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 |
|
136 | export default Navbar
|