Updated nav.

src/app/(main)/SideNav.tsx

@@ -18,6 +18,8 @@ import {
 } from '@/components/icons';
 import { useMessages, useNavigation, useGlobalState } from '@/components/hooks';
 import { WebsiteNav } from '@/app/(main)/websites/[websiteId]/WebsiteNav';
+import { TeamsButton } from '@/components/input/TeamsButton';
+import { PanelButton } from '@/components/input/PanelButton';
 
 export function SideNav(props: SidebarProps) {
   const { formatMessage, labels } = useMessages();
@@ -73,7 +75,6 @@ export function SideNav(props: SidebarProps) {
         {...props}
         isCollapsed={isCollapsed || isWebsite}
         muteItems={false}
-        variant="quiet"
         showBorder={false}
       >
         <SidebarSection>
@@ -98,6 +99,12 @@ export function SideNav(props: SidebarProps) {
               );
             })}
         </SidebarSection>
+        <SidebarSection>
+          <TeamsButton showText={!isCollapsed} />
+          <Row>
+            <PanelButton isDisabled={!!isWebsite} />
+          </Row>
+        </SidebarSection>
       </Sidebar>
       {isWebsite && <WebsiteNav websiteId={websiteId} />}
     </Row>

src/app/(main)/TopNav.tsx

@@ -1,44 +1,22 @@
-import { ThemeButton, Row, Icon } from '@umami/react-zen';
+import { ThemeButton, Row } from '@umami/react-zen';
 import { LanguageButton } from '@/components/input/LanguageButton';
 import { ProfileButton } from '@/components/input/ProfileButton';
-import { TeamsButton } from '@/components/input/TeamsButton';
-import { WebsiteSelect } from '@/components/input/WebsiteSelect';
-import { Slash } from '@/components/icons';
-import { useNavigation } from '@/components/hooks';
-import { PanelButton } from '@/components/input/PanelButton';
 
 export function TopNav() {
-  const { teamId, websiteId, pathname } = useNavigation();
-  const isWebsite = websiteId && !pathname.includes('/settings');
-
   return (
     <Row
-      justifyContent="space-between"
+      position="absolute"
+      top="0"
       alignItems="center"
+      justifyContent="flex-end"
       paddingY="2"
       paddingX="3"
       paddingRight="5"
       width="100%"
       style={{ position: 'sticky', top: 0 }}
-      backgroundColor="2"
       zIndex={1}
     >
-      <Row alignItems="center">
-        <PanelButton isDisabled={!!isWebsite} />
-        <Seperator />
-        <TeamsButton />
-        {isWebsite && (
-          <>
-            <Seperator />
-            <WebsiteSelect
-              buttonProps={{ variant: 'quiet' }}
-              websiteId={websiteId}
-              teamId={teamId}
-            />
-          </>
-        )}
-      </Row>
-      <Row alignItems="center" justifyContent="flex-end">
+      <Row alignItems="center" justifyContent="flex-end" backgroundColor="2" borderRadius>
         <ThemeButton />
         <LanguageButton />
         <ProfileButton />
@@ -46,11 +24,3 @@ export function TopNav() {
     </Row>
   );
 }
-
-const Seperator = () => {
-  return (
-    <Icon strokeColor="7" rotate={-25}>
-      <Slash />
-    </Icon>
-  );
-};

src/app/(main)/settings/SettingsLayout.tsx

@@ -22,11 +22,6 @@ export function SettingsLayout({ children }: { children: ReactNode }) {
       label: formatMessage(labels.profile),
       url: '/settings/profile',
     },
-    {
-      id: 'websites',
-      label: formatMessage(labels.websites),
-      url: '/settings/websites',
-    },
     { id: 'teams', label: formatMessage(labels.teams), url: '/settings/teams' },
   ];
 

src/app/(main)/settings/profile/PasswordChangeButton.tsx

@@ -1,13 +1,4 @@
-import {
-  Button,
-  Icon,
-  Text,
-  useToast,
-  DialogTrigger,
-  Dialog,
-  Modal,
-  Column,
-} from '@umami/react-zen';
+import { Button, Icon, Text, useToast, DialogTrigger, Dialog, Modal } from '@umami/react-zen';
 import { PasswordEditForm } from './PasswordEditForm';
 import { LockKeyhole } from '@/components/icons';
 import { useMessages } from '@/components/hooks';
@@ -30,11 +21,7 @@ export function PasswordChangeButton() {
       </Button>
       <Modal>
         <Dialog title={formatMessage(labels.changePassword)} style={{ width: 400 }}>
-          {({ close }) => (
-            <Column width="300px">
-              <PasswordEditForm onSave={handleSave} onClose={close} />
-            </Column>
-          )}
+          {({ close }) => <PasswordEditForm onSave={handleSave} onClose={close} />}
         </Dialog>
       </Modal>
     </DialogTrigger>

src/app/(main)/websites/[websiteId]/WebsiteNav.tsx

@@ -17,10 +17,11 @@ import {
 } from '@/components/icons';
 import { useMessages, useNavigation } from '@/components/hooks';
 import Link from 'next/link';
+import { WebsiteSelect } from '@/components/input/WebsiteSelect';
 
 export function WebsiteNav({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();
-  const { pathname, renderUrl } = useNavigation();
+  const { pathname, renderUrl, teamId } = useNavigation();
 
   const links = [
     {
@@ -135,7 +136,8 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
 
   return (
     <Column gap padding width="240px" border="left" overflowY="auto">
-      <NavMenu highlightColor="2">
+      <WebsiteSelect buttonProps={{ variant: 'quiet' }} websiteId={websiteId} teamId={teamId} />
+      <NavMenu muteItems={false}>
         {links.map(({ label, items }) => {
           return (
             <NavMenuGroup title={label} key={label} gap="1">