gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #12288 from BerkeleyTrue/feat/add-dropdown-nav

Browse Source 
feat(nav): Add dropdown menu
This commit is contained in:
Quincy Larson
2016-12-30 21:26:37 -06:00
committed by GitHub
parent 8159610572 3a4e62da44
commit 2e23886309
5 changed files with 81 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
client/less/lib/bootstrap/dropdowns.less
View File

@ -33,7 +33,8 @@
z-index: @zindex-dropdown;
display: none; // none by default, but block on "open" of the menu
float: left;
min-width: 160px;
min-width: 0;
width: 100%;
padding: 5px 0;
margin: 2px 0 0; // override default ul
list-style: none;

8
client/less/lib/bootstrap/variables.less
View File

@ -235,9 +235,9 @@
@dropdown-divider-bg: #e5e5e5;
//** Dropdown link text color.
@dropdown-link-color: @gray-dark;
@dropdown-link-color: darkgreen;
//** Hover color for dropdown links.
@dropdown-link-hover-color: darken(@gray-dark, 5%);
@dropdown-link-hover-color: darkgreen;
//** Hover background for dropdown links.
@dropdown-link-hover-bg: #f5f5f5;
@ -365,8 +365,8 @@
@navbar-default-link-color: @gray-lighter;
@navbar-default-link-hover-color: darkgreen;
@navbar-default-link-hover-bg: @gray-lighter;
@navbar-default-link-active-color: @gray-lighter;
@navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%);
@navbar-default-link-active-color: darkgreen;
@navbar-default-link-active-bg: @gray-lighter;
@navbar-default-link-disabled-color: #ccc;
@navbar-default-link-disabled-bg: transparent;

79
common/app/components/Nav/Nav.jsx
View File

@ -3,10 +3,12 @@ import ReactDOM from 'react-dom';
import { LinkContainer } from 'react-router-bootstrap';
import {
Col,
MenuItem,
Nav,
NavbarBrand,
NavDropdown,
NavItem,
Navbar,
NavItem
NavbarBrand
} from 'react-bootstrap';
import navLinks from './links.json';
@ -76,36 +78,45 @@ export default class FCCNav extends React.Component {
this.props.loadCurrentChallenge();
}
renderLinks() {
return navLinks.map(({ content, link, react, target }, index) => {
if (react) {
return (
<LinkContainer
eventKey={ index + 2 }
key={ content }
onClick={ this[`handle${content}Click`] }
to={ link }
>
<NavItem
target={ target || null }
>
{ content }
</NavItem>
</LinkContainer>
);
}
renderLink(isNavItem, { isReact, isDropdown, content, link, links, target }) {
const Component = isNavItem ? NavItem : MenuItem;
if (isDropdown) {
return (
<NavItem
eventKey={ index + 1 }
href={ link }
<NavDropdown
id={ `nav-${content}-dropdown` }
key={ content }
noCaret={ true }
title={ content }
>
{ links.map(this.renderLink.bind(this, false)) }
</NavDropdown>
);
}
if (isReact) {
return (
<LinkContainer
key={ content }
onClick={ this[`handle${content}Click`] }
target={ target || null }
to={ link }
>
{ content }
</NavItem>
<Component
target={ target || null }
>
{ content }
</Component>
</LinkContainer>
);
});
}
return (
<Component
href={ link }
key={ content }
onClick={ this[`handle${content}Click`] }
target={ target || null }
>
{ content }
</Component>
);
}
renderSignIn(username, points, picture, showLoading) {
@ -123,7 +134,6 @@ export default class FCCNav extends React.Component {
} else {
return (
<NavItem
eventKey={ 2 }
href='/signup'
key='signup'
>
@ -140,6 +150,17 @@ export default class FCCNav extends React.Component {
picture,
showLoading
} = this.props;
let navLinksCache;
if (this._navLinksCache) {
navLinksCache = this._navLinksCache;
} else {
// we cache the rendered static links on the instance
// these do not change for the lifetime of the app
navLinksCache = this._navLinksCache = navLinks.map(
this.renderLink.bind(this, true)
);
}
return (
<Navbar
@ -167,7 +188,7 @@ export default class FCCNav extends React.Component {
navbar={ true }
pullRight={ true }
>
{ this.renderLinks() }
{ navLinksCache }
{ this.renderSignIn(username, points, picture, showLoading) }
</Nav>
</Navbar.Collapse>

28
common/app/components/Nav/links.json
View File

@ -1,18 +1,22 @@
[{
"content": "Community",
"isDropdown": true,
"links": [{
"content": "About",
"link": "/about"
}, {
"content": "Forum",
"link": "https://forum.freecodecamp.com/",
"target": "_blank"
}, {
"content": "Chat",
"link": "https://gitter.im/freecodecamp/home",
"target": "_blank"
}]
},{
"content": "Map",
"link": "/map",
"react": true
},{
"content": "Chat",
"link": "https://gitter.im/freecodecamp/home",
"target": "_blank"
},{
"content": "Forum",
"link": "https://forum.freecodecamp.com/",
"target": "_blank"
},{
"content": "About",
"link": "/about"
"isReact": true
},{
"content": "Shop",
"link": "/shop"

15
server/views/partials/navbar.jade
View File

@ -7,14 +7,17 @@ nav.navbar.navbar-default.navbar-fixed-top.nav-height
img.img-responsive.nav-logo(src='https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg', alt='learn to code javascript at Free Code Camp logo')
.collapse.navbar-collapse
ul.nav.navbar-nav.navbar-right.hamburger-dropdown
li.dropdown
a.dropdown-toggle(data-toggle='dropdown' role='button' href='#' aria-haspopup='true') Community
ul.dropdown-menu
li
a(href='/about') About
li
a(href='https://gitter.im/freecodecamp/home' target='_blank') Chat
li
a(href='https://forum.freecodecamp.com', target='_blank') Forum
li
a(href='/map') Map
li
a(href='https://gitter.im/freecodecamp/home' target='_blank') Chat
li
a(href='https://forum.freecodecamp.com', target='_blank') Forum
li
a(href='/about') About
li
a(href='/shop') Shop
if !user