src/app/(main)/MobileNav.tsx

@@ -42,7 +42,7 @@ export function MobileNav() {
         {({ close }) => {
           return (
             <>
-              <NavMenu padding="3" onItemClick={close} border="bottom" width="100%">
+              <NavMenu padding="3" onItemClick={close} border="bottom">
                 <NavButton />
                 {links.map(link => {
                   return (

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

@@ -1,13 +1,15 @@
 import { Grid, Heading, Row, Tab, TabList, TabPanel, Tabs } from '@umami/react-zen';
 import { GridRow } from '@/components/common/GridRow';
 import { Panel } from '@/components/common/Panel';
-import { useMessages } from '@/components/hooks';
+import { useMessages, useNavigation } from '@/components/hooks';
+import { EventsChart } from '@/components/metrics/EventsChart';
 import { MetricsTable } from '@/components/metrics/MetricsTable';
 import { WeeklyTraffic } from '@/components/metrics/WeeklyTraffic';
 import { WorldMap } from '@/components/metrics/WorldMap';
 
 export function WebsitePanels({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();
+  const { pathname } = useNavigation();
   const tableProps = {
     websiteId,
     limit: 10,
@@ -16,6 +18,7 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
     metric: formatMessage(labels.visitors),
   };
   const rowProps = { minHeight: '570px' };
+  const isSharePage = pathname.includes('/share/');
 
   return (
     <Grid gap="3">
@@ -113,6 +116,25 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
           <WeeklyTraffic websiteId={websiteId} />
         </Panel>
       </GridRow>
+      {isSharePage && (
+        <GridRow layout="two-one" {...rowProps}>
+          <Panel>
+            <Heading size="2">{formatMessage(labels.events)}</Heading>
+            <Row border="bottom" marginBottom="4" />
+            <MetricsTable
+              websiteId={websiteId}
+              type="event"
+              title={formatMessage(labels.event)}
+              metric={formatMessage(labels.count)}
+              limit={15}
+              filterLink={false}
+            />
+          </Panel>
+          <Panel gridColumn={{ xs: 'span 1', md: 'span 2' }}>
+            <EventsChart websiteId={websiteId} />
+          </Panel>
+        </GridRow>
+      )}
     </Grid>
   );
 }

src/app/share/[slug]/[[...path]]/ShareNav.tsx

@@ -129,7 +129,7 @@ export function ShareNav({
   const items = allItems
     .map(section => ({
       label: section.label,
-      items: section.items.filter(item => parameters[item.id] === true),
+      items: section.items.filter(item => parameters[item.id] !== false),
     }))
     .filter(section => section.items.length > 0);
 
@@ -144,12 +144,12 @@ export function ShareNav({
       position={isMobile ? undefined : 'fixed'}
       padding="3"
       width={isMobile ? '100%' : collapsed ? '60px' : '240px'}
-      maxHeight="100dvh"
-      height="100dvh"
+      maxHeight="100vh"
+      height="100vh"
       border={isMobile ? undefined : 'right'}
       borderColor={isMobile ? undefined : '4'}
     >
-      <Row as="header" gap alignItems="center" justifyContent="space-between">
+      <Row as="header" gap alignItems="center" paddingY="3" justifyContent="space-between">
         {!collapsed && (
           <a href={logoUrl} target="_blank" rel="noopener" style={{ marginLeft: 12 }}>
             <Row alignItems="center" gap>

src/components/input/MobileMenuButton.tsx

@@ -9,7 +9,7 @@ export function MobileMenuButton(props: DialogProps) {
           <Menu />
         </Icon>
       </Button>
-      <Modal placement="left" offset="80px">
+      <Modal placement="left">
         <Dialog variant="sheet" {...props} style={{ width: 'auto' }} />
       </Modal>
     </DialogTrigger>

src/lib/detect.ts

@@ -10,16 +10,6 @@ import { safeDecodeURIComponent } from '@/lib/url';
 const MAXMIND = 'maxmind';
 
 const PROVIDER_HEADERS = [
-  // Umami custom headers (cloud mode only)
-  ...(process.env.CLOUD_MODE
-    ? [
-        {
-          countryHeader: 'x-umami-client-country',
-          regionHeader: 'x-umami-client-region',
-          cityHeader: 'x-umami-client-city',
-        },
-      ]
-    : []),
   // Cloudflare headers
   {
     countryHeader: 'cf-ipcountry',
@@ -76,13 +66,13 @@ function decodeHeader(s: string | undefined | null): string | undefined | null {
   return Buffer.from(s, 'latin1').toString('utf-8');
 }
 
-export async function getLocation(ip: string = '', headers: Headers, skipHeaders: boolean) {
+export async function getLocation(ip: string = '', headers: Headers, hasPayloadIP: boolean) {
   // Ignore local ips
   if (!ip || (await isLocalhost(ip))) {
     return null;
   }
 
-  if (!skipHeaders && !process.env.SKIP_LOCATION_HEADERS) {
+  if (!hasPayloadIP && !process.env.SKIP_LOCATION_HEADERS) {
     for (const provider of PROVIDER_HEADERS) {
       const countryHeader = headers.get(provider.countryHeader);
       if (countryHeader) {

src/lib/ip.ts

@@ -1,7 +1,6 @@
 import ipaddr from 'ipaddr.js';
 
 export const IP_ADDRESS_HEADERS = [
-  ...(process.env.CLOUD_MODE ? ['x-umami-client-ip'] : []), // Umami custom header (cloud mode only)
   'true-client-ip', // CDN
   'cf-connecting-ip', // Cloudflare
   'fastly-client-ip', // Fastly
@@ -82,7 +81,7 @@ export function getIpAddress(headers: Headers) {
   }
 
   if (header === 'forwarded') {
-    const match = ip.match(/for=(\[?[0-9a-fA-F:.]+]?)/);
+    const match = ip.match(/for=(\[?[0-9a-fA-F:.]+\]?)/);
 
     if (match) {
       return resolveIp(match[1]);