/
Nav.js
50 lines (48 loc) · 1.69 KB
/
Nav.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import React from 'react';
import { Link } from 'react-router';
import { NavbarToggler, Container, Collapse, Navbar, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap';
import DocSearch from './DocSearch';
export default class UINav extends React.Component {
constructor(props) {
super(props);
this.toggleNavbar = this.toggleNavbar.bind(this);
this.state = {
showNavbar: false
};
}
toggleNavbar(e) {
e.preventDefault();
this.setState({
showNavbar: !this.state.showNavbar
});
}
render() {
return (
<Navbar className="header" color="faded" light expand="md">
<Container>
<NavbarBrand className="mr-auto" tag={Link} to="/">reactstrap</NavbarBrand>
<NavbarToggler onClick={this.toggleNavbar} />
<Collapse navbar isOpen={this.state.showNavbar}>
<Nav navbar className="ml-sm-auto">
<NavItem>
<DocSearch />
</NavItem>
<NavItem>
<NavLink tag={Link} to="/components/" activeClassName="active">Components</NavLink>
</NavItem>
<NavItem>
<NavLink tag={Link} to="/utilities/" activeClassName="active">Utilities</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
</NavItem>
<NavItem>
<NavLink className="font-weight-bold" tag={Link} to="/premium-themes/" activeClassName="active">Premium Themes</NavLink>
</NavItem>
</Nav>
</Collapse>
</Container>
</Navbar>
);
}
}