feat: improve mobile navigation with clickable page elements (#3770)

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} />
 

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}>

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>
   );
 }