Commit 45d8e5c7 authored by David Haynes's avatar David Haynes 🙆

Transform NavBar into React Hooks for funsies

- wow that is simpler
parent 9c8061e2
Pipeline #3859 passed with stage
in 1 minute and 27 seconds
import React from "react";
import React, { useState } from "react";
import {
Container,
Navbar,
......@@ -11,61 +11,49 @@ import {
} from "reactstrap";
import { AuthButton } from "../";
class NavBar extends React.Component {
constructor(props) {
super(props);
const NavBar = props => {
const [collapsed, setCollapsed] = useState(true);
const { pathname } = props.location;
this.toggleNavbar = this.toggleNavbar.bind(this);
this.state = {
collapsed: true
};
}
toggleNavbar() {
this.setState({
collapsed: !this.state.collapsed
});
}
render() {
const { pathname } = this.props.location;
return (
<Navbar dark color="dark" expand="md">
<Container>
<NavbarBrand href="#/">
<img
src="static/go.svg"
className="d-inline-block align-top"
width="42"
height="42"
alt="SRCT Go"
/>
</NavbarBrand>
<NavbarToggler onClick={this.toggleNavbar} className="ml-auto" />
<Collapse isOpen={!this.state.collapsed} navbar>
<Nav className="mx-auto" navbar>
<NavItem>
<NavLink href="#/dhaynes" active={pathname == "/dhaynes"}>
Dhaynes
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#/about" active={pathname == "/about"}>
About
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#/debug" active={pathname == "/debug"}>
Debug
</NavLink>
</NavItem>
</Nav>
<AuthButton className="ml-auto" />
</Collapse>
</Container>
</Navbar>
);
}
}
return (
<Navbar dark color="dark" expand="md">
<Container>
<NavbarBrand href="#/">
<img
src="static/go.svg"
className="d-inline-block align-top"
width="42"
height="42"
alt="SRCT Go"
/>
</NavbarBrand>
<NavbarToggler
onClick={() => setCollapsed(!collapsed)}
className="ml-auto"
/>
<Collapse isOpen={!collapsed} navbar>
<Nav className="mx-auto" navbar>
<NavItem>
<NavLink href="#/dhaynes" active={pathname == "/dhaynes"}>
Dhaynes
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#/about" active={pathname == "/about"}>
About
</NavLink>
</NavItem>
<NavItem>
<NavLink href="#/debug" active={pathname == "/debug"}>
Debug
</NavLink>
</NavItem>
</Nav>
<AuthButton className="ml-auto" />
</Collapse>
</Container>
</Navbar>
);
};
export default NavBar;
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