Updated layout. Fixed properties rendering.

2026-02-08 22:57:12 +01:00 · 2025-07-18 00:22:06 -07:00 · 2025-07-18 00:22:06 -07:00 · 876f4c883e
commit 876f4c883e
parent 01bfd7f52e
18 changed files with 214 additions and 176 deletions
--- a/src/app/(main)/App.tsx
+++ b/src/app/(main)/App.tsx
@ -1,5 +1,5 @@
 'use client';
-import { Grid, Loading, Column, Row } from '@umami/react-zen';
+import { Grid, Loading, Column } from '@umami/react-zen';
 import Script from 'next/script';
 import { usePathname } from 'next/navigation';
 import { UpdateNotice } from './UpdateNotice';
@ -30,20 +30,12 @@ export function App({ children }) {
  }

  return (
-    <Grid height="100vh" width="100%" columns="auto 1fr" rows="auto 1fr" backgroundColor="2">
-      <Column gridColumn="1 / 2" gridRow="1 / 3" backgroundColor>
+    <Grid height="100vh" width="100%" columns="auto 1fr" backgroundColor="2">
+      <Column>
        <SideNav />
      </Column>
-      <Row gridColumn="2 / 3" gridRow="1 / 2">
+      <Column alignItems="center" overflow="auto" position="relative">
        <TopNav />
-      </Row>
-      <Column
-        gridColumn="2 / 3"
-        gridRow="2 / 3"
-        alignItems="center"
-        overflow="auto"
-        position="relative"
-      >
        {children}
      </Column>
      <UpdateNotice user={user} config={config} />
--- a/src/app/(main)/SideNav.tsx
+++ b/src/app/(main)/SideNav.tsx
@ -1,12 +1,11 @@
 import Link from 'next/link';
 import {
  Sidebar,
-  SidebarHeader,
  SidebarSection,
  SidebarItem,
-  Button,
-  Icon,
+  SidebarHeader,
  Row,
+  SidebarProps,
 } from '@umami/react-zen';
 import {
  Globe,
@ -16,14 +15,14 @@ import {
  Grid2X2,
  Settings,
  LockKeyhole,
-  PanelLeft,
 } from '@/components/icons';
 import { useMessages, useNavigation, useGlobalState } from '@/components/hooks';
+import { WebsiteNav } from '@/app/(main)/websites/[websiteId]/WebsiteNav';

-export function SideNav(props: any) {
+export function SideNav(props: SidebarProps) {
  const { formatMessage, labels } = useMessages();
-  const { pathname, renderUrl } = useNavigation();
-  const [isCollapsed, setCollapsed] = useGlobalState('sidenav-collapsed');
+  const { pathname, renderUrl, websiteId } = useNavigation();
+  const [isCollapsed] = useGlobalState('sidenav-collapsed');

  const links = [
    {
@ -68,37 +67,37 @@ export function SideNav(props: any) {
  ];

  return (
-    <Sidebar {...props} isCollapsed={isCollapsed} variant="quiet" showBorder={true}>
-      <SidebarSection>
-        <SidebarHeader label="umami" icon={<Logo />} />
-      </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.endsWith(path)} />
-            </Link>
-          );
-        })}
-      </SidebarSection>
-      <SidebarSection>
-        {bottomLinks.map(({ id, path, label, icon }) => {
-          return (
-            <Link key={id} href={path} role="button">
-              <SidebarItem label={label} icon={icon} isSelected={pathname.startsWith(path)} />
-            </Link>
-          );
-        })}
-      </SidebarSection>
-      <SidebarSection>
-        <Row>
-          <Button onPress={() => setCollapsed(!isCollapsed)} variant="quiet">
-            <Icon>
-              <PanelLeft />
-            </Icon>
-          </Button>
-        </Row>
-      </SidebarSection>
-    </Sidebar>
+    <Row height="100%" margin="2" backgroundColor border borderRadius>
+      <Sidebar
+        {...props}
+        isCollapsed={isCollapsed || websiteId}
+        muteItems={false}
+        variant="quiet"
+        showBorder={false}
+      >
+        <SidebarSection>
+          <SidebarHeader label="umami" icon={<Logo />} />
+        </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.endsWith(path)} />
+              </Link>
+            );
+          })}
+        </SidebarSection>
+        <SidebarSection>
+          {bottomLinks.map(({ id, path, label, icon }) => {
+            return (
+              <Link key={id} href={path} role="button">
+                <SidebarItem label={label} icon={icon} isSelected={pathname.startsWith(path)} />
+              </Link>
+            );
+          })}
+        </SidebarSection>
+      </Sidebar>
+      {websiteId && <WebsiteNav websiteId={websiteId} />}
+    </Row>
  );
 }
