Updated layout. Fixed properties rendering.

src/components/input/PanelButton.tsx

@@ -0,0 +1,14 @@
+import { Button, Icon } from '@umami/react-zen';
+import { PanelLeft } from '@/components/icons';
+import { useGlobalState } from '@/components/hooks';
+
+export function PanelButton() {
+  const [isCollapsed, setIsCollapsed] = useGlobalState('sidenav-collapsed');
+  return (
+    <Button onPress={() => setIsCollapsed(!isCollapsed)} variant="quiet">
+      <Icon>
+        <PanelLeft />
+      </Icon>
+    </Button>
+  );
+}

src/components/input/TeamsButton.tsx

@@ -16,13 +16,7 @@ import {
 import { useLoginQuery, useMessages, useUserTeamsQuery, useNavigation } from '@/components/hooks';
 import { Chevron, User, Users } from '@/components/icons';
 
-export function TeamsButton({
-  className,
-  showText = true,
-}: {
-  className?: string;
-  showText?: boolean;
-}) {
+export function TeamsButton({ showText = true }: { showText?: boolean }) {
   const { user } = useLoginQuery();
   const { formatMessage, labels } = useMessages();
   const { data } = useUserTeamsQuery(user.id);
@@ -41,13 +35,17 @@ export function TeamsButton({
 
   return (
     <MenuTrigger>
-      <Button className={className} variant="quiet">
-        <Row alignItems="center" gap="3">
-          <Icon>{teamId ? <Users /> : <User />}</Icon>
-          {showText && <Text>{teamId ? team?.name : user.username}</Text>}
-          <Icon rotate={90} size="sm">
-            <Chevron />
-          </Icon>
+      <Button variant="quiet">
+        <Row alignItems="center" justifyContent="space-between" width="100%" gap>
+          <Row alignItems="center" gap>
+            <Icon>{teamId ? <Users /> : <User />}</Icon>
+            {showText && <Text truncate>{teamId ? team?.name : user.username}</Text>}
+          </Row>
+          {showText && (
+            <Icon rotate={90} size="sm">
+              <Chevron />
+            </Icon>
+          )}
         </Row>
       </Button>
       <Popover placement="bottom start">

src/components/input/WebsiteSelect.tsx

@@ -1,16 +1,17 @@
 import { useState } from 'react';
 import { Select, SelectProps, ListItem } from '@umami/react-zen';
 import { useUserWebsitesQuery, useWebsiteQuery, useNavigation } from '@/components/hooks';
+import { ButtonProps } from 'react-basics';
 
 export function WebsiteSelect({
   websiteId,
   teamId,
-  variant,
+  buttonProps,
   ...props
 }: {
   websiteId?: string;
   teamId?: string;
-  variant?: 'primary' | 'outline' | 'quiet' | 'danger' | 'zero';
+  buttonProps?: ButtonProps;
 } & SelectProps) {
   const { router, renderUrl } = useNavigation();
   const [search, setSearch] = useState('');
@@ -32,7 +33,7 @@ export function WebsiteSelect({
       items={data?.['data'] || []}
       value={websiteId}
       isLoading={isLoading}
-      buttonProps={{ variant }}
+      buttonProps={buttonProps}
       allowSearch={true}
       searchValue={search}
       onSearch={handleSearch}