Skip to content

Commit df6e730

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

File tree

2 files changed

+86
-59
lines changed

2 files changed

+86
-59
lines changed

‎src/components/Nav.js

Lines changed: 83 additions & 56 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,87 @@ 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,
151-
}
160+
useEffect(() => {
161+
window.addEventListener('resize', () => {
162+
if(window.innerWidth <= '700') {
163+
setIsNavRendered(false)
164+
}
165+
})
166+
})
152167

153-
toggleNavigation = () => {
154-
this.setState({ isNavRendered: !this.state.isNavRendered })
168+
const toggleNavigation = () => {
169+
setIsNavRendered(!isNavRendered)
155170
}
156171

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

201228
export default Nav

‎src/utils/variables.js

Lines changed: 3 additions & 3 deletions
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)