43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
|
'use client'
|
|||
|
|
import {PanelLeftCloseIcon, PanelLeftOpenIcon} from 'lucide-react'
|
|||
|
|
import {Button} from '@/components/ui/button'
|
|||
|
|
import Profile from './profile'
|
|||
|
|
import {useLayoutStore} from '@/components/providers/StoreProvider'
|
|||
|
|
import {merge} from '@/lib/utils'
|
|||
|
|
|
|||
|
|
export type HeaderProps = {}
|
|||
|
|
|
|||
|
|
export default function Header(props: HeaderProps) {
|
|||
|
|
|
|||
|
|
const navbar = useLayoutStore(store => store.navbar)
|
|||
|
|
const toggleNavbar = useLayoutStore(store => store.toggleNavbar)
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<header className={merge(
|
|||
|
|
`flex-none h-16`,
|
|||
|
|
`flex items-stretch`,
|
|||
|
|
)}>
|
|||
|
|
{/* left */}
|
|||
|
|
<div className={`flex-auto flex items-center gap-2`}>
|
|||
|
|
<Button
|
|||
|
|
theme="ghost"
|
|||
|
|
className="w-9 h-9"
|
|||
|
|
onClick={toggleNavbar}>
|
|||
|
|
{navbar
|
|||
|
|
? <PanelLeftCloseIcon/>
|
|||
|
|
: <PanelLeftOpenIcon/>
|
|||
|
|
}
|
|||
|
|
</Button>
|
|||
|
|
<span>
|
|||
|
|
欢迎来到，蓝狐代理
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* right */}
|
|||
|
|
<div className={`flex-none flex items-center justify-end pr-4`}>
|
|||
|
|
<Profile/>
|
|||
|
|
</div>
|
|||
|
|
</header>
|
|||
|
|
)
|
|||
|
|
}
|