Spaces:
Sleeping
Sleeping
File size: 3,167 Bytes
fdbdf19 fab48db 708809b 391b583 fab48db 708809b fab48db fdbdf19 708809b fab48db 708809b 391b583 fab48db 391b583 fab48db 391b583 708809b fab48db 391b583 fdbdf19 391b583 fdbdf19 391b583 fab48db 391b583 |
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 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
import { Container, Nav, Navbar, Button, Stack } from 'react-bootstrap'
import { useNavigate } from 'react-router-dom';
import DataStorage from '../organisms/DataStorage';
export default function ANavbar() {
const navigate = useNavigate();
function handleLogout() {
DataStorage.set('isLoggedIn', 'false');
DataStorage.remove('accessToken');
DataStorage.remove('role');
DataStorage.remove('username');
DataStorage.remove('cart');
DataStorage.remove('expiryDate');
navigate('/');
}
let username = DataStorage.get('username');
let isLoggedIn = DataStorage.get('isLoggedIn');
let userContent;
if (isLoggedIn === 'true') {
userContent = <>
<Stack direction='horizontal' gap={2}>
<Button href="/userinfo" variant='primary'>
Xin chào, {username}
</Button>
<Button href="/cart" variant='outline-primary'>
Giỏ hàng
</Button>
<Button onClick={handleLogout} variant='outline-primary'>
Đăng xuất
</Button>
</Stack>
</>
} else {
userContent = <>
<Stack direction='horizontal' gap={2}>
<Button href="/login" variant='primary'>
Đăng nhập
</Button>
{' '}
<Button href="/register" variant='outline-primary'>
Đăng ký
</Button>
</Stack>
</>
}
return (
<Navbar id="home" expand="lg" className="bg-body-tertiary" sticky='top' style={{ minHeight: '6vh' }}>
<Container fluid style={{ maxWidth: "90%" }}>
<Navbar.Brand href="/">
<div style={{ fontWeight: 'bold' }}>
<span className='mr-1'>
<img
alt=""
src="/cats-logo.png"
width="30"
height="30"
className="d-inline-block align-top"
/>
</span>
{" "}
CATS - Shop</div>
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
{/* These are the navigators */}
<Nav.Link href="/#home">Trang chủ</Nav.Link>
<Nav.Link href="/#about-us">Về chúng tôi</Nav.Link>
<Nav.Link href="/#news">Tin tức</Nav.Link>
<Nav.Link href="/#store">Chi nhánh</Nav.Link>
<Nav.Link href="/#menu">Menu</Nav.Link>
<Nav.Link href="/#contact">Liên hệ</Nav.Link>
</Nav>
{userContent}
</Navbar.Collapse>
</Container>
</Navbar>
)
} |