Fixed sidenav rendering.

package.json

@@ -82,7 +82,7 @@
     "@react-spring/web": "^9.7.3",
     "@svgr/cli": "^8.1.0",
     "@tanstack/react-query": "^5.83.0",
-    "@umami/react-zen": "^0.157.0",
+    "@umami/react-zen": "^0.162.0",
     "@umami/redis-client": "^0.27.0",
     "bcryptjs": "^3.0.2",
     "chalk": "^5.4.1",

pnpm-lock.yaml

@@ -45,8 +45,8 @@ importers:
         specifier: ^5.83.0
         version: 5.83.0(react@19.1.1)
       '@umami/react-zen':
-        specifier: ^0.157.0
-        version: 0.157.0(@babel/core@7.27.1)(@types/react@19.1.9)(babel-plugin-react-compiler@19.1.0-rc.2)(immer@9.0.21)(use-sync-external-store@1.5.0(react@19.1.1))
+        specifier: ^0.162.0
+        version: 0.162.0(@babel/core@7.27.1)(@types/react@19.1.9)(babel-plugin-react-compiler@19.1.0-rc.2)(immer@9.0.21)(use-sync-external-store@1.5.0(react@19.1.1))
       '@umami/redis-client':
         specifier: ^0.27.0
         version: 0.27.0
