watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2025-12-08 05:12:36 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

WIP: Nav merge

Browse source
This commit is contained in:
Mike Cao 2025-09-25 15:58:25 -07:00
parent dfc6161a53
commit 805b3ec853
4 changed files with 98 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

101
src/components/input/NavButton.tsx
View file

@ -6,27 +6,48 @@ import {
MenuTrigger,
MenuSection,
MenuSeparator,
SubmenuTrigger,
Popover,
Row,
Column,
Pressable,
IconLabel,
} from '@umami/react-zen';
import { useLoginQuery, useMessages, useNavigation } from '@/components/hooks';
import { ChevronRight, User, Users } from '@/components/icons';
import { useConfig, useLoginQuery, useMessages, useNavigation } from '@/components/hooks';
import {
BookText,
ChevronRight,
ExternalLink,
LifeBuoy,
LockKeyhole,
LogOut,
Settings,
User,
Users,
} from '@/components/icons';
import { DOCS_URL } from '@/lib/constants';
import * as url from 'node:url';
export interface TeamsButtonProps {
showText?: boolean;
onAction?: (id: any) => void;
}
export function NavButton({ showText = true, onAction }: TeamsButtonProps) {
export function NavButton({ showText = true }: TeamsButtonProps) {
const { user } = useLoginQuery();
const { cloudMode } = useConfig();
const { formatMessage, labels } = useMessages();
const { teamId } = useNavigation();
const team = user?.teams?.find(({ id }) => id === teamId);
const selectedKeys = new Set([teamId || 'user']);
const label = teamId ? team?.name : user.username;
const getUrl = (url: string) => {
return cloudMode ? `${process.env.cloudUrl}/${url}` : url;
};
const handleAction = async () => {};
return (
<MenuTrigger>
<Pressable>
@ -58,31 +79,67 @@ export function NavButton({ showText = true, onAction }: TeamsButtonProps) {
selectionMode="single"
selectedKeys={selectedKeys}
autoFocus="last"
onAction={onAction}
onAction={handleAction}
>
<MenuSection title={formatMessage(labels.myAccount)}>
<MenuItem id={'user'}>
<Row alignItems="center" gap>
<Icon>
<User />
</Icon>
<Text wrap="nowrap">{user.username}</Text>
</Row>
<MenuItem id="user">
<IconLabel icon={<User />} label={user.username} />
</MenuItem>
</MenuSection>
<MenuSeparator />
<MenuSection title={formatMessage(labels.teams)}>
{user?.teams?.map(({ id, name }) => (
<MenuItem key={id} id={id}>
<Row alignItems="center" gap>
<Icon size="sm">
<Users />
</Icon>
<Text wrap="nowrap">{name}</Text>
</Row>
<SubmenuTrigger>
<MenuItem id="teams" showChecked={false} showSubMenuIcon>
<IconLabel icon={<Users />} label={formatMessage(labels.teams)} />
</MenuItem>
<Popover placement="right top">
<Column minWidth="300px">
<Menu>
<MenuSection title={formatMessage(labels.teams)}>
{user?.teams?.map(({ id, name }) => (
<MenuItem key={id} id={id}>
<Row alignItems="center" gap>
<Icon size="sm">
<Users />
</Icon>
<Text wrap="nowrap">{name}</Text>
</Row>
</MenuItem>
))}
</MenuSection>
</Menu>
</Column>
</Popover>
</SubmenuTrigger>
<MenuItem id="settings" icon={<Settings />} label={formatMessage(labels.settings)} />
{cloudMode && (
<>
<MenuItem
id="docs"
href={DOCS_URL}
target="_blank"
icon={<BookText />}
label={formatMessage(labels.documentation)}
>
<Icon color="muted">
<ExternalLink />
</Icon>
</MenuItem>
))}
</MenuSection>
<MenuItem
id="support"
href={getUrl('/settings/support')}
icon={<LifeBuoy />}
label={formatMessage(labels.support)}
/>
</>
)}
{user.isAdmin && (
<>
<MenuSeparator />
<MenuItem id="/admin" icon={<LockKeyhole />} label={formatMessage(labels.admin)} />
</>
)}
<MenuSeparator />
<MenuItem id="/logout" icon={<LogOut />} label={formatMessage(labels.logout)} />
</Menu>
</Column>
</Popover>