Skip to content

Commit 1c1c618

Browse files
committed
Nav: small fixes.
Signed-off-by: Nisar Hassan Naqvi <syednisarhassan12@gmail.com>
1 parent 44e9d01 commit 1c1c618

File tree

1 file changed

+76
-57
lines changed

1 file changed

+76
-57
lines changed

src/components/Nav.js

Lines changed: 76 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import React from 'react'
1+
import React, { useState, useEffect } from 'react'
22
import { Link } from 'gatsby'
33
import styled from '@emotion/styled'
4+
import { Global, css } from '@emotion/core'
45
import { breakpoints, colors } from '../utils/variables'
56
import Hamburger from '../resources/hamburger.svg'
67
import Multiply from '../resources/multiply.svg'
@@ -12,6 +13,10 @@ const StyledNav = styled.div`
1213
top: 0;
1314
left: 0;
1415
right: 0;
16+
17+
.white {
18+
background: #fff;
19+
}
1520
}
1621
1722
.nav {
@@ -23,15 +28,6 @@ const StyledNav = styled.div`
2328
@media(max-width: ${breakpoints.xmd}) {
2429
flex-direction: column;
2530
padding-top: 0;
26-
27-
.navIsRendered {
28-
display: flex;
29-
}
30-
31-
.navIsNotRendered {
32-
display: none;
33-
}
34-
3531
&__header {
3632
display: flex;
3733
justify-content: space-between;
@@ -77,6 +73,10 @@ const StyledNav = styled.div`
7773
width: 100%;
7874
z-index: 1000;
7975
76+
@media(min-width: ${breakpoints.xmd}) {
77+
padding-top: 2.5rem;
78+
}
79+
8080
@media(max-width: ${breakpoints.xmd}) {
8181
height: 95vh;
8282
flex-direction: column;
@@ -142,60 +142,79 @@ const StyledNav = styled.div`
142142
.active {
143143
color: ${colors.blue};
144144
}
145-
`
146145
147-
class Nav extends React.Component {
148-
149-
state = {
150-
isNavRendered: false,
146+
@media(max-width: ${breakpoints.xmd}) {
147+
.shown {
148+
display: flex;
149+
}
150+
151+
.hidden {
152+
display: none;
153+
}
151154
}
155+
`
152156

153-
toggleNavigation = () => {
154-
this.setState({ isNavRendered: !this.state.isNavRendered })
157+
const Nav = ({ shouldRenderLogo }) => {
158+
const [isNavRendered, setIsNavRendered] = useState(false)
159+
160+
const toggleNavigation = () => {
161+
setIsNavRendered(!isNavRendered)
155162
}
156163

157-
render() {
158-
const { shouldRenderLogo } = this.props
159-
return (
160-
<StyledNav>
161-
<nav className="nav" style={ this.state.isNavRendered ? { background: '#fff', height: '100vh' } : {} }>
162-
<div className="nav__header">
163-
{ shouldRenderLogo ?
164-
<Link to="/" className="logo-container">
165-
<img className="logo" src={TheiaLogoDark} alt="theia logo" />
166-
</Link>: <span aria-hidden={true}>&nbsp;</span>
164+
return (
165+
<StyledNav>
166+
<Global
167+
styles={css`
168+
html {
169+
overflow-y: ${isNavRendered ? 'hidden' : 'scroll'};
167170
}
168-
<div className="nav__button-container">
169-
<button
170-
className="nav__button"
171-
aria-label="Navigation Toggle"
172-
onClick={this.toggleNavigation}
173-
>
174-
{this.state.isNavRendered ? <img src={Multiply} alt="close menu icon" /> : <img src={Hamburger} alt="hamburger menu icon" />}
175-
</button>
176-
</div>
171+
`}
172+
/>
173+
<nav className={`${isNavRendered ? 'white' : ''}`}>
174+
<div className="nav__header">
175+
{shouldRenderLogo ?
176+
<Link to="/" className="logo-container">
177+
<img className="logo" src={TheiaLogoDark} alt="theia logo" />
178+
</Link> : <span aria-hidden={true}>&nbsp;</span>
179+
}
180+
<div className="nav__button-container">
181+
<button
182+
className="nav__button"
183+
aria-label="Navigation Toggle"
184+
onClick={toggleNavigation}
185+
>
186+
{isNavRendered ? <img src={Multiply} alt="close menu icon" /> : <img src={Hamburger} alt="hamburger menu icon" />}
187+
</button>
177188
</div>
178-
<ul className={`nav__items ${this.state.isNavRendered ? 'navIsRendered' : 'navIsNotRendered' }`}>
179-
<li className="nav__item">
180-
<Link to="/#features" className="nav__link">Features</Link>
181-
</li>
182-
<li className="nav__item">
183-
<Link to="/docs/" className="nav__link" activeClassName="active">Documentation</Link>
184-
</li>
185-
<li className="nav__item">
186-
<a href="https://spectrum.chat/theia" target="_blank" rel="noopener" className="nav__link">Community</a>
187-
</li>
188-
<li className="nav__item">
189-
<a href="https://www.typefox.io/theia/" className="nav__link" target="_blank" rel="noopener">Support</a>
190-
</li>
191-
<li className="nav__item">
192-
<a href="https://www.typefox.io/trainings/" className="nav__link" target="_blank" rel="noopener">Training</a>
193-
</li>
194-
</ul>
195-
</nav>
196-
</StyledNav>
197-
)
198-
}
189+
</div>
190+
<ul className={`nav__items ${isNavRendered ? 'shown' : 'hidden'}`}>
191+
<li className="nav__item">
192+
<Link
193+
to="/#features"
194+
className="nav__link"
195+
onClick={() => {
196+
setIsNavRendered(false)
197+
}}
198+
>
199+
Features
200+
</Link>
201+
</li>
202+
<li className="nav__item">
203+
<Link to="/docs/" className="nav__link" activeClassName="active">Documentation</Link>
204+
</li>
205+
<li className="nav__item">
206+
<a href="https://spectrum.chat/theia" target="_blank" rel="noopener" className="nav__link">Community</a>
207+
</li>
208+
<li className="nav__item">
209+
<a href="https://www.typefox.io/theia/" className="nav__link" target="_blank" rel="noopener">Support</a>
210+
</li>
211+
<li className="nav__item">
212+
<a href="https://www.typefox.io/trainings/" className="nav__link" target="_blank" rel="noopener">Training</a>
213+
</li>
214+
</ul>
215+
</nav>
216+
</StyledNav>
217+
)
199218
}
200219

201220
export default Nav

0 commit comments

Comments
 (0)