Skip to content

Commit 68b8193

Browse files
nisarhassan12nisarhassan12
committed
Nav: small fixes.
Signed-off-by: Nisar Hassan Naqvi <[email protected]>
1 parent 44e9d01 commit 68b8193

File tree

2 files changed

+91
-58
lines changed

2 files changed

+91
-58
lines changed

‎src/components/Nav.js

+88-55
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,93 @@ const StyledNav = styled.div`
142142
.active {
143143
color: ${colors.blue};
144144
}
145+
146+
@media(max-width: ${breakpoints.xmd}) {
147+
.shown {
148+
display: flex;
149+
}
150+
151+
.hidden {
152+
display: none;
153+
}
154+
}
145155
`
146156

147-
class Nav extends React.Component {
157+
const Nav = ({ shouldRenderLogo }) => {
158+
const [isNavRendered, setIsNavRendered] = useState(false)
148159

149-
state = {
150-
isNavRendered: false,
160+
const unLock = () => {
161+
if(window.innerWidth <= '700') {
162+
setIsNavRendered(false)
163+
}
151164
}
152165

153-
toggleNavigation = () => {
154-
this.setState({ isNavRendered: !this.state.isNavRendered })
166+
useEffect(() => {
167+
window.addEventListener('resize', unLock)
168+
169+
return () => {
170+
window.removeEventListener('resize', unLock)
171+
}
172+
})
173+
174+
const toggleNavigation = () => {
175+
setIsNavRendered(!isNavRendered)
155176
}
156177

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>
178+
return (
179+
<StyledNav>
180+
<Global
181+
styles={css`
182+
html {
183+
overflow-y: ${isNavRendered ? 'hidden' : 'scroll'};
167184
}
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>
185+
`}
186+
/>
187+
<nav className={`${isNavRendered ? 'white' : ''}`}>
188+
<div className="nav__header">
189+
{shouldRenderLogo ?
190+
<Link to="/" className="logo-container">
191+
<img className="logo" src={TheiaLogoDark} alt="theia logo" />
192+
</Link> : <span aria-hidden={true}>&nbsp;</span>
193+
}
194+
<div className="nav__button-container">
195+
<button
196+
className="nav__button"
197+
aria-label="Navigation Toggle"
198+
onClick={toggleNavigation}
199+
>
200+
{isNavRendered ? <img src={Multiply} alt="close menu icon" /> : <img src={Hamburger} alt="hamburger menu icon" />}
201+
</button>
177202
</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-
}
203+
</div>
204+
<ul className={`nav__items ${isNavRendered ? 'shown' : 'hidden'}`}>
205+
<li className="nav__item">
206+
<Link
207+
to="/#features"
208+
className="nav__link"
209+
onClick={() => {
210+
setIsNavRendered(false)
211+
}}
212+
>
213+
Features
214+
</Link>
215+
</li>
216+
<li className="nav__item">
217+
<Link to="/docs/" className="nav__link" activeClassName="active">Documentation</Link>
218+
</li>
219+
<li className="nav__item">
220+
<a href="https://spectrum.chat/theia" target="_blank" rel="noopener" className="nav__link">Community</a>
221+
</li>
222+
<li className="nav__item">
223+
<a href="https://www.typefox.io/theia/" className="nav__link" target="_blank" rel="noopener">Support</a>
224+
</li>
225+
<li className="nav__item">
226+
<a href="https://www.typefox.io/trainings/" className="nav__link" target="_blank" rel="noopener">Training</a>
227+
</li>
228+
</ul>
229+
</nav>
230+
</StyledNav>
231+
)
199232
}
200233

201234
export default Nav

‎src/utils/variables.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export const grid = {
1313
}
1414

1515
export const breakpoints = {
16-
sm: '34rem',
17-
xmd: '50rem',
18-
md: '70rem',
16+
sm: '340px',
17+
xmd: '500px',
18+
md: '700px',
1919
}

0 commit comments

Comments
 (0)