Moved collapse button.

package.json

@@ -78,7 +78,7 @@
     "@react-spring/web": "^9.7.5",
     "@tanstack/react-query": "^5.68.0",
     "@umami/prisma-client": "^0.16.0",
-    "@umami/react-zen": "^0.63.0",
+    "@umami/react-zen": "^0.66.0",
     "@umami/redis-client": "^0.27.0",
     "bcryptjs": "^2.4.3",
     "chalk": "^4.1.2",
@@ -194,6 +194,7 @@
       "esbuild",
       "prisma",
       "sharp"
-    ]
+    ],
+    "overrides": {}
   }
 }

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>
   );
 }

src/components/hooks/useGlobalState.ts

@@ -0,0 +1,13 @@
+import { create } from 'zustand';
+
+const store = create(() => ({}));
+
+const useGlobalState = (key: string, value?: any) => {
+  if (value !== undefined && !store.getState()[key]) {
+    store.setState({ [key]: value });
+  }
+
+  return [store(state => state[key]), (value: any) => store.setState({ [key]: value })];
+};
+
+export default useGlobalState;

src/styles/global.css

@@ -3,7 +3,7 @@ body {
   font-family: var(--font-family), sans-serif;
   color: var(--font-color);
   font-size: var(--font-size);
-  background-color: var(--base-color-2);
+  background-color: var(--background-color);
   width: 100%;
   min-height: 100vh;
   overflow: hidden;
@@ -29,19 +29,18 @@ svg {
 
 ::-webkit-scrollbar-track {
   border: 7px solid rgba(0, 0, 0, 0);
-  background-color: var(--base-color-3);
+  background-color: var(--base-color-4);
   background-clip: padding-box;
 }
 
 ::-webkit-scrollbar-thumb {
   border: 7px solid rgba(0, 0, 0, 0);
-  background-color: var(--base-color-8);
+  background-color: var(--base-color-9);
   border-radius: var(--border-radius-full);
   background-clip: padding-box;
 }
 
 ::-webkit-scrollbar-thumb:hover {
   border: 4px solid rgba(0, 0, 0, 0);
-  background-color: var(--base-color-8);
   background-clip: padding-box;
 }