From 14981717b90375ca8b120f93bc7d8d0e656251ef Mon Sep 17 00:00:00 2001
From: Mike Cao <moocao@gmail.com>
Date: Fri, 10 Oct 2025 17:28:53 -0700
Subject: [PATCH] Responsive updates.

---
 src/app/(main)/App.tsx                        |  11 +-
 src/app/(main)/SideNav.tsx                    |  70 ++++---
 .../[websiteId]/WebsiteExpandedMenu.tsx       | 177 +++++++++++++++++
 .../[websiteId]/WebsiteExpandedView.tsx       | 180 +-----------------
 src/components/common/Panel.tsx               |   5 +-
 5 files changed, 231 insertions(+), 212 deletions(-)
 create mode 100644 src/app/(main)/websites/[websiteId]/WebsiteExpandedMenu.tsx

diff --git a/src/app/(main)/App.tsx b/src/app/(main)/App.tsx
index c3f88c5b..04ef1b5f 100644
--- a/src/app/(main)/App.tsx
+++ b/src/app/(main)/App.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { Grid, Loading, Column } from '@umami/react-zen';
+import { Grid, Loading, Column, Row } from '@umami/react-zen';
 import Script from 'next/script';
 import { UpdateNotice } from './UpdateNotice';
 import { SideNav } from '@/app/(main)/SideNav';
