Moved collapse button.

src/app/(main)/App.tsx

@@ -4,7 +4,7 @@ import Script from 'next/script';
 import { usePathname } from 'next/navigation';
 import { UpdateNotice } from './UpdateNotice';
 import { Nav } from '@/app/(main)/Nav';
-import { NavBar } from '@/app/(main)/NavBar';
+import { MenuBar } from '@/app/(main)/MenuBar';
 import { Page } from '@/components/layout/Page';
 import { useLogin, useConfig } from '@/components/hooks';
 
@@ -32,7 +32,7 @@ export function App({ children }) {
   return (
     <Grid height="100vh" width="100%" columns="auto 1fr" rows="auto 1fr" overflow="hidden">
       <Nav gridColumn="1 / 2" gridRow="1 / 3" />
-      <NavBar gridColumn="2 / 3" gridRow="1 / 2" />
+      <MenuBar gridColumn="2 / 3" gridRow="1 / 2" />
       <Column gridColumn="2 / 3" gridRow="2 / 3" alignItems="center" overflow="auto">
         <Page>
           {children}

src/app/(main)/MenuBar.tsx

@@ -1,10 +1,14 @@
-import { ThemeButton, Row } from '@umami/react-zen';
+import { ThemeButton, Row, Button, Icon } from '@umami/react-zen';
 import { LanguageButton } from '@/components/input/LanguageButton';
 import { ProfileButton } from '@/components/input/ProfileButton';
 import { TeamsButton } from '@/components/input/TeamsButton';
 import type { RowProps } from '@umami/react-zen/Row';
+import useGlobalState from '@/components/hooks/useGlobalState';
+import { Lucide } from '@/components/icons';
+
+export function MenuBar(props: RowProps) {
+  const [isCollapsed, setCollapsed] = useGlobalState('sidenav-collapsed');
 
-export function NavBar(props: RowProps) {
   return (
     <Row
       {...props}
@@ -14,7 +18,14 @@ export function NavBar(props: RowProps) {
       paddingX="3"
       paddingRight="5"
     >
-      <TeamsButton />
+      <Row>
+        <Button onPress={() => setCollapsed(!isCollapsed)} variant="quiet">
+          <Icon>
+            <Lucide.PanelLeft />
+          </Icon>
+        </Button>
+        <TeamsButton />
+      </Row>
       <Row justifyContent="flex-end">
         <ThemeButton />
         <LanguageButton />

src/app/(main)/Nav.tsx

@@ -1,21 +1,13 @@
-import { useState } from 'react';
 import Link from 'next/link';
-import {
-  SideNav,
-  SideNavHeader,
-  SideNavSection,
-  SideNavItem,
-  Button,
-  Icon,
-  Row,
-} from '@umami/react-zen';
+import { SideNav, SideNavHeader, SideNavSection, SideNavItem } from '@umami/react-zen';
 import { Lucide, Icons } from '@/components/icons';
 import { useMessages, useTeamUrl } from '@/components/hooks';
+import useGlobalState from '@/components/hooks/useGlobalState';
 
 export function Nav(props: any) {
   const { formatMessage, labels } = useMessages();
   const { renderTeamUrl, pathname } = useTeamUrl();
-  const [isCollapsed, setCollapsed] = useState(false);
+  const [isCollapsed] = useGlobalState('sidenav-collapsed');
 
   const links = [
     {
@@ -46,7 +38,7 @@ export function Nav(props: any) {
   ].filter(n => n);
 
   return (
-    <SideNav {...props} isCollapsed={isCollapsed} variant="3" showBorder={true}>
+    <SideNav {...props} isCollapsed={isCollapsed} variant="2" showBorder={true}>
       <SideNavSection>
         <SideNavHeader label="umami" icon={<Icons.Logo />} />
       </SideNavSection>
@@ -59,15 +51,7 @@ export function Nav(props: any) {
           );
         })}
       </SideNavSection>
-      <SideNavSection alignSelf="end">
-        <Row justifyContent="flex-start">
-          <Button onPress={() => setCollapsed(!isCollapsed)} variant="quiet">
-            <Icon>
-              <Lucide.PanelLeft />
-            </Icon>
-          </Button>
-        </Row>
-      </SideNavSection>
+      <SideNavSection alignSelf="end"></SideNavSection>
     </SideNav>
   );
 }