@@ -2547,8 +2547,8 @@ packages:
     resolution: {integrity: sha512-pWrTcoFNWuwHlA9CvlfSsGWs14JxfN1TH25zM5L7o0pRLhsoZkDnTsXfQRJBEWJoV5DL0jf+Z+sxiud+K0mq1g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@umami/react-zen@0.157.0':
-    resolution: {integrity: sha512-QZqZcah1t6KniDvFTF+GxBDkaEYUuQOyj1olao5p5rtZBMW1/v4GaVcL+8UAzWyWIUnsrRI3e5HoytapJg6VfQ==}
+  '@umami/react-zen@0.162.0':
+    resolution: {integrity: sha512-pQs5XV6arCjeyWjBBy2rCW2UcWKbq2HjU44iskaV63D88b3sWL6dyx4FnHfJ/0UQv20OJ1gv0qqElB4fva3d8Q==}
 
   '@umami/redis-client@0.27.0':
     resolution: {integrity: sha512-SbHTpxhgeZyTBUSp2zdZM+XUtpsaSL4Tad8QXIEhEtjWhvvfoornyT5kLuyYCVtzSAT4daALeGmOO1z6EE1KcA==}
@@ -9873,7 +9873,7 @@ snapshots:
       '@typescript-eslint/types': 8.38.0
       eslint-visitor-keys: 4.2.1
 
-  '@umami/react-zen@0.157.0(@babel/core@7.27.1)(@types/react@19.1.9)(babel-plugin-react-compiler@19.1.0-rc.2)(immer@9.0.21)(use-sync-external-store@1.5.0(react@19.1.1))':
+  '@umami/react-zen@0.162.0(@babel/core@7.27.1)(@types/react@19.1.9)(babel-plugin-react-compiler@19.1.0-rc.2)(immer@9.0.21)(use-sync-external-store@1.5.0(react@19.1.1))':
     dependencies:
       '@fontsource/jetbrains-mono': 5.2.6
       '@internationalized/date': 3.8.2

src/app/(main)/SideNav.tsx

@@ -23,7 +23,7 @@ import { PanelButton } from '@/components/input/PanelButton';
 export function SideNav(props: SidebarProps) {
   const { formatMessage, labels } = useMessages();
   const { pathname, renderUrl, websiteId } = useNavigation();
-  const [isCollapsed] = useGlobalState('sidenav-collapsed');
+  let [isCollapsed] = useGlobalState('sidenav-collapsed');
 
   const hasNav = !!(
     websiteId ||
@@ -32,19 +32,23 @@ export function SideNav(props: SidebarProps) {
     pathname.endsWith('/settings')
   );
 
+  if (hasNav) {
+    isCollapsed = true;
+  }
+
   const links = [
-    {
-      id: 'websites',
-      label: formatMessage(labels.websites),
-      path: '/websites',
-      icon: <Globe />,
-    },
     {
       id: 'boards',
       label: formatMessage(labels.boards),
       path: '/boards',
       icon: <LayoutDashboard />,
     },
+    {
+      id: 'websites',
+      label: formatMessage(labels.websites),
+      path: '/websites',
+      icon: <Globe />,
+    },
     {
       id: 'links',
       label: formatMessage(labels.links),

src/app/(main)/links/LinksPage.tsx

@@ -0,0 +1,24 @@
+'use client';
+import { PageBody } from '@/components/common/PageBody';
+import { Column } from '@umami/react-zen';
+import { PageHeader } from '@/components/common/PageHeader';
+import { BoardAddButton } from '@/app/(main)/boards/BoardAddButton';
+import Link from 'next/link';
+import { useMessages } from '@/components/hooks';
+
+export function LinksPage() {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <PageBody>
+      <Column>
+        <PageHeader title={formatMessage(labels.links)}>
+          <BoardAddButton />
+        </PageHeader>
+        <Link href="/teams/3a97e34a-7f9d-4de2-8754-ed81714b528d/boards/86d4095c-a2a8-4fc8-9521-103e858e2b41">
+          Board 1
+        </Link>
+      </Column>
+    </PageBody>
+  );
+}

src/app/(main)/links/page.tsx

@@ -0,0 +1,10 @@
+import { LinksPage } from './LinksPage';
+import { Metadata } from 'next';
+
+export default function () {
+  return <LinksPage />;
+}
+
+export const metadata: Metadata = {
+  title: 'Links',
+};

src/app/(main)/pixels/PixelsPage.tsx

@@ -0,0 +1,24 @@
+'use client';
+import { PageBody } from '@/components/common/PageBody';
+import { Column } from '@umami/react-zen';
+import { PageHeader } from '@/components/common/PageHeader';
+import { BoardAddButton } from '@/app/(main)/boards/BoardAddButton';
+import Link from 'next/link';
+import { useMessages } from '@/components/hooks';
+
+export function PixelsPage() {
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <PageBody>
+      <Column>
+        <PageHeader title={formatMessage(labels.pixels)}>
+          <BoardAddButton />
+        </PageHeader>
+        <Link href="/teams/3a97e34a-7f9d-4de2-8754-ed81714b528d/boards/86d4095c-a2a8-4fc8-9521-103e858e2b41">
+          Board 1
+        </Link>
+      </Column>
+    </PageBody>
+  );
+}

src/app/(main)/pixels/page.tsx

@@ -0,0 +1,10 @@
+import { PixelsPage } from './PixelsPage';
+import { Metadata } from 'next';
+
+export default function () {
+  return <PixelsPage />;
+}
+
+export const metadata: Metadata = {
+  title: 'Pixels',
+};

src/components/common/LoadingPanel.tsx

@@ -28,9 +28,13 @@ export function LoadingPanel({
   const empty = isEmpty ?? checkEmpty(data);
 
   return (
-    <Column position="relative" flexGrow={1} overflow="hidden" {...props}>
+    <>
       {/* Show loading spinner only if no data exists */}
-      {(isLoading || isFetching) && !data && <Loading icon={loadingIcon} position="page" />}
+      {(isLoading || isFetching) && !data && (
+        <Column position="relative" height="100%" {...props}>
+          <Loading icon={loadingIcon} position="page" />
+        </Column>
+      )}
 
       {/* Show error */}
       {error && <ErrorMessage />}
@@ -40,7 +44,7 @@ export function LoadingPanel({
 
       {/* Show main content when data exists */}
       {!error && !empty && children}
-    </Column>
+    </>
   );
 }
 

src/components/input/TeamsButton.tsx

@@ -25,6 +25,7 @@ export function TeamsButton({ showText = true }: { showText?: boolean }) {
   const router = useRouter();
   const team = data?.data?.find(({ id }) => id === teamId);
   const selectedKeys = new Set([teamId || user.id]);
+  const label = teamId ? team?.name : user.username;
 
   const handleSelect = (id: Key) => {
     router.push(id === user.id ? '/websites' : `/teams/${id}/websites`);
@@ -37,11 +38,8 @@ export function TeamsButton({ showText = true }: { showText?: boolean }) {
   return (
     <MenuTrigger>
       <Pressable>
-        <Row alignItems="center" justifyContent="space-between" width="100%" gap>
-          <SidebarItem
-            label={teamId ? team?.name : user.username}
-            icon={teamId ? <Users /> : <User />}
-          >
+        <Row width="100%" backgroundColor="2" border borderRadius>
+          <SidebarItem label={label} icon={teamId ? <Users /> : <User />}>
             {showText && (
               <Icon rotate={90} size="sm">
                 <Chevron />