KnowledgeBase_frontend/src/layouts/HeaderWithNav.jsx

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

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

    const handleLogout = async () => {
        try {
            await dispatch(logoutThunk()).unwrap();
            sessionStorage.removeItem('token');
            navigate('/login');
        } catch (error) {}
    };

    // Check if the current path starts with the given path
    const isActive = (path) => {
        return location.pathname.startsWith(path);
    };

    return (
        <header className=' navbar navbar-expand-lg p-0'>
            <nav className='navbar navbar-expand-lg border-bottom p-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 ${isActive('/') && !isActive('/chat') ? 'active' : ''}`}
                                    aria-current='page'
                                    to='/'
                                >
                                    知识库
                                </Link>
                            </li>
                            <li className='nav-item'>
                                <Link className={`nav-link ${isActive('/chat') ? 'active' : ''}`} to='/chat'>
                                    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'
                                >
                                    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>
    );
}