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

Externalise header

Browse source
This commit is contained in:
Jake Howard 2016-01-03 18:12:29 +00:00
parent 1bbb625255
commit 2c08618d03
2 changed files with 32 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
static/src/js/components/navbar/navbar-header.js Normal file
View file

@ -0,0 +1,29 @@
import React from 'react';
var ReactBootstrap = require('react-bootstrap');
export default class NavBarHeader extends React.Component {
render() {
const items = [0, 1, 2];
var iconBars = items.map(function (item) {
return (
<span className="icon-bar" key={item} />
);
});
return (
<div className="navbar-header">
<button type="button"
className="navbar-toggle collapsed"
data-toggle="collapse"
data-target="#navbar"
aria-expanded="false" >
<span className="sr-only">Toggle navigation</span>
{{ iconBars }}
</button>
<a className="navbar-brand visible-xs">
<i className="icon ion-compass" />
Navigation
</a>
</div>
);
}
}

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

@ -1,12 +1,6 @@
import React from 'react'; import React from 'react';
var ReactBootstrap = require('react-bootstrap'); import NavBarHeader from './navbar-header';
var { var NavItem = require('react-bootstrap').NavItem;
Navbar,
Nav,
MenuItem,
NavItem,
NavDropdown
} = ReactBootstrap;
export default class NavBar extends React.Component { export default class NavBar extends React.Component {
render() { render() {
@ -16,15 +10,7 @@ export default class NavBar extends React.Component {
<div id="navbar-container" className="align h4"> <div id="navbar-container" className="align h4">
<nav className="navbar navbar-inverse"> <nav className="navbar navbar-inverse">
<div className="container-fluid"> <div className="container-fluid">
<div className="navbar-header"> <NavBarHeader />
<button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<span className="sr-only">Toggle navigation</span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
</button>
<a className="navbar-brand visible-xs"><i className="icon ion-compass"></i> Navigation</a>
</div>
<div className="collapse navbar-collapse" id="navbar"> <div className="collapse navbar-collapse" id="navbar">
<ul className="nav navbar-nav home-button hidden-sm"> <ul className="nav navbar-nav home-button hidden-sm">
<li className="active home"><a href=""><i className="icon ion-home"></i></a></li> <li className="active home"><a href=""><i className="icon ion-home"></i></a></li>