Rename SideMenu to NavMenu, fix tooltips, and update react-zen.

- Rename SideMenu to NavMenu with visible group title labels and selected item highlighting
- Update react-zen to 0.242.0 and fix responsive breakpoints (xs -> base)
- Style floating tooltips with inverted background across WorldMap, charts, and WeeklyTraffic
- Add CSS variables for primary color and use IconLabel consistently
- Remove stray console.log from LoadingPanel

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/metrics/MetricsTable.tsx

@@ -1,5 +1,6 @@
-import { Grid, Icon, Row, Text } from '@umami/react-zen';
+import { Grid, Row } from '@umami/react-zen';
 import { useEffect, useMemo } from 'react';
+import { IconLabel } from '@/components/common/IconLabel';
 import { LinkButton } from '@/components/common/LinkButton';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { useMessages, useNavigation, useWebsiteMetricsQuery } from '@/components/hooks';
@@ -82,10 +83,7 @@ export function MetricsTable({
         {showMore && limit && (
           <Row justifyContent="center" alignItems="flex-end">
             <LinkButton href={updateParams({ view: type })} variant="quiet">
-              <Icon size="sm">
-                <Maximize />
-              </Icon>
-              <Text>{formatMessage(labels.more)}</Text>
+              <IconLabel icon={<Maximize />}>{formatMessage(labels.more)}</IconLabel>
             </LinkButton>
           </Row>
         )}

src/components/metrics/WeeklyTraffic.tsx

@@ -95,9 +95,9 @@ export function WeeklyTraffic({ websiteId }: { websiteId: string }) {
                             />
                           </Row>
                         </Focusable>
-                        <Tooltip placement="right">{`${formatMessage(
-                          labels.visitors,
-                        )}: ${count}`}</Tooltip>
+                        <Tooltip placement="right">
+                          <Text size="sm">{`${formatMessage(labels.visitors)}: ${count}`}</Text>
+                        </Tooltip>
                       </TooltipTrigger>
                     );
                   })}

src/components/metrics/WorldMap.tsx

@@ -1,4 +1,4 @@
-import { Column, type ColumnProps, FloatingTooltip, useTheme } from '@umami/react-zen';
+import { Box, Column, type ColumnProps, FloatingTooltip, Text, useTheme } from '@umami/react-zen';
 import { colord } from 'colord';
 import { useMemo, useState } from 'react';
 import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps';
@@ -99,7 +99,13 @@ export function WorldMap({ websiteId, data, ...props }: WorldMapProps) {
           </Geographies>
         </ZoomableGroup>
       </ComposableMap>
-      {tooltip && <FloatingTooltip>{tooltip}</FloatingTooltip>}
+      {tooltip && (
+        <FloatingTooltip>
+          <Box backgroundColor="surface-inverted" color="inverted" padding borderRadius="md">
+            <Text size="sm">{tooltip}</Text>
+          </Box>
+        </FloatingTooltip>
+      )}
     </Column>
   );
 }