frontend/src/molecules/AdminNavBar.js

import {Container, Nav, Navbar, Button, Stack} from 'react-bootstrap'
import { useNavigate } from 'react-router-dom';
import DataStorage from '../organisms/DataStorage';

export default function AdminNavbar() {

    const navigate = useNavigate();

    function handleLogout() {
        DataStorage.set('isLoggedInAdmin','false');
        DataStorage.remove('accessTokenAdmin');
        DataStorage.remove('roleAdmin');
        DataStorage.remove('usernameAdmin');
        DataStorage.remove('expiryDateAdmin');
        navigate('/');
    }

    let username = DataStorage.get('usernameAdmin');
    let isLoggedIn = DataStorage.get('isLoggedInAdmin');

    let userContent;
    if (isLoggedIn === 'true') {
        userContent = <>
            <Stack direction='horizontal' gap={2}>
                <Button href="/admin-info" variant='primary'>
                    Xin chào, ADMIN {username}
                </Button>
                <Button onClick={handleLogout} variant='outline-primary'>
                    Đăng xuất
                </Button>
            </Stack>
        </>
    } else {
        userContent = <>
        <Stack direction='horizontal' gap={2}>
            <Button href="/admin-login" variant='primary'>
                Đăng nhập
            </Button>
        </Stack>
    </>
    }
    return (
        <Navbar id="home" expand="lg" className="bg-body-tertiary" sticky='top' >
            <Container>
                <Navbar.Brand href="/admin">
                    <img
                        alt=""
                        src="/cats-logo.png"
                        width="30"
                        height="30"
                        className="d-inline-block align-top"
                    />{' '}
                    CATS-Shop
                </Navbar.Brand>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="me-auto text-center">
                        {/* These are the navigators */}
                        <Nav.Link disabled={!isLoggedIn} href="/admin-summary">Dashboard</Nav.Link>
                        <Nav.Link disabled={!isLoggedIn} href="/admin-feed">Bài đăng</Nav.Link>
                        <Nav.Link disabled={!isLoggedIn} href="/admin-menu">Thực đơn</Nav.Link>
                        <Nav.Link disabled={!isLoggedIn} href="/admin-staff">Nhân viên</Nav.Link>
                        <Nav.Link disabled={!isLoggedIn} href="/admin-schedule">Lịch làm việc</Nav.Link>
                        <Nav.Link disabled={!isLoggedIn} href="/admin-orders">Đơn hàng</Nav.Link>
                        <Nav.Link disabled={!isLoggedIn} href="/admin-branchs-list">Các chi nhánh</Nav.Link>
                    </Nav>
                    {userContent}
                </Navbar.Collapse>
            </Container>
        </Navbar>
    )
}