Use menu trigger for team navigation and refine top navigation selectors

src/app/(main)/TopNav.tsx

@@ -1,7 +1,7 @@
 'use client';
 import { Icon, Row } from '@umami/react-zen';
 import { useNavigation } from '@/components/hooks';
-import { Slash } from '@/components/icons';
+import { Minus } from '@/components/icons';
 import { BoardSelect } from '@/components/input/BoardSelect';
 import { LinkSelect } from '@/components/input/LinkSelect';
 import { PixelSelect } from '@/components/input/PixelSelect';
@@ -52,8 +52,8 @@ export function TopNav() {
         <TeamsButton />
         {(websiteId || linkId || pixelId || boardId) && (
           <>
-            <Icon size="sm" color="muted" style={{ opacity: 0.7, margin: '0 6px' }}>
-              <Slash />
+            <Icon size="sm" color="muted" rotate={90} style={{ opacity: 0.7, margin: '0 6px' }}>
+              <Minus />
             </Icon>
             {websiteId && (
               <WebsiteSelect
@@ -61,8 +61,7 @@ export function TopNav() {
                 teamId={teamId}
                 onChange={handleWebsiteChange}
                 buttonProps={{
-                  variant: 'quiet',
-                  style: { minHeight: 40, minWidth: 200, maxWidth: 200 },
+                  style: { minWidth: 200, maxWidth: 200 },
                 }}
               />
             )}

src/components/input/TeamsButton.tsx

@@ -1,12 +1,11 @@
 import {
   Button,
-  DialogTrigger,
   Icon,
   Menu,
   MenuItem,
   MenuSection,
   MenuSeparator,
-  Popover,
+  MenuTrigger,
   Row,
   Text,
 } from '@umami/react-zen';
@@ -53,7 +52,7 @@ export function TeamsButton() {
   };
 
   return (
-    <DialogTrigger>
+    <MenuTrigger>
       <Button variant="quiet">
         <Row
           alignItems="center"
@@ -70,37 +69,32 @@ export function TeamsButton() {
           <ChevronRight />
         </Icon>
       </Button>
-      <Popover side="bottom" align="start" sideOffset={4}>
-        <Menu className="min-w-[300px]" selectionMode="single" selectedKeys={selectedKeys}>
-          <MenuSection title={t(labels.myAccount)}>
-            <MenuItem id="user" onAction={handleAction}>
-              <IconLabel icon={<User />} label={user.username} />
+      <Menu className="min-w-[300px]" selectionMode="single" selectedKeys={selectedKeys}>
+        <MenuSection title={t(labels.myAccount)}>
+          <MenuItem id="user" onAction={handleAction}>
+            <IconLabel icon={<User />} label={user.username} />
+          </MenuItem>
+        </MenuSection>
+        <MenuSeparator />
+        <MenuSection title={t(labels.teams)}>
+          {user?.teams?.map(({ id, name }) => (
+            <MenuItem key={id} id={id} onAction={() => handleNavigate(getUrl(`/teams/${id}`))}>
+              <IconLabel icon={<Users />}>
+                <Text wrap="nowrap">{name}</Text>
+              </IconLabel>
             </MenuItem>
-          </MenuSection>
+          ))}
           <MenuSeparator />
-          <MenuSection title={t(labels.teams)}>
-            {user?.teams?.map(({ id, name }) => (
-              <MenuItem key={id} id={id} onAction={() => handleNavigate(getUrl(`/teams/${id}`))}>
-                <IconLabel icon={<Users />}>
-                  <Text wrap="nowrap">{name}</Text>
-                </IconLabel>
-              </MenuItem>
-            ))}
-            <MenuSeparator />
-            <MenuItem
-              id="manage-teams"
-              onAction={() => handleNavigate(getUrl('/settings/teams'))}
-            >
-              <Row alignItems="center" justifyContent="space-between" gap width="100%">
-                <Text align="center">Manage teams</Text>
-                <Icon>
-                  <ArrowRight />
-                </Icon>
-              </Row>
-            </MenuItem>
-          </MenuSection>
-        </Menu>
-      </Popover>
-    </DialogTrigger>
+          <MenuItem id="manage-teams" onAction={() => handleNavigate(getUrl('/settings/teams'))}>
+            <Row alignItems="center" justifyContent="space-between" gap width="100%">
+              <Text align="center">Manage teams</Text>
+              <Icon>
+                <ArrowRight />
+              </Icon>
+            </Row>
+          </MenuItem>
+        </MenuSection>
+      </Menu>
+    </MenuTrigger>
   );
 }

src/components/input/WebsiteSelect.tsx

@@ -84,8 +84,13 @@ export function WebsiteSelect({
       renderValue={renderValue}
       buttonProps={{
         ...buttonProps,
+        className: [
+          'border-transparent bg-transparent shadow-none hover:border-transparent hover:bg-interactive active:bg-interactive-hover',
+          buttonProps?.className,
+        ]
+          .filter(Boolean)
+          .join(' '),
         style: {
-          minHeight: 40,
           gap: 0,
           justifyContent: isCollapsed ? 'start' : undefined,
           ...buttonProps?.style,