KnowledgeBase_frontend/src/layouts/HeaderWithNav.jsx

import React from 'react';

export default function HeaderWithNav() {
    return (
        <header className='p-3 mb-3 border-bottom'>
            <div className='container'>
                <div className='d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start'>
                    <a
                        href='/'
                        className='d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none'
                    >
                        {/* <svg className='bi me-2' width='40' height='32'>
                            <use xlink:href='#bootstrap' />
                        </svg> */}
                        <span className='fs-4'>OOIN 智能知识库</span>
                    </a>

                    <ul className='nav col-12 col-lg-auto col-md-auto me-lg-auto mb-2 justify-content-center mb-md-0'>
                        <li>
                            <a href='#' className='nav-link px-2 link-dark'>
                                知识库
                            </a>
                        </li>
                        <li>
                            <a href='#' className='nav-link px-2 link-secondary'>
                                Chat
                            </a>
                        </li>
                    </ul>

                    <ul className='nav'>
                        <li className='nav-item'>
                            <a href='#' className='nav-link link-dark px-2'>
                                Login
                            </a>
                        </li>
                        <li className='nav-item'>
                            <a href='#' className='nav-link link-dark px-2'>
                                Sign up
                            </a>
                        </li>
                    </ul>

                    {/* <div className='dropdown text-end'>
                        <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'
                            />
                        </a>
                        <ul className='dropdown-menu text-small'>
                            <li>
                                <a className='dropdown-item' href='#'>
                                    Settings
                                </a>
                            </li>
                            <li>
                                <a className='dropdown-item' href='#'>
                                    Profile
                                </a>
                            </li>
                            <li>
                                <hr className='dropdown-divider' />
                            </li>
                            <li>
                                <a className='dropdown-item' href='#'>
                                    Sign out
                                </a>
                            </li>
                        </ul>
                    </div> */}
                </div>
            </div>
        </header>
    );
}