Updated nav.

This commit is contained in:
Mike Cao 2025-07-23 17:47:56 -07:00
parent 25f96f6b6b
commit a025fc9552
11 changed files with 971 additions and 1005 deletions

View file

@ -11,8 +11,8 @@ import {
Text,
} from '@umami/react-zen';
import { useRouter } from 'next/navigation';
import { User, LogOut, CircleUserRound } from 'lucide-react';
import { useMessages, useLoginQuery } from '@/components/hooks';
import { LogOut, Settings, UserCircle, LockKeyhole } from '@/components/icons';
export function ProfileButton() {
const { formatMessage, labels } = useMessages();
@ -21,31 +21,34 @@ export function ProfileButton() {
const cloudMode = !!process.env.cloudMode;
const handleSelect = (key: Key) => {
if (key === 'profile') {
router.push('/settings/profile');
}
if (key === 'logout') {
router.push('/logout');
}
router.push(`/${key}`);
};
return (
<MenuTrigger>
<Button data-test="button-profile" variant="quiet">
<Icon>
<CircleUserRound />
<UserCircle />
</Icon>
</Button>
<Popover placement="bottom end">
<Menu autoFocus="last" onAction={handleSelect}>
<MenuSection title={user.username}>
<MenuSeparator />
<MenuItem id="profile">
<MenuItem id="settings">
<Icon>
<User />
<Settings />
</Icon>
<Text>{formatMessage(labels.profile)}</Text>
<Text>{formatMessage(labels.settings)}</Text>
</MenuItem>
{user.isAdmin && (
<MenuItem id="admin">
<Icon>
<LockKeyhole />
</Icon>
<Text>{formatMessage(labels.admin)}</Text>
</MenuItem>
)}
{!cloudMode && (
<MenuItem data-test="item-logout" id="logout">
<Icon>

View file

@ -3,7 +3,6 @@ import { useRouter } from 'next/navigation';
import {
Text,
Icon,
Button,
Menu,
MenuItem,
MenuTrigger,
@ -12,6 +11,8 @@ import {
Popover,
Row,
Box,
SidebarItem,
Pressable,
} from '@umami/react-zen';
import { useLoginQuery, useMessages, useUserTeamsQuery, useNavigation } from '@/components/hooks';
import { Chevron, User, Users } from '@/components/icons';
@ -35,19 +36,20 @@ export function TeamsButton({ showText = true }: { showText?: boolean }) {
return (
<MenuTrigger>
<Button variant="quiet">
<Row alignItems="center" justifyContent="space-between" width="100%" gap>
<Row alignItems="center" gap>
<Icon>{teamId ? <Users /> : <User />}</Icon>
{showText && <Text truncate>{teamId ? team?.name : user.username}</Text>}
<Pressable>
<SidebarItem
label={teamId ? team?.name : user.username}
icon={teamId ? <Users /> : <User />}
>
<Row alignItems="center" justifyContent="space-between" width="100%" gap>
{showText && (
<Icon rotate={90} size="sm">
<Chevron />
</Icon>
)}
</Row>
{showText && (
<Icon rotate={90} size="sm">
<Chevron />
</Icon>
)}
</Row>
</Button>
</SidebarItem>
</Pressable>
<Popover placement="bottom start">
<Box minWidth="300px">
<Menu