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

@@ -1,7 +1,8 @@
import { Grid, Column } from '@umami/react-zen';
import { Grid, Column, Row } from '@umami/react-zen';
import { useMessages, useNavigation } from '@/components/hooks';
import { MetricsExpandedTable } from '@/components/metrics/MetricsExpandedTable';
import { WebsiteExpandedMenu } from '@/app/(main)/websites/[websiteId]/WebsiteExpandedMenu';
import { MobileMenu } from '@/components/common/MobileMenu';
export function WebsiteExpandedView({
websiteId,
@@ -18,24 +19,33 @@ export function WebsiteExpandedView({
} = useNavigation();
return (
<Grid columns={{ xs: '1fr', md: 'auto 1fr' }} gap="6" height="100%" overflow="hidden">
<Column
display={{ xs: 'none', md: 'flex' }}
gap="6"
border="right"
paddingRight="3"
overflowY="auto"
>
<WebsiteExpandedMenu excludedIds={excludedIds} />
</Column>
<Column overflow="hidden">
<MetricsExpandedTable
title={formatMessage(labels[view])}
type={view}
websiteId={websiteId}
onClose={onClose}
/>
</Column>
</Grid>
<Column gap>
<Row display={{ xs: 'flex', md: 'none' }}>
<MobileMenu>
{({ close }) => {
return <WebsiteExpandedMenu excludedIds={excludedIds} onItemClick={close} />;
}}
</MobileMenu>
</Row>
<Grid columns={{ xs: '1fr', md: 'auto 1fr' }} gap="6" height="100%" overflow="hidden">
<Column
display={{ xs: 'none', md: 'flex' }}
gap="6"
border="right"
paddingRight="3"
overflow="auto"
>
<WebsiteExpandedMenu excludedIds={excludedIds} />
</Column>
<Column overflow="hidden">
<MetricsExpandedTable
title={formatMessage(labels[view])}
type={view}
websiteId={websiteId}
onClose={onClose}
/>
</Column>
</Grid>
</Column>
);
}