Skip to content
This repository was archived by the owner on Apr 19, 2021. It is now read-only.

Commit 1809fbb

Browse files
nisarhassan12nisarhassan12
committed
visualize active state for Nav links.
1 parent ee94f46 commit 1809fbb

File tree

2 files changed

+67
-66
lines changed

2 files changed

+67
-66
lines changed

‎src/components/Nav.tsx

Lines changed: 59 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -222,83 +222,80 @@ class Nav extends React.Component {
222222
this.setState({ isNavRendered: !this.state.isNavRendered })
223223
}
224224

225-
226225
render() {
227-
228226
const { isNavRendered } = this.state
229227

230228
return (
231-
<div className="grey-container" style={{zIndex: 9999}}>
229+
<div className="grey-container" style={{ zIndex: 9999 }}>
232230
<div className="row">
233231
<StyledNav role="navigation" className="nav">
234-
<div className="nav__burger-container">
235-
<Link to="/"><img alt="Gitpod Logo" src={GitpodLogoDark} /></Link>
236-
<div className="btns">
237-
<a href="https://gitpod.io/login/" rel="noopener" style={{display: isNavRendered ? 'none': ''}}>Log In</a>
238-
<div className="nav__btn-container" aria-live="assertive">
239-
<button
240-
className="nav__btn"
241-
aria-label={ isNavRendered ? "Hide the Navigation Items" : "Show the Navigation Items"}
242-
onClick={this.toggleNavigation}
232+
<div className="nav__burger-container">
233+
<Link to="/"><img alt="Gitpod Logo" src={GitpodLogoDark} /></Link>
234+
<div className="btns">
235+
<a href="https://gitpod.io/login/" rel="noopener" style={{ display: isNavRendered ? 'none' : '' }}>Log In</a>
236+
<div className="nav__btn-container" aria-live="assertive">
237+
<button
238+
className="nav__btn"
239+
aria-label={isNavRendered ? "Hide the Navigation Items" : "Show the Navigation Items"}
240+
onClick={this.toggleNavigation}
241+
>
242+
<svg
243+
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.112 31.112"
244+
className={isNavRendered ? 'is-shown--multiply' : 'is-hidden'}
245+
aria-hidden={isNavRendered ? false : true}
246+
id="multiply"
243247
>
244-
<svg
245-
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.112 31.112"
246-
className={ isNavRendered ? 'is-shown--multiply' : 'is-hidden' }
247-
aria-hidden={ isNavRendered ? false : true }
248-
id="multiply"
249-
>
250-
<title>close menu icon</title>
251-
<path d="M31.112 1.414L29.698 0 15.556 14.142 1.414 0 0 1.414l14.142 14.142L0 29.698l1.414 1.414L15.556 16.97l14.142 14.142 1.414-1.414L16.97 15.556z"/>
252-
</svg>
253-
<svg
254-
className={ isNavRendered ? 'is-hidden' : 'is-shown' }
255-
aria-hidden={ isNavRendered ? true : false }
256-
xmlns="http://www.w3.org/2000/svg"
257-
viewBox="0 0 26 18"
258-
id="hamburger"
259-
>
260-
<title>hamburger menu icon</title>
261-
<g transform="translate(-647.5 -86.5)" strokeWidth="2"><line x2="24" transform="translate(648.5 87.5)"/><line x2="24" transform="translate(648.5 95.5)"/><line x2="24" transform="translate(648.5 103.5)"/></g>
262-
</svg>
263-
</button>
264-
</div>
248+
<title>close menu icon</title>
249+
<path d="M31.112 1.414L29.698 0 15.556 14.142 1.414 0 0 1.414l14.142 14.142L0 29.698l1.414 1.414L15.556 16.97l14.142 14.142 1.414-1.414L16.97 15.556z" />
250+
</svg>
251+
<svg
252+
className={isNavRendered ? 'is-hidden' : 'is-shown'}
253+
aria-hidden={isNavRendered ? true : false}
254+
xmlns="http://www.w3.org/2000/svg"
255+
viewBox="0 0 26 18"
256+
id="hamburger"
257+
>
258+
<title>hamburger menu icon</title>
259+
<g transform="translate(-647.5 -86.5)" strokeWidth="2"><line x2="24" transform="translate(648.5 87.5)" /><line x2="24" transform="translate(648.5 95.5)" /><line x2="24" transform="translate(648.5 103.5)" /></g>
260+
</svg>
261+
</button>
265262
</div>
266263
</div>
264+
</div>
265+
266+
267+
<ul className={`nav__items ${isNavRendered ? 'navIsRendered' : 'navIsNotRendered'}`} >
268+
<li className="nav__item"><Link activeClassName="active" to='/features/' className="link">Features</Link></li>
269+
<li className="nav__item"><Link activeClassName="active" to='/self-hosted/' className="link">Self-Hosted</Link></li>
270+
<li className="nav__item"><Link activeClassName="active" to='/pricing/' className="link">Pricing</Link></li>
271+
<li className="nav__item">
272+
<DropDown
273+
title="Resources"
274+
links={[
275+
{
276+
text: 'Docs',
277+
to: '/docs/'
278+
},
279+
{
280+
text: 'Blog',
281+
to: '/blog/'
282+
},
283+
{
284+
text: 'Community',
285+
to: 'https://community.gitpod.io/',
286+
target: true
287+
}
288+
]}
289+
/>
290+
</li>
291+
<li className="nav__item"><a href="https://gitpod.io/login/" rel="noopener" className="btn">Log In</a></li>
292+
</ul>
267293

268-
269-
<ul className={`nav__items ${isNavRendered ? 'navIsRendered' : 'navIsNotRendered'}`} >
270-
<li className="nav__item"><Link activeClassName="active" to='/features/' className="link">Features</Link></li>
271-
<li className="nav__item"><Link activeClassName="active" to='/self-hosted/' className="link">Self-Hosted</Link></li>
272-
<li className="nav__item"><Link activeClassName="active" to='/pricing/' className="link">Pricing</Link></li>
273-
<li className="nav__item">
274-
<DropDown
275-
title="Resources"
276-
links={[
277-
{
278-
text: 'Docs',
279-
to: '/docs/'
280-
},
281-
{
282-
text: 'Blog',
283-
to: '/blog/'
284-
},
285-
{
286-
text: 'Community',
287-
to: 'https://community.gitpod.io/',
288-
target: true
289-
}
290-
]}
291-
/>
292-
</li>
293-
<li className="nav__item"><a href="https://gitpod.io/login/" rel="noopener" className="btn">Log In</a></li>
294-
</ul>
295-
296294
</StyledNav>
297295
</div>
298296
</div>
299297
)
300298
}
301299
}
302300

303-
304301
export default Nav

‎src/styles/normalize.ts

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -267,10 +267,6 @@ export default `
267267
}
268268
}
269269
270-
.active {
271-
color: ${colors.link};
272-
}
273-
274270
.link {
275271
position: relative;
276272
color: ${colors.text};
@@ -300,6 +296,14 @@ export default `
300296
}
301297
}
302298
299+
.active {
300+
color: ${colors.lightBlue};
301+
302+
&::after {
303+
right: 0;
304+
border-color: ${colors.lightBlue};
305+
}
306+
}
303307
304308
/* ------------------------------------------- */
305309
/* ----- Inputs ----- */

0 commit comments

Comments
 (0)