NavBar.js
1.47 KB
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
import React, { useState } from 'react';
import { Container, NavbarText } from 'reactstrap';
import {
Collapse,
Navbar,
NavbarToggler,
NavbarBrand,
Nav,
NavItem,
NavLink,
Col
} from 'reactstrap';
const NavBar = (props) => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);
return (
<>
<Navbar style={{'backgroundColor': '#940f0f', 'display':'block'}} light expand="md" fixed="top">
<Container className="themed-container">
<span>
<a href='/'><img src="logo.png" width="50" /></a>
</span>
<NavbarBrand href="/" style={{'marginLeft':'1.5rem', 'color':'#fff'}}>MEALKHU</NavbarBrand>
<NavbarToggler onClick={toggle} />
<Collapse isOpen={isOpen} navbar>
<Nav className="mr-auto" navbar>
<NavItem>
<NavLink href="/about" style={{'color':'#fff'}}>About</NavLink>
</NavItem>
<NavItem>
<NavLink href="/menu" style={{'color':'#fff'}}>Menu</NavLink>
</NavItem>
<NavItem>
<NavLink href="/mypick" style={{'color':'#fff'}}>MyPick</NavLink>
</NavItem>
</Nav>
<NavbarText><a href="http://khuhub.khu.ac.kr/2019102227/TermProject" target="_blank" style={{'color':'#fff', 'textDecoration':'none'}}>OSS Project</a></NavbarText>
</Collapse>
</Container>
</Navbar>
</>
);
}
export default NavBar;