Skip to content

Commit

Permalink
WIP.
Browse files Browse the repository at this point in the history
Fixes #113
  • Loading branch information
nisarhassan12 committed Jul 7, 2020
1 parent a5906b4 commit b0b85cf
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 46 deletions.
109 changes: 63 additions & 46 deletions src/components/Nav.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@ import { breakpoints, colors } from '../utils/variables'
import Hamburger from '../resources/hamburger.svg'
import Multiply from '../resources/multiply.svg'
import TheiaLogoDark from '../resources/theia-logo-dark.svg'
import { useState } from 'react'
import { useEffect } from 'react'
import { useRef } from 'react'

const StyledNav = styled.div`
@media(max-width: ${breakpoints.xmd}) {
Expand All @@ -14,6 +17,12 @@ const StyledNav = styled.div`
right: 0;
}
&.fixed {
position: fixed;
background: #fff;
width: 100%;
}
.nav {
display: flex;
position: relative;
Expand Down Expand Up @@ -144,58 +153,66 @@ const StyledNav = styled.div`
}
`

class Nav extends React.Component {
const Nav = ({ shouldRenderLogo }) => {
const [isNavRendered, setIsNavRendered] = useState(false)
const navRef = useRef(null)

state = {
isNavRendered: false,
const toggleNavigation = () => {
setIsNavRendered(!isNavRendered)
}

toggleNavigation = () => {
this.setState({ isNavRendered: !this.state.isNavRendered })
const handleScroll = () => {
if (window.scrollY > 200) {
navRef.current.classList.add('fixed')
}
}

render() {
const { shouldRenderLogo } = this.props
return (
<StyledNav>
<nav className="nav" style={ this.state.isNavRendered ? { background: '#fff', height: '100vh' } : {} }>
<div className="nav__header">
{ shouldRenderLogo ?
<Link to="/" className="logo-container">
<img className="logo" src={TheiaLogoDark} alt="theia logo" />
</Link>: <span aria-hidden={true}>&nbsp;</span>
}
<div className="nav__button-container">
<button
className="nav__button"
aria-label="Navigation Toggle"
onClick={this.toggleNavigation}
>
{this.state.isNavRendered ? <img src={Multiply} alt="close menu icon" /> : <img src={Hamburger} alt="hamburger menu icon" />}
</button>
</div>
useEffect(() => {
window.addEventListener('scroll', handleScroll)
return () => {

}
})

return (
<StyledNav ref={navRef}>
<nav className="nav" style={isNavRendered ? { background: '#fff', height: '100vh' } : {}}>
<div className="nav__header">
{shouldRenderLogo ?
<Link to="/" className="logo-container">
<img className="logo" src={TheiaLogoDark} alt="theia logo" />
</Link> : <span aria-hidden={true}>&nbsp;</span>
}
<div className="nav__button-container">
<button
className="nav__button"
aria-label="Navigation Toggle"
onClick={toggleNavigation}
>
{isNavRendered ? <img src={Multiply} alt="close menu icon" /> : <img src={Hamburger} alt="hamburger menu icon" />}
</button>
</div>
<ul className={`nav__items ${this.state.isNavRendered ? 'navIsRendered' : 'navIsNotRendered' }`}>
<li className="nav__item">
<Link to="/#features" className="nav__link">Features</Link>
</li>
<li className="nav__item">
<Link to="/docs/" className="nav__link" activeClassName="active">Documentation</Link>
</li>
<li className="nav__item">
<a href="https://community.theia-ide.org/" target="_blank" rel="noopener" className="nav__link">Community</a>
</li>
<li className="nav__item">
<a href="https://www.typefox.io/theia/" className="nav__link" target="_blank" rel="noopener">Support</a>
</li>
<li className="nav__item">
<a href="https://www.typefox.io/trainings/" className="nav__link" target="_blank" rel="noopener">Training</a>
</li>
</ul>
</nav>
</StyledNav>
)
}
</div>
<ul className={`nav__items ${isNavRendered ? 'navIsRendered' : 'navIsNotRendered'}`}>
<li className="nav__item">
<Link to="/#features" className="nav__link">Features</Link>
</li>
<li className="nav__item">
<Link to="/docs/" className="nav__link" activeClassName="active">Documentation</Link>
</li>
<li className="nav__item">
<a href="https://community.theia-ide.org/" target="_blank" rel="noopener" className="nav__link">Community</a>
</li>
<li className="nav__item">
<a href="https://www.typefox.io/theia/" className="nav__link" target="_blank" rel="noopener">Support</a>
</li>
<li className="nav__item">
<a href="https://www.typefox.io/trainings/" className="nav__link" target="_blank" rel="noopener">Training</a>
</li>
</ul>
</nav>
</StyledNav>
)
}

export default Nav
1 change: 1 addition & 0 deletions src/layouts/docs-layout.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ const DocContainer = styled.div`
}
.docs-row {
position: relative;
width: 85%;
max-width: 100rem;
margin: 0 auto;
Expand Down
1 change: 1 addition & 0 deletions src/layouts/layout.js
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ const Layout = ({ children, canonical }) => {
/* --------------------------------------------- */
.row {
position: relative;
max-width: ${grid.maxWidth};
width: 80%;
margin: 0 auto;
Expand Down

0 comments on commit b0b85cf

Please sign in to comment.