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,24 +11,10 @@ import { ...@@ -11,24 +11,10 @@ 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);
this.state = {
collapsed: true
};
}
toggleNavbar() {
this.setState({
collapsed: !this.state.collapsed
});
}
render() {
const { pathname } = this.props.location;
return ( return (
<Navbar dark color="dark" expand="md"> <Navbar dark color="dark" expand="md">
<Container> <Container>
...@@ -41,8 +27,11 @@ class NavBar extends React.Component { ...@@ -41,8 +27,11 @@ class NavBar extends React.Component {
alt="SRCT Go" alt="SRCT Go"
/> />
</NavbarBrand> </NavbarBrand>
<NavbarToggler onClick={this.toggleNavbar} className="ml-auto" /> <NavbarToggler
<Collapse isOpen={!this.state.collapsed} navbar> onClick={() => setCollapsed(!collapsed)}
className="ml-auto"
/>
<Collapse isOpen={!collapsed} navbar>
<Nav className="mx-auto" navbar> <Nav className="mx-auto" navbar>
<NavItem> <NavItem>
<NavLink href="#/dhaynes" active={pathname == "/dhaynes"}> <NavLink href="#/dhaynes" active={pathname == "/dhaynes"}>
...@@ -65,7 +54,6 @@ class NavBar extends React.Component { ...@@ -65,7 +54,6 @@ class NavBar extends React.Component {
</Container> </Container>
</Navbar> </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