From beb2bc0a06aa0500aa6200a555e2ea7072274fd2 Mon Sep 17 00:00:00 2001
From: Prince EKPINSE <princeekpinse+1@gmail.com>
Date: Sat, 29 Nov 2025 13:53:32 +0100
Subject: [PATCH] feat: improve mobile navigation with clickable page elements
 (#3770)

---
 .../(main)/websites/[websiteId]/WebsiteHeader.tsx   |  7 ++++++-
 src/components/common/PageHeader.tsx                | 11 ++++++++++-
 src/components/metrics/ActiveUsers.tsx              | 13 ++++++++-----
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx b/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx
index 28187f00..d8eb76c3 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx
@@ -20,7 +20,12 @@ export function WebsiteHeader({ showActions }: { showActions?: boolean }) {
   }
 
   return (
-    <PageHeader title={website.name} icon={<Favicon domain={website.domain} />} marginBottom="3">
+    <PageHeader
+      title={website.name}
+      icon={<Favicon domain={website.domain} />}
+      marginBottom="3"
+      titleHref={renderUrl(`/websites/${website.id}`, false)}
+    >
       <Row alignItems="center" gap="6" wrap="wrap">
         <ActiveUsers websiteId={website.id} />
 
diff --git a/src/components/common/PageHeader.tsx b/src/components/common/PageHeader.tsx
index 12b1a644..395fbdd3 100644
--- a/src/components/common/PageHeader.tsx
+++ b/src/components/common/PageHeader.tsx
@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { Heading, Icon, Row, Text, Column, Grid } from '@umami/react-zen';
+import { LinkButton } from './LinkButton';
 
 export function PageHeader({
   title,
@@ -7,6 +8,7 @@ export function PageHeader({
   label,
   icon,
   showBorder = true,
+  titleHref,
   children,
 }: {
   title: string;
@@ -14,6 +16,7 @@ export function PageHeader({
   label?: ReactNode;
   icon?: ReactNode;
   showBorder?: boolean;
+  titleHref?: string;
   allowEdit?: boolean;
   className?: string;
   children?: ReactNode;
@@ -33,7 +36,13 @@ export function PageHeader({
               {icon}
             </Icon>
           )}
-          {title && <Heading size={{ xs: '2', md: '3', lg: '4' }}>{title}</Heading>}
+          {title && titleHref ? (
+            <LinkButton href={titleHref} variant="quiet">
+              <Heading size={{ xs: '2', md: '3', lg: '4' }}>{title}</Heading>
+            </LinkButton>
+          ) : (
+            title && <Heading size={{ xs: '2', md: '3', lg: '4' }}>{title}</Heading>
+          )}
         </Row>
         {description && (
           <Text color="muted" truncate style={{ maxWidth: 600 }} title={description}>
diff --git a/src/components/metrics/ActiveUsers.tsx b/src/components/metrics/ActiveUsers.tsx
index 0627020e..9a7ff858 100644
--- a/src/components/metrics/ActiveUsers.tsx
+++ b/src/components/metrics/ActiveUsers.tsx
@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import { Text, StatusLight } from '@umami/react-zen';
 import { useMessages, useActyiveUsersQuery } from '@/components/hooks';
+import { LinkButton } from '@/components/common/LinkButton';
 
 export function ActiveUsers({
   websiteId,
@@ -27,10 +28,12 @@ export function ActiveUsers({
   }
 
   return (
-    <StatusLight variant="success">
-      <Text size="2" weight="medium">
-        {count} {formatMessage(labels.online)}
-      </Text>
-    </StatusLight>
+    <LinkButton href={`/websites/${websiteId}/realtime`} variant="quiet">
+      <StatusLight variant="success">
+        <Text size="2" weight="medium">
+          {count} {formatMessage(labels.online)}
+        </Text>
+      </StatusLight>
+    </LinkButton>
   );
 }