Updated expanded view. Some style fixes.

src/app/(main)/websites/[websiteId]/WebsiteChart.tsx

@@ -47,13 +47,7 @@ export function WebsiteChart({
   }, [data, startDate, endDate, unit]);
 
   return (
-    <LoadingPanel
-      data={data}
-      isFetching={isFetching}
-      isLoading={isLoading}
-      error={error}
-      minHeight="520px"
-    >
+    <LoadingPanel data={data} isFetching={isFetching} isLoading={isLoading} error={error}>
       <PageviewsChart
         key={value}
         data={chartData}

src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx

@@ -1,7 +1,7 @@
-import Link from 'next/link';
-import { Grid, Column, NavMenu, NavMenuItem } from '@umami/react-zen';
+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';
 
 export function WebsiteExpandedView({
   websiteId,
@@ -18,94 +18,131 @@ export function WebsiteExpandedView({
 
   const items = [
     {
-      id: 'path',
       label: formatMessage(labels.pages),
-      path: updateParams({ view: 'path' }),
+      items: [
+        {
+          id: 'path',
+          label: formatMessage(labels.path),
+          path: updateParams({ view: 'path' }),
+        },
+        {
+          id: 'entry',
+          label: formatMessage(labels.entry),
+          path: updateParams({ view: 'entry' }),
+        },
+        {
+          id: 'exit',
+          label: formatMessage(labels.exit),
+          path: updateParams({ view: 'exit' }),
+        },
+        {
+          id: 'title',
+          label: formatMessage(labels.title),
+          path: updateParams({ view: 'title' }),
+        },
+        {
+          id: 'query',
+          label: formatMessage(labels.query),
+          path: updateParams({ view: 'query' }),
+        },
+      ],
     },
     {
-      id: 'referrer',
-      label: formatMessage(labels.referrers),
-      path: updateParams({ view: 'referrer' }),
+      label: formatMessage(labels.sources),
+      items: [
+        {
+          id: 'referrer',
+          label: formatMessage(labels.referrers),
+          path: updateParams({ view: 'referrer' }),
+        },
+        {
+          id: 'channel',
+          label: formatMessage(labels.channels),
+          path: updateParams({ view: 'channel' }),
+        },
+        {
+          id: 'domain',
+          label: formatMessage(labels.domain),
+          path: updateParams({ view: 'domain' }),
+        },
+      ],
     },
     {
-      id: 'channel',
-      label: formatMessage(labels.channels),
-      path: updateParams({ view: 'channel' }),
+      label: formatMessage(labels.location),
+      items: [
+        {
+          id: 'country',
+          label: formatMessage(labels.countries),
+          path: updateParams({ view: 'country' }),
+        },
+        {
+          id: 'region',
+          label: formatMessage(labels.regions),
+          path: updateParams({ view: 'region' }),
+        },
+        {
+          id: 'city',
+          label: formatMessage(labels.cities),
+          path: updateParams({ view: 'city' }),
+        },
+      ],
     },
     {
-      id: 'browser',
-      label: formatMessage(labels.browsers),
-      path: updateParams({ view: 'browser' }),
+      label: formatMessage(labels.environment),
+      items: [
+        {
+          id: 'browser',
+          label: formatMessage(labels.browsers),
+          path: updateParams({ view: 'browser' }),
+        },
+        {
+          id: 'os',
+          label: formatMessage(labels.os),
+          path: updateParams({ view: 'os' }),
+        },
+        {
+          id: 'device',
+          label: formatMessage(labels.devices),
+          path: updateParams({ view: 'device' }),
+        },
+        {
+          id: 'language',
+          label: formatMessage(labels.languages),
+          path: updateParams({ view: 'language' }),
+        },
+        {
+          id: 'screen',
+          label: formatMessage(labels.screens),
+          path: updateParams({ view: 'screen' }),
+        },
+      ],
     },
     {
-      id: 'os',
-      label: formatMessage(labels.os),
-      path: updateParams({ view: 'os' }),
-    },
-    {
-      id: 'device',
-      label: formatMessage(labels.devices),
-      path: updateParams({ view: 'device' }),
-    },
-    {
-      id: 'country',
-      label: formatMessage(labels.countries),
-      path: updateParams({ view: 'country' }),
-    },
-    {
-      id: 'region',
-      label: formatMessage(labels.regions),
-      path: updateParams({ view: 'region' }),
-    },
-    {
-      id: 'city',
-      label: formatMessage(labels.cities),
-      path: updateParams({ view: 'city' }),
-    },
-    {
-      id: 'language',
-      label: formatMessage(labels.languages),
-      path: updateParams({ view: 'language' }),
-    },
-    {
-      id: 'screen',
-      label: formatMessage(labels.screens),
-      path: updateParams({ view: 'screen' }),
-    },
-    {
-      id: 'event',
-      label: formatMessage(labels.events),
-      path: updateParams({ view: 'event' }),
-    },
-    {
-      id: 'query',
-      label: formatMessage(labels.queryParameters),
-      path: updateParams({ view: 'query' }),
-    },
-    {
-      id: 'hostname',
-      label: formatMessage(labels.hostname),
-      path: updateParams({ view: 'hostname' }),
-    },
-    {
-      id: 'tag',
-      label: formatMessage(labels.tags),
-      path: updateParams({ view: 'tag' }),
+      label: formatMessage(labels.other),
+      items: [
+        {
+          id: 'event',
+          label: formatMessage(labels.events),
+          path: updateParams({ view: 'event' }),
+        },
+        {
+          id: 'hostname',
+          label: formatMessage(labels.hostname),
+          path: updateParams({ view: 'hostname' }),
+        },
+        {
+          id: 'tag',
+          label: formatMessage(labels.tags),
+          path: updateParams({ view: 'tag' }),
+        },
+      ],
     },
   ];
 
   return (
     <Grid columns="auto 1fr" gap="6" height="100%" overflow="hidden">
-      <Column gap="6" width="200px" border="right" paddingRight="3">
-        <NavMenu position="sticky" top="0">
-          {items.map(({ id, label, path }) => {
-            return (
-              <Link key={id} href={path}>
-                <NavMenuItem isSelected={id === view}>{label}</NavMenuItem>
-              </Link>
-            );
-          })}
-        </NavMenu>
+      <Column gap="6" border="right" paddingRight="3">
+        <SideMenu items={items} selectedKey={view} />
       </Column>
       <Column overflow="hidden">
         <MetricsExpandedTable
@@ -113,8 +150,6 @@ export function WebsiteExpandedView({
           type={view}
           websiteId={websiteId}
           onClose={onClose}
-          allowSearch
-          allowDownload
         />
       </Column>
     </Grid>

src/app/(main)/websites/[websiteId]/WebsitePage.tsx

@@ -29,7 +29,7 @@ export function WebsitePage({ websiteId }: { websiteId: string }) {
     <Column gap>
       <WebsiteControls websiteId={websiteId} allowCompare={true} />
       <WebsiteMetricsBar websiteId={websiteId} showChange={true} />
-      <Panel>
+      <Panel minHeight="520px">
         <WebsiteChart websiteId={websiteId} compareMode={compare} />
       </Panel>
       <WebsitePanels websiteId={websiteId} />

src/app/(main)/websites/[websiteId]/WebsitePanels.tsx

@@ -24,11 +24,11 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
           <Heading size="2">{formatMessage(labels.pages)}</Heading>
           <Tabs>
             <TabList>
-              <Tab id="page">{formatMessage(labels.pages)}</Tab>
+              <Tab id="path">{formatMessage(labels.path)}</Tab>
               <Tab id="entry">{formatMessage(labels.entry)}</Tab>
               <Tab id="exit">{formatMessage(labels.exit)}</Tab>
             </TabList>
-            <TabPanel id="page">
+            <TabPanel id="path">
               <MetricsTable type="path" title={formatMessage(labels.path)} {...tableProps} />
             </TabPanel>
             <TabPanel id="entry">
@@ -47,10 +47,14 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
               <Tab id="channel">{formatMessage(labels.channels)}</Tab>
             </TabList>
             <TabPanel id="referrer">
-              <MetricsTable type="referrer" title={formatMessage(labels.domain)} {...tableProps} />
+              <MetricsTable
+                type="referrer"
+                title={formatMessage(labels.referrer)}
+                {...tableProps}
+              />
             </TabPanel>
             <TabPanel id="channel">
-              <MetricsTable type="channel" title={formatMessage(labels.type)} {...tableProps} />
+              <MetricsTable type="channel" title={formatMessage(labels.channel)} {...tableProps} />
             </TabPanel>
           </Tabs>
         </Panel>