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/app/(main)/websites/[websiteId]/(reports)/attribution/Attribution.tsx

@@ -95,7 +95,7 @@ export function Attribution({
             })}
           </MetricsBar>
           <SectionHeader title={formatMessage(labels.sources)} />
-          <Grid columns={{ xs: '1fr', md: '1fr 1fr' }} gap>
+          <Grid columns={{ base: '1fr', md: '1fr 1fr' }} gap>
             <Panel>
               <AttributionTable data={data?.referrer} title={formatMessage(labels.referrer)} />
             </Panel>
@@ -104,7 +104,7 @@ export function Attribution({
             </Panel>
           </Grid>
           <SectionHeader title="UTM" />
-          <Grid columns={{ xs: '1fr', md: '1fr 1fr' }} gap>
+          <Grid columns={{ base: '1fr', md: '1fr 1fr' }} gap>
             <Panel>
               <AttributionTable data={data?.utm_source} title={formatMessage(labels.sources)} />
             </Panel>

src/app/(main)/websites/[websiteId]/(reports)/attribution/AttributionPage.tsx

@@ -17,7 +17,7 @@ export function AttributionPage({ websiteId }: { websiteId: string }) {
   return (
     <Column gap="6">
       <WebsiteControls websiteId={websiteId} />
-      <Grid columns={{ xs: '1fr', md: '1fr 1fr 1fr' }} gap>
+      <Grid columns={{ base: '1fr', md: '1fr 1fr 1fr' }} gap>
         <Column>
           <Select
             label={formatMessage(labels.model)}

src/app/(main)/websites/[websiteId]/(reports)/goals/GoalsPage.tsx

@@ -26,7 +26,7 @@ export function GoalsPage({ websiteId }: { websiteId: string }) {
       )}
       <LoadingPanel data={data} isLoading={isLoading} error={error}>
         {data && (
-          <Grid columns={{ xs: '1fr', md: '1fr 1fr' }} gap>
+          <Grid columns={{ base: '1fr', md: '1fr 1fr' }} gap>
             {data.data.map((report: any) => (
               <Panel key={report.id}>
                 <Goal {...report} startDate={startDate} endDate={endDate} />

src/app/(main)/websites/[websiteId]/(reports)/retention/Retention.tsx

@@ -53,7 +53,7 @@ export function Retention({ websiteId, days = DAYS, startDate, endDate }: Retent
         <Panel allowFullscreen height="900px">
           <Column
             paddingY="6"
-            paddingX={{ xs: '3', md: '6' }}
+            paddingX={{ base: '3', md: '6' }}
             position="absolute"
             top="40px"
             left="0"

src/app/(main)/websites/[websiteId]/(reports)/utm/UTM.tsx

@@ -43,7 +43,7 @@ export function UTM({ websiteId, startDate, endDate }: UTMProps) {
 
             return (
               <Panel key={param}>
-                <Grid columns={{ xs: '1fr', md: '1fr 1fr' }} gap="6">
+                <Grid columns={{ base: '1fr', md: '1fr 1fr' }} gap="6">
                   <Column>
                     <Heading>
                       <Text transform="capitalize">{param.replace(/^utm_/, '')}</Text>