106 lines
3.2 KiB
TypeScript
106 lines
3.2 KiB
TypeScript
import { Link, routes } from '@redwoodjs/router'
|
|
|
|
import { useAuth } from 'src/auth'
|
|
import ThemeChanger from 'src/components/ThemeChanger/ThemeChanger'
|
|
|
|
import SettingValue from '../Setting/SettingValue/SettingValue'
|
|
|
|
const HeaderBar = () => {
|
|
const { logOut } = useAuth()
|
|
|
|
return (
|
|
<div className="navbar bg-base-100">
|
|
<div className="flex-1">
|
|
<Link className="btn btn-ghost text-xl" to="${routes.home()}">
|
|
<SettingValue name="title" />
|
|
</Link>
|
|
</div>
|
|
<div className="flex-none">
|
|
<ul className="menu menu-horizontal px-1">
|
|
<li>
|
|
<Link to={routes.home()}>Home</Link>
|
|
</li>
|
|
<li>
|
|
<details>
|
|
<summary>Parent</summary>
|
|
<ul className="rounded-t-none bg-base-100 p-2">
|
|
<li>
|
|
<a>Link 1</a>
|
|
</li>
|
|
<li>
|
|
<a>Link 2</a>
|
|
</li>
|
|
</ul>
|
|
</details>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div className="dropdown dropdown-end">
|
|
<div tabIndex={0} role="button" className="btn btn-circle btn-ghost">
|
|
<div className="indicator">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className="h-5 w-5"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
|
|
/>
|
|
</svg>
|
|
<span className="badge indicator-item badge-sm">8</span>
|
|
</div>
|
|
</div>
|
|
<div className="card dropdown-content card-compact z-[1] mt-3 w-52 bg-base-100 shadow">
|
|
<div className="card-body">
|
|
<span className="text-lg font-bold">8 Items</span>
|
|
<span className="text-info">Subtotal: $999</span>
|
|
<div className="card-actions">
|
|
<button className="btn btn-primary btn-block">View cart</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="dropdown dropdown-end">
|
|
<div
|
|
tabIndex={0}
|
|
role="button"
|
|
className="avatar btn btn-circle btn-ghost"
|
|
>
|
|
<div className="w-10 rounded-full">
|
|
<img
|
|
alt="Tailwind CSS Navbar component"
|
|
src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<ul className="menu dropdown-content menu-sm z-[1] mt-3 w-52 rounded-box bg-base-100 p-2 shadow">
|
|
<li>
|
|
<a className="justify-between">
|
|
Profile
|
|
<span className="badge">New</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a>Settings</a>
|
|
</li>
|
|
<li>
|
|
<ThemeChanger />
|
|
</li>
|
|
<li>
|
|
<Link onClick={logOut} to={routes.home()}>
|
|
Logout
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default HeaderBar
|