web-humas-fe/components/navbar/HumasNavbarWrapper.tsx

51 lines
2.2 KiB
TypeScript

'use client'
import { Navbar, NavbarContent } from '@nextui-org/navbar';
import { Avatar, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger } from '@nextui-org/react';
import React from 'react'
import { ThemeSwitch } from '../theme-switch';
interface Props {
children: React.ReactNode;
pageTitle?: string;
}
export default function HumasNavbarWrapper({ children }: Props) {
return (
<div className='relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden max-h-screen bg-transparent'>
<Navbar className='w-full bg-slate-100 dark:bg-[#16213E]'
isBordered
classNames={{
wrapper: "w-full max-w-full"
}}>
<NavbarContent as="div" justify="end">
<Dropdown placement="bottom-end">
<DropdownTrigger>
<Avatar
isBordered
as="button"
className="transition-transform"
color="secondary"
name="Jason Hughes"
size="sm"
src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
/>
</DropdownTrigger>
<DropdownMenu aria-label="Profile Actions" variant="flat">
<DropdownItem key="profile" className="h-14 gap-2">
<p className="font-semibold">Signed in as</p>
<p className="font-semibold">zoey@example.com</p>
</DropdownItem>
<DropdownItem key="settings">My Settings</DropdownItem>
<DropdownItem key="logout" color="danger">
Log Out
</DropdownItem>
<DropdownItem key="theme"><ThemeSwitch /> </DropdownItem>
</DropdownMenu>
</Dropdown>
</NavbarContent>
</Navbar>
{children}
</div>
)
}