99 lines
2.6 KiB
TypeScript
99 lines
2.6 KiB
TypeScript
import type { ToOptions } from '@tanstack/react-router';
|
|
import useCommand from '@/hooks/useCommand';
|
|
import { bindings } from '@/main';
|
|
import { Link } from '@tanstack/react-router';
|
|
import { Bell01Icon, Cloud01Icon, TerminalBrowserIcon } from '@untitled-theme/icons-react';
|
|
import { MenuTrigger } from 'react-aria-components';
|
|
import Button from './base/Button';
|
|
import Menu from './base/Menu';
|
|
import PlayerHead from './content/PlayerHead';
|
|
import AccountPopup from './overlay/popups/AccountPopup';
|
|
|
|
function Navbar() {
|
|
const defaultUser = useCommand('getDefaultUser', () => bindings.commands.getDefaultUser(false));
|
|
|
|
return (
|
|
<div className="h-15 min-h-15 flex flex-row items-center *:flex-1">
|
|
<div className="flex items-start justify-start">
|
|
<div className="flex items-start justify-start transition-transform active:scale-90">
|
|
{/* <OneLauncherText width={260} /> */}
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-row items-center gap-x-10 py-1">
|
|
<NavbarLink label="Home" path="/app" />
|
|
<NavbarLink label="Browser" path="/app/browser" />
|
|
<NavbarLink label="Settings" path="/app/settings" />
|
|
</div>
|
|
<div className="relative flex flex-row items-center justify-end gap-x-2">
|
|
<Button color="ghost" size="icon">
|
|
<TerminalBrowserIcon />
|
|
</Button>
|
|
|
|
<Button color="ghost" size="icon">
|
|
<Cloud01Icon />
|
|
</Button>
|
|
|
|
{/* Notification Manager Button */}
|
|
<div className="relative">
|
|
<MenuTrigger>
|
|
<Button color="ghost" size="icon">
|
|
<Bell01Icon />
|
|
</Button>
|
|
|
|
<Menu.Popover placement="bottom right">
|
|
<Menu>
|
|
<Menu.Item>Hello World</Menu.Item>
|
|
</Menu>
|
|
</Menu.Popover>
|
|
</MenuTrigger>
|
|
|
|
{/* <NotificationPopup
|
|
className="mt-2"
|
|
mount={notificationButtonContainer}
|
|
ref={el => el.classList.add('right-0')}
|
|
setVisible={setNotificationMenuOpen}
|
|
visible={notificationMenuOpen}
|
|
/> */}
|
|
</div>
|
|
|
|
<MenuTrigger>
|
|
<Button className="p-0" color="ghost" size="icon">
|
|
<PlayerHead className="h-full rounded-md hover:opacity-70" uuid={defaultUser.data?.id} />
|
|
</Button>
|
|
|
|
<Menu.Popover>
|
|
<AccountPopup />
|
|
</Menu.Popover>
|
|
</MenuTrigger>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Navbar;
|
|
|
|
function NavbarLink({
|
|
path,
|
|
label,
|
|
}: {
|
|
path: ToOptions['to'];
|
|
label: string;
|
|
}) {
|
|
return (
|
|
<Link
|
|
activeOptions={{
|
|
exact: true,
|
|
}}
|
|
activeProps={{
|
|
className: 'text-fg-primary',
|
|
}}
|
|
className="flex-1 text-center rounded-lg px-4 py-1 text-lg hover:bg-component-bg-hover hover:text-fg-primary-hover"
|
|
inactiveProps={{
|
|
className: 'text-fg-secondary',
|
|
}}
|
|
to={path}
|
|
>
|
|
{label}
|
|
</Link>
|
|
);
|
|
}
|