--- a/src/app/(main)/TopNav.tsx
+++ b/src/app/(main)/TopNav.tsx
@ -5,6 +5,7 @@ import { TeamsButton } from '@/components/input/TeamsButton';
 import { WebsiteSelect } from '@/components/input/WebsiteSelect';
 import { Slash } from '@/components/icons';
 import { useNavigation } from '@/components/hooks';
+import { PanelButton } from '@/components/input/PanelButton';

 export function TopNav() {
  const { teamId, websiteId, pathname } = useNavigation();
@ -14,21 +15,27 @@ export function TopNav() {
    <Row
      justifyContent="space-between"
      alignItems="center"
-      paddingY="3"
+      paddingY="2"
      paddingX="3"
      paddingRight="5"
-      border="bottom"
      width="100%"
+      style={{ position: 'sticky', top: 0 }}
+      backgroundColor="2"
+      zIndex={1}
    >
      <Row alignItems="center">
+        <PanelButton />
+        <Seperator />
        <Row alignItems="center" gap="1">
          <TeamsButton />
          {websiteId && !isSettings && (
            <>
-              <Icon strokeColor="7" rotate={-25}>
-                <Slash />
-              </Icon>
-              <WebsiteSelect variant="quiet" websiteId={websiteId} teamId={teamId} />
+              <Seperator />
+              <WebsiteSelect
+                buttonProps={{ variant: 'quiet' }}
+                websiteId={websiteId}
+                teamId={teamId}
+              />
            </>
          )}
        </Row>
@ -41,3 +48,11 @@ export function TopNav() {
    </Row>
  );
 }
+
+const Seperator = () => {
+  return (
+    <Icon strokeColor="7" rotate={-25}>
+      <Slash />
+    </Icon>
+  );
+};
--- a/src/app/(main)/settings/SettingsLayout.tsx
+++ b/src/app/(main)/settings/SettingsLayout.tsx
@ -1,14 +1,13 @@
 'use client';
 import { ReactNode } from 'react';
 import { Grid, Column } from '@umami/react-zen';
-import { useLoginQuery, useMessages, useNavigation } from '@/components/hooks';
+import { useMessages, useNavigation } from '@/components/hooks';
 import { SideMenu } from '@/components/common/SideMenu';
 import { PageHeader } from '@/components/common/PageHeader';
 import { Panel } from '@/components/common/Panel';
 import { PageBody } from '@/components/common/PageBody';

 export function SettingsLayout({ children }: { children: ReactNode }) {
-  const { user } = useLoginQuery();
  const { formatMessage, labels } = useMessages();
  const { pathname } = useNavigation();

@ -23,13 +22,13 @@ export function SettingsLayout({ children }: { children: ReactNode }) {
      label: formatMessage(labels.profile),
      url: '/settings/profile',
    },
-    { id: 'teams', label: formatMessage(labels.teams), url: '/settings/teams' },
-    user.isAdmin && {
+    {
      id: 'websites',
      label: formatMessage(labels.websites),
      url: '/settings/websites',
    },
-  ].filter(n => n);
+    { id: 'teams', label: formatMessage(labels.teams), url: '/settings/teams' },
+  ];

  const value = items.find(({ url }) => pathname.includes(url))?.id;

--- a/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx
@ -12,7 +12,7 @@ export function WebsiteHeader() {
  const website = useWebsite();

  return (
-    <PageHeader title={website.name} icon={<Favicon domain={website.domain} />}>
+    <PageHeader title={website.name} icon={<Favicon domain={website.domain} />} marginBottom="3">
      <Row alignItems="center" gap="6">
        <ActiveUsers websiteId={website.id} />
        <Row alignItems="center" gap>
--- a/src/app/(main)/websites/[websiteId]/WebsiteLayout.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteLayout.tsx
@ -1,25 +1,17 @@
 'use client';
 import { ReactNode } from 'react';
-import { Column, Grid } from '@umami/react-zen';
+import { Column } from '@umami/react-zen';
 import { WebsiteProvider } from './WebsiteProvider';
 import { PageBody } from '@/components/common/PageBody';
 import { WebsiteHeader } from './WebsiteHeader';
-import { WebsiteNav } from '@/app/(main)/websites/[websiteId]/WebsiteNav';

 export function WebsiteLayout({ websiteId, children }: { websiteId: string; children: ReactNode }) {
  return (
    <WebsiteProvider websiteId={websiteId}>
-      <Grid columns="200px 1fr" gap width="100%">
-        <Column padding>
-          <WebsiteNav websiteId={websiteId} />
-        </Column>
-        <PageBody>
-          <Column gap>
-            <WebsiteHeader />
-            <Column>{children}</Column>
-          </Column>
-        </PageBody>
-      </Grid>
+      <PageBody gap>
+        <WebsiteHeader />
+        <Column>{children}</Column>
+      </PageBody>
    </WebsiteProvider>
  );
 }
--- a/src/app/(main)/websites/[websiteId]/WebsiteNav.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteNav.tsx
@ -1,4 +1,4 @@
-import { Icon, Text, Row, NavMenu, NavMenuItem, NavMenuGroup } from '@umami/react-zen';
+import { Icon, Text, Row, NavMenu, NavMenuItem, NavMenuGroup, Column } from '@umami/react-zen';
 import {
  Eye,
  Lightning,
@ -12,6 +12,8 @@ import {
  Tag,
  Money,
  Network,
+  UserPlus,
+  ChartPie,
 } from '@/components/icons';
 import { useMessages, useNavigation } from '@/components/hooks';
 import Link from 'next/link';
@ -22,7 +24,7 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {

  const links = [
    {
-      label: formatMessage(labels.core),
+      label: formatMessage(labels.traffic),
      items: [
        {
          id: 'overview',
@ -88,6 +90,18 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
          icon: <Sheet />,
          path: '/breakdown',
        },
+        {
+          id: 'segments',
+          label: formatMessage(labels.segments),
+          icon: <ChartPie />,
+          path: '/segments',
+        },
+        {
+          id: 'cohorts',
+          label: formatMessage(labels.cohorts),
+          icon: <UserPlus />,
+          path: '/cohorts',
+        },
      ],
    },
    {
@ -120,27 +134,29 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
    'overview';

  return (
-    <NavMenu highlightColor="3" style={{ position: 'sticky', top: 'var(--spacing-2)' }}>
-      {links.map(({ label, items }) => {
-        return (
-          <NavMenuGroup title={label} key={label} gap="2">
-            {items.map(({ id, label, icon, path }) => {
-              const isSelected = selected === id;
+    <Column gap padding width="240px" border="left">
+      <NavMenu highlightColor="2">
+        {links.map(({ label, items }) => {
+          return (
+            <NavMenuGroup title={label} key={label} gap="1">
+              {items.map(({ id, label, icon, path }) => {
+                const isSelected = selected === id;

-              return (
-                <Link key={id} href={renderUrl(`/websites/${websiteId}${path}`)}>
-                  <NavMenuItem isSelected={isSelected}>
-                    <Row alignItems="center" gap>
-                      <Icon>{icon}</Icon>
-                      <Text>{label}</Text>
-                    </Row>
-                  </NavMenuItem>
-                </Link>
-              );
-            })}
-          </NavMenuGroup>
-        );
-      })}
-    </NavMenu>
+                return (
+                  <Link key={id} href={renderUrl(`/websites/${websiteId}${path}`)}>
+                    <NavMenuItem isSelected={isSelected}>
+                      <Row alignItems="center" gap>
+                        <Icon>{icon}</Icon>
+                        <Text>{label}</Text>
+                      </Row>
+                    </NavMenuItem>
+                  </Link>
+                );
+              })}
+            </NavMenuGroup>
+          );
+        })}
+      </NavMenu>
+    </Column>
  );
 }
--- a/src/app/(main)/websites/[websiteId]/events/EventProperties.tsx
+++ b/src/app/(main)/websites/[websiteId]/events/EventProperties.tsx
@ -28,41 +28,43 @@ export function EventProperties({ websiteId }: { websiteId: string }) {

  return (
    <LoadingPanel
+      data={data}
      isLoading={isLoading}
      isFetching={isFetching}
-      data={data}
      error={error}
      minHeight="300px"
      gap="6"
    >
-      <Grid columns="repeat(auto-fill, minmax(300px, 1fr))" gap>
-        <Select
-          label={formatMessage(labels.event)}
-          value={eventName}
-          onChange={setEventName}
-          placeholder=""
-        >
-          {events?.map(p => (
-            <ListItem key={p} id={p}>
-              {p}
-            </ListItem>
-          ))}
-        </Select>
-        <Select
-          label={formatMessage(labels.property)}
-          value={propertyName}
-          onChange={setPropertyName}
-          isDisabled={!eventName}
-          placeholder=""
-        >
-          {properties?.map(p => (
-            <ListItem key={p} id={p}>
-              {p}
-            </ListItem>
-          ))}
-        </Select>
-      </Grid>
-      {propertyName && (
+      {data && (
+        <Grid columns="repeat(auto-fill, minmax(300px, 1fr))" gap>
+          <Select
+            label={formatMessage(labels.event)}
+            value={eventName}
+            onChange={setEventName}
+            placeholder=""
+          >
+            {events?.map(p => (
+              <ListItem key={p} id={p}>
+                {p}
+              </ListItem>
+            ))}
+          </Select>
+          <Select
+            label={formatMessage(labels.property)}
+            value={propertyName}
+            onChange={setPropertyName}
+            isDisabled={!eventName}
+            placeholder=""
+          >
+            {properties?.map(p => (
+              <ListItem key={p} id={p}>
+                {p}
+              </ListItem>
+            ))}
+          </Select>
+        </Grid>
+      )}
+      {eventName && propertyName && (
        <EventValues websiteId={websiteId} eventName={eventName} propertyName={propertyName} />
      )}
    </LoadingPanel>
@ -113,10 +115,12 @@ const EventValues = ({ websiteId, eventName, propertyName }) => {
      minHeight="300px"
      gap="6"
    >
-      <Grid columns="1fr 1fr" gap>
-        {values && <ListTable title={propertyName} data={tableData} />}
-        <PieChart key={propertyName + eventName} type="doughnut" chartData={chartData} />
-      </Grid>
+      {values && (
+        <Grid columns="1fr 1fr" gap>
+          <ListTable title={propertyName} data={tableData} />
+          <PieChart type="doughnut" chartData={chartData} />
+        </Grid>
+      )}
    </LoadingPanel>
  );
 };
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionProperties.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionProperties.tsx
@ -26,20 +26,22 @@ export function SessionProperties({ websiteId }: { websiteId: string }) {
      minHeight="300px"
      gap="6"
    >
-      <Grid columns="repeat(auto-fill, minmax(300px, 1fr))" gap>
-        <Select
-          label={formatMessage(labels.event)}
-          value={propertyName}
-          onChange={setPropertyName}
-          placeholder=""
-        >
-          {properties?.map(p => (
-            <ListItem key={p} id={p}>
-              {p}
-            </ListItem>
-          ))}
-        </Select>
-      </Grid>
+      {data && (
+        <Grid columns="repeat(auto-fill, minmax(300px, 1fr))" gap>
+          <Select
+            label={formatMessage(labels.event)}
+            value={propertyName}
+            onChange={setPropertyName}
+            placeholder=""
+          >
+            {properties?.map(p => (
+              <ListItem key={p} id={p}>
+                {p}
+              </ListItem>
+            ))}
+          </Select>
+        </Grid>
+      )}
      {propertyName && <SessionValues websiteId={websiteId} propertyName={propertyName} />}
    </LoadingPanel>
  );
@ -84,10 +86,12 @@ const SessionValues = ({ websiteId, propertyName }) => {
      minHeight="300px"
      gap="6"
    >
-      <Grid columns="1fr 1fr" gap>
-        {data && <ListTable title={propertyName} data={tableData} />}
-        <PieChart key={propertyName} type="doughnut" chartData={chartData} />
-      </Grid>
+      {data && (
+        <Grid columns="1fr 1fr" gap>
+          <ListTable title={propertyName} data={tableData} />
+          <PieChart type="doughnut" chartData={chartData} />
+        </Grid>
+      )}
    </LoadingPanel>
  );
 };