Responsive everything.

This commit is contained in:
Mike Cao 2025-10-16 02:42:13 -07:00
parent 9df012084d
commit 4d2a7ea947
23 changed files with 286 additions and 287 deletions

View file

@ -12,6 +12,7 @@ import {
Column,
Pressable,
IconLabel,
useBreakpoint,
} from '@umami/react-zen';
import { useConfig, useLoginQuery, useMessages, useNavigation } from '@/components/hooks';
import {
@ -39,9 +40,11 @@ export function NavButton({ showText = true }: TeamsButtonProps) {
const { cloudMode } = useConfig();
const { formatMessage, labels } = useMessages();
const { teamId } = useNavigation();
const breakpoint = useBreakpoint();
const team = user?.teams?.find(({ id }) => id === teamId);
const selectedKeys = new Set([teamId || 'user']);
const label = teamId ? team?.name : user.username;
const isMobile = ['xs', 'sm', 'md'].includes(breakpoint);
const getUrl = (url: string) => {
return cloudMode ? `${process.env.cloudUrl}${url}` : url;
@ -82,7 +85,7 @@ export function NavButton({ showText = true }: TeamsButtonProps) {
<MenuItem id="teams" showChecked={false} showSubMenuIcon>
<IconLabel icon={<Switch />} label={formatMessage(labels.switchAccount)} />
</MenuItem>
<Popover placement="right top">
<Popover placement={isMobile ? 'bottom start' : 'right top'}>
<Column minWidth="300px">
<Menu selectionMode="single" selectedKeys={selectedKeys}>
<MenuSection title={formatMessage(labels.myAccount)}>