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