@@ -28,11 +28,14 @@ export function App({ children }) {
   }
 
   return (
-    <Grid height="100vh" width="100%" columns="auto 1fr" backgroundColor="2">
-      <Column>
+    <Grid columns={{ xs: '1fr', md: 'auto 1fr' }} height="100vh" width="100%" backgroundColor="2">
+      <Row display={{ xs: 'flex', md: 'none' }} alignItems="center" gap>
+        oh hi
+      </Row>
+      <Column display={{ xs: 'none', md: 'flex' }}>
         <SideNav />
       </Column>
-      <Column alignItems="center" overflow="auto" position="relative">
+      <Column alignItems="center" overflowY="auto" overflowX="hidden" position="relative">
         {children}
       </Column>
       <UpdateNotice user={user} config={config} />
diff --git a/src/app/(main)/SideNav.tsx b/src/app/(main)/SideNav.tsx
index 4a4985fd..32e3e397 100644
--- a/src/app/(main)/SideNav.tsx
+++ b/src/app/(main)/SideNav.tsx
@@ -49,41 +49,39 @@ export function SideNav(props: SidebarProps) {
   };
 
   return (
-    <Row height="100%" backgroundColor>
-      <Sidebar {...props} isCollapsed={isCollapsed || hasNav}>
-        <SidebarSection onClick={() => setIsCollapsed(false)}>
-          <SidebarHeader
-            label="umami"
-            icon={isCollapsed && !hasNav ? <PanelLeft /> : <Logo />}
-            style={{ maxHeight: 40 }}
-          >
-            {!isCollapsed && !hasNav && <PanelButton />}
-          </SidebarHeader>
-        </SidebarSection>
-        <SidebarSection paddingTop="0" paddingBottom="0" justifyContent="center">
-          <NavButton showText={!hasNav && !isCollapsed} onAction={handleSelect} />
-        </SidebarSection>
-        <SidebarSection flexGrow={1}>
-          {links.map(({ id, path, label, icon }) => {
-            return (
-              <Link key={id} href={renderUrl(path, false)} role="button">
-                <SidebarItem
-                  label={label}
-                  icon={icon}
-                  isSelected={pathname.includes(path)}
-                  role="button"
-                />
-              </Link>
-            );
-          })}
-        </SidebarSection>
-        <SidebarSection justifyContent="flex-start">
-          <Row wrap="wrap">
-            <LanguageButton />
-            <ThemeButton />
-          </Row>
-        </SidebarSection>
-      </Sidebar>
-    </Row>
+    <Sidebar {...props} isCollapsed={isCollapsed || hasNav} backgroundColor>
+      <SidebarSection onClick={() => setIsCollapsed(false)}>
+        <SidebarHeader
+          label="umami"
+          icon={isCollapsed && !hasNav ? <PanelLeft /> : <Logo />}
+          style={{ maxHeight: 40 }}
+        >
+          {!isCollapsed && !hasNav && <PanelButton />}
+        </SidebarHeader>
+      </SidebarSection>
+      <SidebarSection paddingTop="0" paddingBottom="0" justifyContent="center">
+        <NavButton showText={!hasNav && !isCollapsed} onAction={handleSelect} />
+      </SidebarSection>
+      <SidebarSection flexGrow={1}>
+        {links.map(({ id, path, label, icon }) => {
+          return (
+            <Link key={id} href={renderUrl(path, false)} role="button">
+              <SidebarItem
+                label={label}
+                icon={icon}
+                isSelected={pathname.includes(path)}
+                role="button"
+              />
+            </Link>
+          );
+        })}
+      </SidebarSection>
+      <SidebarSection justifyContent="flex-start">
+        <Row wrap="wrap">
+          <LanguageButton />
+          <ThemeButton />
+        </Row>
+      </SidebarSection>
+    </Sidebar>
   );
 }
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteExpandedMenu.tsx b/src/app/(main)/websites/[websiteId]/WebsiteExpandedMenu.tsx
new file mode 100644
index 00000000..f2d653d5
--- /dev/null
+++ b/src/app/(main)/websites/[websiteId]/WebsiteExpandedMenu.tsx
@@ -0,0 +1,177 @@
+import { useMessages, useNavigation } from '@/components/hooks';
+import { SideMenu } from '@/components/common/SideMenu';
+import {
+  LogOut,
+  LogIn,
+  Search,
+  Type,
+  SquareSlash,
+  Share2,
+  Megaphone,
+  Earth,
+  Globe,
+  Landmark,
+  MapPin,
+  AppWindow,
+  Laptop,
+  Languages,
+  Monitor,
+  Cpu,
+  Network,
+  Tag,
+} from '@/components/icons';
+import { Lightning } from '@/components/svg';
+
+export function WebsiteExpandedMenu({ excludedIds = [] }: { excludedIds?: string[] }) {
+  const { formatMessage, labels } = useMessages();
+  const {
+    updateParams,
+    query: { view },
+  } = useNavigation();
+
+  const filterExcluded = (item: { id: string }) => !excludedIds.includes(item.id);
+
+  const items = [
+    {
+      label: 'URL',
+      items: [
+        {
+          id: 'path',
+          label: formatMessage(labels.path),
+          path: updateParams({ view: 'path' }),
+          icon: <SquareSlash />,
+        },
+        {
+          id: 'entry',
+          label: formatMessage(labels.entry),
+          path: updateParams({ view: 'entry' }),
+          icon: <LogIn />,
+        },
+        {
+          id: 'exit',
+          label: formatMessage(labels.exit),
+          path: updateParams({ view: 'exit' }),
+          icon: <LogOut />,
+        },
+        {
+          id: 'title',
+          label: formatMessage(labels.title),
+          path: updateParams({ view: 'title' }),
+          icon: <Type />,
+        },
+        {
+          id: 'query',
+          label: formatMessage(labels.query),
+          path: updateParams({ view: 'query' }),
+          icon: <Search />,
+        },
+      ].filter(filterExcluded),
+    },
+    {
+      label: formatMessage(labels.sources),
+      items: [
+        {
+          id: 'referrer',
+          label: formatMessage(labels.referrer),
+          path: updateParams({ view: 'referrer' }),
+          icon: <Share2 />,
+        },
+        {
+          id: 'channel',
+          label: formatMessage(labels.channel),
+          path: updateParams({ view: 'channel' }),
+          icon: <Megaphone />,
+        },
+        {
+          id: 'domain',
+          label: formatMessage(labels.domain),
+          path: updateParams({ view: 'domain' }),
+          icon: <Globe />,
+        },
+      ].filter(filterExcluded),
+    },
+    {
+      label: formatMessage(labels.location),
+      items: [
+        {
+          id: 'country',
+          label: formatMessage(labels.country),
+          path: updateParams({ view: 'country' }),
+          icon: <Earth />,
+        },
+        {
+          id: 'region',
+          label: formatMessage(labels.region),
+          path: updateParams({ view: 'region' }),
+          icon: <MapPin />,
+        },
+        {
+          id: 'city',
+          label: formatMessage(labels.city),
+          path: updateParams({ view: 'city' }),
+          icon: <Landmark />,
+        },
+      ].filter(filterExcluded),
+    },
+    {
+      label: formatMessage(labels.environment),
+      items: [
+        {
+          id: 'browser',
+          label: formatMessage(labels.browser),
+          path: updateParams({ view: 'browser' }),
+          icon: <AppWindow />,
+        },
+        {
+          id: 'os',
+          label: formatMessage(labels.os),
+          path: updateParams({ view: 'os' }),
+          icon: <Cpu />,
+        },
+        {
+          id: 'device',
+          label: formatMessage(labels.device),
+          path: updateParams({ view: 'device' }),
+          icon: <Laptop />,
+        },
+        {
+          id: 'language',
+          label: formatMessage(labels.language),
+          path: updateParams({ view: 'language' }),
+          icon: <Languages />,
+        },
+        {
+          id: 'screen',
+          label: formatMessage(labels.screen),
+          path: updateParams({ view: 'screen' }),
+          icon: <Monitor />,
+        },
+      ].filter(filterExcluded),
+    },
+    {
+      label: formatMessage(labels.other),
+      items: [
+        {
+          id: 'event',
+          label: formatMessage(labels.event),
+          path: updateParams({ view: 'event' }),
+          icon: <Lightning />,
+        },
+        {
+          id: 'hostname',
+          label: formatMessage(labels.hostname),
+          path: updateParams({ view: 'hostname' }),
+          icon: <Network />,
+        },
+        {
+          id: 'tag',
+          label: formatMessage(labels.tag),
+          path: updateParams({ view: 'tag' }),
+          icon: <Tag />,
+        },
+      ].filter(filterExcluded),
+    },
+  ];
+
+  return <SideMenu items={items} selectedKey={view} />;
+}
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx b/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx
index b90a6da0..3fc6a1de 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx
@@ -1,28 +1,7 @@
 import { Grid, Column } from '@umami/react-zen';
 import { useMessages, useNavigation } from '@/components/hooks';
 import { MetricsExpandedTable } from '@/components/metrics/MetricsExpandedTable';
