susieshi/KnowledgeBase_frontend
1
0
Fork 0
mirror of https://github.com/Funkoala14/KnowledgeBase_OOIN.git synced 2025-06-08 12:01:53 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

[dev]change responsive header

Browse Source
This commit is contained in:
susie-laptop 2025-02-28 17:05:36 -05:00
parent 26c81c1fd8
commit 445c30ba0b
1 changed files with 39 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
src/layouts/HeaderWithNav.jsx
View File

@ -2,83 +2,52 @@ import React from 'react';
export default function HeaderWithNav() { export default function HeaderWithNav() {
return ( return (
<header className='p-3 mb-3 border-bottom'> <header className=' navbar navbar-expand-lg'>
<div className='container'> <nav class='navbar navbar-expand-lg border-bottom p-3 mb-3 w-100'>
<div className='d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start'> <div class='container-fluid'>
<a <a class='navbar-brand' href='#'>
href='/' OOIN 智能知识库
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> </a>
<button
<ul className='nav col-12 col-lg-auto col-md-auto me-lg-auto mb-2 justify-content-center mb-md-0'> class='navbar-toggler'
<li> type='button'
<a href='#' className='nav-link px-2 link-dark'> data-bs-toggle='collapse'
知识库 data-bs-target='#navbarText'
</a> aria-controls='navbarText'
</li> aria-expanded='false'
<li> aria-label='Toggle navigation'
<a href='#' className='nav-link px-2 link-secondary'> >
Chat <span class='navbar-toggler-icon'></span>
</a> </button>
</li> <div class='collapse navbar-collapse' id='navbarText'>
</ul> <ul class='navbar-nav me-auto mb-lg-0'>
<li class='nav-item'>
<ul className='nav'> <a class='nav-link active' aria-current='page' href='#'>
<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> </a>
</li> </li>
<li> <li class='nav-item'>
<a className='dropdown-item' href='#'> <a class='nav-link' href='#'>
Profile Chat
</a>
</li>
<li>
<hr className='dropdown-divider' />
</li>
<li>
<a className='dropdown-item' href='#'>
Sign out
</a> </a>
</li> </li>
</ul> </ul>
</div> */} <hr className='d-lg-none'/>
<ul class='navbar-nav mb-2 mb-lg-0'>
<li class='nav-item'>
<a class='nav-link text-dark' href='#'>
Log in
</a>
</li>
<li class='nav-item'>
<a class='nav-link text-dark' href='#'>
Sign up
</a>
</li>
</ul>
</div>
</div> </div>
</div> </nav>
</header> </header>
); );
} }