Commit 3cdb4d0b authored by David Haynes's avatar David Haynes 🙆

Better bootstrap usage on the NavBar

- woo CSS
parent 699bd15c
Pipeline #3555 passed with stage
in 1 minute and 7 seconds
......@@ -17,4 +17,4 @@ __pycache__/
go/sourceme.sh
.DS_STORE
node_modules/
go/static/
go/static/main.js
import React from "react";
import { Navbar, NavbarBrand, Nav, NavItem, NavLink } from "reactstrap";
import {
Container,
Navbar,
NavbarBrand,
Nav,
NavItem,
NavLink,
NavbarToggler,
Collapse
} from "reactstrap";
const NavBar = props => (
<div>
<Navbar color="dark" dark expand="md">
<NavbarBrand href="#">Go</NavbarBrand>
class NavBar extends React.Component {
constructor(props) {
super(props);
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="#/dhaynes" active={props.page == "dhaynes"}>
Dhaynes
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#/about" active={props.page == "about"}>
About
</NavLink>
</NavItem>
</Nav>
</Navbar>
</div>
);
this.toggleNavbar = this.toggleNavbar.bind(this);
this.state = {
collapsed: true
};
}
toggleNavbar() {
this.setState({
collapsed: !this.state.collapsed
});
}
render() {
const { page } = this.props;
return (
<Navbar dark color="dark" expand="md">
<Container>
<NavbarBrand href="#/">
<img
src="static/go.svg"
className="d-inline-block align-top"
width="30"
height="30"
alt="SRCT Go"
/>
Go
</NavbarBrand>
<NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
<Collapse isOpen={!this.state.collapsed} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="#/dhaynes" active={page == "dhaynes"}>
Dhaynes
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#/about" active={page == "about"}>
About
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#/debug" active={page == "debug"}>
Debug
</NavLink>
</NavItem>
</Nav>
</Collapse>
</Container>
</Navbar>
);
}
}
export default NavBar;
import React from "react";
import { NavBar } from "Components";
import { Container } from "reactstrap";
const PageTemplate = props => (
<div>
<NavBar page={props.page} />
<div>{props.children}</div>
<Container>{props.children}</Container>
</div>
);
......
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 2100 2100" enable-background="new 0 0 2100 2100" xml:space="preserve">
<g>
<polygon fill="none" points="1299,908.2 1299,1221.6 1295.3,1223.7 1023,1380.4 1023,1446.7 1299,1606.1 1351.5,1636.4
1680,1446.7 1680,1126.7 1680,1067.5 1352.2,878.2 1352.2,878.2 1351.6,877.9 1351.6,877.9 1350.2,878.7 1300.4,907.5
1299.2,908.2 1299.1,908.2 "/>
<polygon fill="none" points="988.4,1046.6 1019.7,1064.7 1023.8,1067.1 1019.7,1064.7 "/>
<polygon fill="#FBB03B" points="1352.1,560.5 1352,560.4 1024.3,749.6 1077.1,780.1 1214.7,859.5 1299,908.1 1299.2,908.2
1300.4,907.5 1350.2,878.7 1351.6,877.9 1351.6,877.9 1351.6,877.9 1352.2,878.2 1352.2,878.2 1680,1067.5 1680,1126.7
1680,1446.7 1351.5,1636.4 1299,1606.1 1023,1446.7 1023,1380.4 1023,1221.6 1023,1067.5 1023.8,1067.1 1019.7,1064.7
988.4,1046.6 749.1,908.4 749.1,908.4 749,908.6 749,1220.9 749,1379.7 749,1538.6 749,1605.6 1352,1954.1 1955,1605.6 1955,908.6
"/>
<polygon fill="#FBB03B" points="749.1,908.4 749.1,908.4 749.1,908.4 "/>
<polygon fill="#FBB03B" points="1680,1067.5 1352.2,878.2 1352.2,878.2 1352.2,878.2 "/>
<polygon fill="#FBB03B" points="1351.6,877.9 1350.2,878.7 1351.6,877.9 "/>
<polygon fill="#006837" points="749.2,908.4 749.1,908.4 988.4,1046.6 855.9,969.9 "/>
<polygon fill="#006837" points="855.9,969.9 749.3,908.3 749.2,908.4 "/>
<polygon fill="#006837" points="1024,749.4 1023.9,749.4 1023.9,749.4 1024.3,749.6 1024.3,749.6 "/>
<polygon fill="#006837" points="749.2,908.4 749.2,908.3 749.1,908.4 749.1,908.4 "/>
<polygon fill="#006837" points="749.3,908.3 749.2,908.2 749.2,908.3 749.2,908.4 "/>
<polygon fill="#006837" points="1214.6,859.5 1299,908.2 1299,908.1 1214.7,859.5 1077.1,780.1 1024.3,749.6 1024.3,749.6
1077.1,780.1 "/>
<polygon fill="#006837" points="1299.1,908.2 1299.2,908.2 1299,908.1 1299,908.2 "/>
<polygon fill="#006837" points="988.4,1046.6 1019.7,1064.7 1023.8,1067.1 1023,1067.5 1023,1221.6 1023,1380.4 1295.3,1223.7
1299,1221.6 1299,908.2 1214.6,859.5 1077.1,780.1 1024.3,749.6 749.3,908.3 855.9,969.9 "/>
<polygon fill="#006837" points="749,1220.9 420,1031.6 420,657.1 420,652.4 748.5,462.8 752.7,465.1 1066.2,646.1 1203.8,566.7
1341.4,487.2 1027.9,306.2 748.6,145 145,493.5 145,1190.5 749,1538.6 749,1379.7 "/>
</g>
</svg>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment