Handle user account redirect.

pnpm-lock.yaml

@@ -328,6 +328,8 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
+  dist: {}
+
 packages:
 
   '@ampproject/remapping@2.3.0':

src/app/page.tsx

@@ -1,6 +1,5 @@
 'use client';
 import { redirect } from 'next/navigation';
-import { getItem } from '@/lib/storage';
 import { useEffect } from 'react';
 import { LAST_TEAM_CONFIG } from '@/lib/constants';
 import { getItem } from '@/lib/storage';

src/components/input/NavButton.tsx

@@ -14,6 +14,7 @@ import {
   Text,
 } from '@umami/react-zen';
 import { ArrowRight } from 'lucide-react';
+import type { Key } from 'react';
 import {
   useConfig,
   useLoginQuery,
@@ -33,7 +34,8 @@ import {
   Users,
 } from '@/components/icons';
 import { Switch } from '@/components/svg';
-import { DOCS_URL } from '@/lib/constants';
+import { DOCS_URL, LAST_TEAM_CONFIG } from '@/lib/constants';
+import { removeItem } from '@/lib/storage';
 
 export interface TeamsButtonProps {
   showText?: boolean;
@@ -44,7 +46,7 @@ export function NavButton({ showText = true }: TeamsButtonProps) {
   const { user } = useLoginQuery();
   const { cloudMode } = useConfig();
   const { formatMessage, labels } = useMessages();
-  const { teamId } = useNavigation();
+  const { teamId, router } = useNavigation();
   const { isMobile } = useMobile();
   const team = user?.teams?.find(({ id }) => id === teamId);
   const selectedKeys = new Set([teamId || 'user']);
@@ -54,7 +56,16 @@ export function NavButton({ showText = true }: TeamsButtonProps) {
     return cloudMode ? `${process.env.cloudUrl}${url}` : url;
   };
 
-  const handleAction = async () => {};
+  const handleAction = async (key: Key) => {
+    if (key === 'user') {
+      removeItem(LAST_TEAM_CONFIG);
+      if (cloudMode) {
+        window.location.href = '/';
+      } else {
+        router.push('/');
+      }
+    }
+  };
 
   return (
     <MenuTrigger>
@@ -84,16 +95,16 @@ export function NavButton({ showText = true }: TeamsButtonProps) {
       </Pressable>
       <Popover placement="bottom start">
         <Column minWidth="300px">
-          <Menu autoFocus="last" onAction={handleAction}>
+          <Menu autoFocus="last">
             <SubmenuTrigger>
               <MenuItem id="teams" showChecked={false} showSubMenuIcon>
                 <IconLabel icon={<Switch />} label={formatMessage(labels.switchAccount)} />
               </MenuItem>
               <Popover placement={isMobile ? 'bottom start' : 'right top'}>
                 <Column minWidth="300px">
-                  <Menu selectionMode="single" selectedKeys={selectedKeys}>
+                  <Menu selectionMode="single" selectedKeys={selectedKeys} onAction={handleAction}>
                     <MenuSection title={formatMessage(labels.myAccount)}>
-                      <MenuItem id="user" href={getUrl('/websites')}>
+                      <MenuItem id="user">
                         <IconLabel icon={<User />} label={user.username} />
                       </MenuItem>
                     </MenuSection>