KnowledgeBase_frontend/src/layouts/HeaderWithNav.jsx

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Link } from 'react-router-dom';
import { logoutThunk } from '../store/auth/auth.thunk';

export default function HeaderWithNav() {
    const dispatch = useDispatch();
    const { user } = useSelector((state) => state.auth);

    const handleLogout = () => {
        dispatch(logoutThunk());
    };

    return (
        <header className=' navbar navbar-expand-lg'>
            <nav className='navbar navbar-expand-lg border-bottom p-3 mb-3 w-100'>
                <div className='container-fluid'>
                    <Link className='navbar-brand' to='#'>
                        OOIN 智能知识库
                    </Link>
                    <button
                        className='navbar-toggler'
                        type='button'
                        data-bs-toggle='collapse'
                        data-bs-target='#navbarText'
                        aria-controls='navbarText'
                        aria-expanded='false'
                        aria-label='Toggle navigation'
                    >
                        <span className='navbar-toggler-icon'></span>
                    </button>
                    <div className='collapse navbar-collapse' id='navbarText'>
                        <ul className='navbar-nav me-auto mb-lg-0'>
                            <li className='nav-item'>
                                <Link className='nav-link active' aria-current='page' to='#'>
                                    知识库
                                </Link>
                            </li>
                            <li className='nav-item'>
                                <Link className='nav-link' to='#'>
                                    Chat
                                </Link>
                            </li>
                        </ul>
                        {!!user ? (
                            <div className='flex-shrink-0 dropdown'>
                                <a
                                    href='#'
                                    className='d-block link-dark text-decoration-none dropdown-toggle'
                                    data-bs-toggle='dropdown'
                                    aria-expanded='false'
                                >
                                    {/* <img
                                        src='https://github.com/mdo.png'
                                        alt='mdo'
                                        width='32'
                                        height='32'
                                        className='rounded-circle'
                                    /> */}
                                    Hi, { user.username }
                                </a>
                                <ul
                                    className='dropdown-menu text-small shadow'
                                    style={{
                                        position: 'absolute',
                                        inset: '0px 0px auto auto',
                                        margin: '0px',
                                        transform: 'translate(0px, 34px)',
                                    }}
                                >
                                    <li>
                                        <Link className='dropdown-item' to='#'>
                                            Settings
                                        </Link>
                                    </li>
                                    <li>
                                        <Link className='dropdown-item' to='#'>
                                            Profile
                                        </Link>
                                    </li>
                                    <li>
                                        <hr className='dropdown-divider' />
                                    </li>
                                    <li>
                                        <Link className='dropdown-item' to='#' onClick={handleLogout}>
                                            Sign out
                                        </Link>
                                    </li>
                                </ul>
                            </div>
                        ) : (
                            <>
                                <hr className='d-lg-none' />
                                <ul className='navbar-nav mb-2 mb-lg-0'>
                                    <li className='nav-item'>
                                        <Link className='nav-link text-dark' to='/login'>
                                            Log in
                                        </Link>
                                    </li>
                                    <li className='nav-item'>
                                        <Link className='nav-link text-dark' to='/signup'>
                                            Sign up
                                        </Link>
                                    </li>
                                </ul>
                            </>
                        )}
                    </div>
                </div>
            </nav>
        </header>
    );
}