archive/theorangeone.net-legacy
Archived
1
Fork 0
Code Releases Packages Activity

Added dropdown component helpers

Browse source
This commit is contained in:
Jake Howard 2016-01-07 18:30:08 +00:00
parent f06030f17d
commit b213cff6db
4 changed files with 41 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
static/src/js/components/navbar/dropdown-item.js Normal file
View file

@ -0,0 +1,9 @@
import React from 'react';
export default class DropdownItem extends React.Component {
render() {
return (
<li><a href={this.props.href}><i className={'icon ' + this.props.icon}></i> {this.props.children}</a></li>
);
}
}

20
static/src/js/components/navbar/dropdown.js Normal file
View file

@ -0,0 +1,20 @@
import React from 'react';
export default class Dropdown extends React.Component {
render() {
return (
<li className="dropdown">
<a className="dropdown-toggle"
data-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false">
{ this.props.title } <i className="icon ion-ios-arrow-up navbar-icon h4"></i>
</a>
<ul className="dropdown-menu dropup">
{ this.props.children }
</ul>
</li>
);
}
}

2
static/src/js/components/navbar/navbar-header.js → static/src/js/components/navbar/header.js
View file

@ -1,6 +1,6 @@
import React from 'react';
export default class NavBarHeader extends React.Component {
export default class Header extends React.Component {
render() {
const items = [0, 1, 2];
var iconBars = items.map(function (item) {

32
static/src/js/components/navbar/navbar.js
View file

@ -1,5 +1,7 @@
import React from 'react';
import NavBarHeader from './navbar-header';
import Header from './header';
import Dropdown from './dropdown';
import DropdownItem from './dropdown-item';
var NavItem = require('react-bootstrap').NavItem;
export default class NavBar extends React.Component {
@ -10,28 +12,19 @@ export default class NavBar extends React.Component {
<div id="navbar-container" className="align h4">
<nav className="navbar navbar-inverse">
<div className="container-fluid">
<NavBarHeader />
<Header />
<div className="collapse navbar-collapse" id="navbar">
<ul className="nav navbar-nav home-button hidden-sm">
<li className="active home"><a href=""><i className="icon ion-home"></i></a></li>
</ul>
<ul className="nav navbar-nav" id="navigation">
<li className="dropdown">
<a className="dropdown-toggle"
data-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false">
Projects <i className="icon ion-ios-arrow-up navbar-icon h4"></i>
</a>
<ul className="dropdown-menu dropup">
<li><a href="#"><i className="icon ion-social-freebsd-devil"></i> Pithos</a></li>
<li><a href=""><i className="icon ion-ios-monitor"></i> BSOD Enabler</a></li>
<li><a href=""><i className="icon ion-chatbox-working"></i> Hipchat Emoticons for All</a></li>
<li><a href=""><i className="icon ion-social-windows"></i> Custom PC</a></li>
<li><a href=""><i className="icon ion-android-more-vertical"></i> All Projects...</a></li>
</ul>
</li>
<Dropdown title="Projects">
<DropdownItem href="#" icon="ion-social-freebsd-devil">Pithos</DropdownItem>
<DropdownItem href="#" icon="ion-ios-monitor">BSOD Enabler</DropdownItem>
<DropdownItem href="#" icon="ion-chatbox-working">Hipchat Emoticons for All</DropdownItem>
<DropdownItem href="#" icon="ion-social-windows">Custom PC</DropdownItem>
<DropdownItem href="#" icon="ion-android-more-vertical">More Projects...</DropdownItem>
</Dropdown>
<li className="dropdown">
<a className="dropdown-toggle"
data-toggle="dropdown"
@ -44,9 +37,6 @@ export default class NavBar extends React.Component {
<li><a href="#"><i className="icon ion-code-working"></i> Code Challenges</a></li>
<li><a href=""><i className="icon ion-ios-circle-filled"></i> Morse Code Decoder</a></li>
<li><a href=""><i className="icon ion-ios-game-controller-a"></i> The Wiki Game Solver</a></li>
<li><a href="">
<span className="glyphicon glyphicon-print" aria-hidden="true"></span> Printr
</a></li>
</ul>
</li>
<NavItem href="#">Link 1</NavItem>