Skip to content

Commit 1cb49b1

Browse files
nisarhassan12nisarhassan12
committed
WIP.
Fixes #113 Signed-off-by: Nisar Hassan Naqvi <syednisarhassan12@gmail.com>
1 parent a5906b4 commit 1cb49b1

File tree

3 files changed

+65
-46
lines changed

3 files changed

+65
-46
lines changed

‎src/components/Nav.js

Lines changed: 63 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ import { breakpoints, colors } from '../utils/variables'
55
import Hamburger from '../resources/hamburger.svg'
66
import Multiply from '../resources/multiply.svg'
77
import TheiaLogoDark from '../resources/theia-logo-dark.svg'
8+
import { useState } from 'react'
9+
import { useEffect } from 'react'
10+
import { useRef } from 'react'
811

912
const StyledNav = styled.div`
1013
@media(max-width: ${breakpoints.xmd}) {
@@ -14,6 +17,12 @@ const StyledNav = styled.div`
1417
right: 0;
1518
}
1619
20+
&.fixed {
21+
position: fixed;
22+
background: #fff;
23+
width: 100%;
24+
}
25+
1726
.nav {
1827
display: flex;
1928
position: relative;
@@ -144,58 +153,66 @@ const StyledNav = styled.div`
144153
}
145154
`
146155

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

149-
state = {
150-
isNavRendered: false,
160+
const toggleNavigation = () => {
161+
setIsNavRendered(!isNavRendered)
151162
}
152163

153-
toggleNavigation = () => {
154-
this.setState({ isNavRendered: !this.state.isNavRendered })
164+
const handleScroll = () => {
165+
if (window.scrollY > 200) {
166+
navRef.current.classList.add('fixed')
167+
}
155168
}
156169

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>
167-
}
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>
170+
useEffect(() => {
171+
window.addEventListener('scroll', handleScroll)
172+
return () => {
173+
174+
}
175+
})
176+
177+
return (
178+
<StyledNav ref={navRef}>
179+
<nav className="nav" style={isNavRendered ? { background: '#fff', height: '100vh' } : {}}>
180+
<div className="nav__header">
181+
{shouldRenderLogo ?
182+
<Link to="/" className="logo-container">
183+
<img className="logo" src={TheiaLogoDark} alt="theia logo" />
184+
</Link> : <span aria-hidden={true}>&nbsp;</span>
185+
}
186+
<div className="nav__button-container">
187+
<button
188+
className="nav__button"
189+
aria-label="Navigation Toggle"
190+
onClick={toggleNavigation}
191+
>
192+
{isNavRendered ? <img src={Multiply} alt="close menu icon" /> : <img src={Hamburger} alt="hamburger menu icon" />}
193+
</button>
177194
</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://community.theia-ide.org/" 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-
}
195+
</div>
196+
<ul className={`nav__items ${isNavRendered ? 'navIsRendered' : 'navIsNotRendered'}`}>
197+
<li className="nav__item">
198+
<Link to="/#features" className="nav__link">Features</Link>
199+
</li>
200+
<li className="nav__item">
201+
<Link to="/docs/" className="nav__link" activeClassName="active">Documentation</Link>
202+
</li>
203+
<li className="nav__item">
204+
<a href="https://community.theia-ide.org/" target="_blank" rel="noopener" className="nav__link">Community</a>
205+
</li>
206+
<li className="nav__item">
207+
<a href="https://www.typefox.io/theia/" className="nav__link" target="_blank" rel="noopener">Support</a>
208+
</li>
209+
<li className="nav__item">
210+
<a href="https://www.typefox.io/trainings/" className="nav__link" target="_blank" rel="noopener">Training</a>
211+
</li>
212+
</ul>
213+
</nav>
214+
</StyledNav>
215+
)
199216
}
200217

201218
export default Nav

‎src/layouts/docs-layout.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ const DocContainer = styled.div`
2828
}
2929
3030
.docs-row {
31+
position: relative;
3132
width: 85%;
3233
max-width: 100rem;
3334
margin: 0 auto;

‎src/layouts/layout.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@ const Layout = ({ children, canonical }) => {
8888
/* --------------------------------------------- */
8989
9090
.row {
91+
position: relative;
9192
max-width: ${grid.maxWidth};
9293
width: 80%;
9394
margin: 0 auto;

0 commit comments

Comments
 (0)