-import { SideMenu } from '@/components/common/SideMenu';
-import {
-  LogOut,
-  LogIn,
-  Search,
-  Type,
-  SquareSlash,
-  Share2,
-  Megaphone,
-  Earth,
-  Globe,
-  Landmark,
-  MapPin,
-  AppWindow,
-  Laptop,
-  Languages,
-  Monitor,
-  Cpu,
-  Network,
-  Tag,
-} from '@/components/icons';
-import { Lightning } from '@/components/svg';
+import { WebsiteExpandedMenu } from '@/app/(main)/websites/[websiteId]/WebsiteExpandedMenu';
 
 export function WebsiteExpandedView({
   websiteId,
@@ -35,158 +14,19 @@ export function WebsiteExpandedView({
 }) {
   const { formatMessage, labels } = useMessages();
   const {
-    updateParams,
     query: { view },
   } = useNavigation();
 
-  const filterExcluded = (item: { id: string }) => !excludedIds.includes(item.id);
-
-  const items = [
-    {
-      label: 'URL',
-      items: [
-        {
-          id: 'path',
-          label: formatMessage(labels.path),
-          path: updateParams({ view: 'path' }),
-          icon: <SquareSlash />,
-        },
-        {
-          id: 'entry',
-          label: formatMessage(labels.entry),
-          path: updateParams({ view: 'entry' }),
-          icon: <LogIn />,
-        },
-        {
-          id: 'exit',
-          label: formatMessage(labels.exit),
-          path: updateParams({ view: 'exit' }),
-          icon: <LogOut />,
-        },
-        {
-          id: 'title',
-          label: formatMessage(labels.title),
-          path: updateParams({ view: 'title' }),
-          icon: <Type />,
-        },
-        {
-          id: 'query',
-          label: formatMessage(labels.query),
-          path: updateParams({ view: 'query' }),
-          icon: <Search />,
-        },
-      ].filter(filterExcluded),
-    },
-    {
-      label: formatMessage(labels.sources),
-      items: [
-        {
-          id: 'referrer',
-          label: formatMessage(labels.referrer),
-          path: updateParams({ view: 'referrer' }),
-          icon: <Share2 />,
-        },
-        {
-          id: 'channel',
-          label: formatMessage(labels.channel),
-          path: updateParams({ view: 'channel' }),
-          icon: <Megaphone />,
-        },
-        {
-          id: 'domain',
-          label: formatMessage(labels.domain),
-          path: updateParams({ view: 'domain' }),
-          icon: <Globe />,
-        },
-      ].filter(filterExcluded),
-    },
-    {
-      label: formatMessage(labels.location),
-      items: [
-        {
-          id: 'country',
-          label: formatMessage(labels.country),
-          path: updateParams({ view: 'country' }),
-          icon: <Earth />,
-        },
-        {
-          id: 'region',
-          label: formatMessage(labels.region),
-          path: updateParams({ view: 'region' }),
-          icon: <MapPin />,
-        },
-        {
-          id: 'city',
-          label: formatMessage(labels.city),
-          path: updateParams({ view: 'city' }),
-          icon: <Landmark />,
-        },
-      ].filter(filterExcluded),
-    },
-    {
-      label: formatMessage(labels.environment),
-      items: [
-        {
-          id: 'browser',
-          label: formatMessage(labels.browser),
-          path: updateParams({ view: 'browser' }),
-          icon: <AppWindow />,
-        },
-        {
-          id: 'os',
-          label: formatMessage(labels.os),
-          path: updateParams({ view: 'os' }),
-          icon: <Cpu />,
-        },
-        {
-          id: 'device',
-          label: formatMessage(labels.device),
-          path: updateParams({ view: 'device' }),
-          icon: <Laptop />,
-        },
-        {
-          id: 'language',
-          label: formatMessage(labels.language),
-          path: updateParams({ view: 'language' }),
-          icon: <Languages />,
-        },
-        {
-          id: 'screen',
-          label: formatMessage(labels.screen),
-          path: updateParams({ view: 'screen' }),
-          icon: <Monitor />,
-        },
-      ].filter(filterExcluded),
-    },
-    {
-      label: formatMessage(labels.other),
-      items: [
-        {
-          id: 'event',
-          label: formatMessage(labels.event),
-          path: updateParams({ view: 'event' }),
-          icon: <Lightning />,
-        },
-        {
-          id: 'hostname',
-          label: formatMessage(labels.hostname),
-          path: updateParams({ view: 'hostname' }),
-          icon: <Network />,
-        },
-        {
-          id: 'tag',
-          label: formatMessage(labels.tag),
-          path: updateParams({ view: 'tag' }),
-          icon: <Tag />,
-        },
-      ].filter(filterExcluded),
-    },
-  ];
-
   return (
-    <Grid columns="auto 1fr" gap="6" height="100%" overflow="hidden">
-      <Column gap="6" border="right" paddingRight="3" overflowY="auto">
-        <SideMenu items={items} selectedKey={view} />
+    <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
diff --git a/src/components/common/Panel.tsx b/src/components/common/Panel.tsx
index ac85dcff..da901d41 100644
--- a/src/components/common/Panel.tsx
+++ b/src/components/common/Panel.tsx
@@ -37,7 +37,8 @@ export function Panel({ title, allowFullscreen, style, children, ...props }: Pan
 
   return (
     <Column
-      padding={{ xs: '3', md: '6' }}
+      paddingY="6"
+      paddingX={{ xs: '3', md: '6' }}
       border
       borderRadius="3"
       backgroundColor
@@ -50,7 +51,7 @@ export function Panel({ title, allowFullscreen, style, children, ...props }: Pan
       {allowFullscreen && (
         <Row justifyContent="flex-end" alignItems="center">
           <TooltipTrigger delay={0} isDisabled={isFullscreen}>
-            <Button variant="quiet" onPress={handleFullscreen}>
+            <Button size="sm" variant="quiet" onPress={handleFullscreen}>
               <Icon>{isFullscreen ? <X /> : <Maximize />}</Icon>
             </Button>
             <Tooltip>{formatMessage(labels.maximize)}</Tooltip>