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,7 +69,6 @@ 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}>
@@ -87,10 +85,7 @@ export function TeamsButton() {
             </MenuItem>
           ))}
           <MenuSeparator />
-            <MenuItem
-              id="manage-teams"
-              onAction={() => handleNavigate(getUrl('/settings/teams'))}
-            >
+          <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>
@@ -100,7 +95,6 @@ export function TeamsButton() {
           </MenuItem>
         </MenuSection>
       </Menu>
-      </Popover>
-    </DialogTrigger>
+    </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,