134 improvement add a button that allows closing the sidebar (#135)

* Enhance sidebar navigation and layout configuration

- Added support for configurable sidebar collapsed style
- Updated layout components to use new sidebar configuration
- Added environment variable for sidebar trigger display
- Simplified page header and navigation components
- Improved sidebar responsiveness and user experience

* Refactor admin account page layout and action buttons

- Moved action buttons from sidebar to PageHeader for both personal and team account pages
- Updated button variants and styling for better visual hierarchy
- Improved spacing and layout of account page components
- Added border to PageHeader for better visual separation

* Update version updater dialog styling

- Replaced `space-x-4` with `gap-x-2` for better spacing
- Wrapped translation text in a `span` for improved layout
- Maintained consistent icon and text alignment in dialog title

* Refactor sidebar state management and configuration

- Simplified sidebar context and removed minimized state
- Updated layout components to use new sidebar open/closed state
- Modified sidebar navigation to handle collapsed state dynamically
- Added environment variable for sidebar trigger and collapsed style
- Improved sidebar responsiveness and rendering logic

* Remove sidebar configuration and environment variables

- Simplified sidebar context by removing `minimized` state in components
- Updated account selector components to use simplified sidebar state
- Removed unused helper functions in sidebar implementation

apps/web/app/admin/_components/admin-sidebar.tsx

@@ -15,7 +15,6 @@ import {
   SidebarHeader,
   SidebarMenu,
   SidebarMenuButton,
-  SidebarProvider,
 } from '@kit/ui/shadcn-sidebar';
 
 import { AppLogo } from '~/components/app-logo';
@@ -25,46 +24,44 @@ export function AdminSidebar() {
   const path = usePathname();
 
   return (
-    <SidebarProvider>
-      <Sidebar>
-        <SidebarHeader className={'m-2'}>
-          <AppLogo href={'/admin'} />
-        </SidebarHeader>
+    <Sidebar collapsible="icon">
+      <SidebarHeader className={'m-2'}>
+        <AppLogo href={'/admin'} className="max-w-full" />
+      </SidebarHeader>
 
-        <SidebarContent>
-          <SidebarGroup>
-            <SidebarGroupLabel>Admin</SidebarGroupLabel>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Admin</SidebarGroupLabel>
 
-            <SidebarGroupContent>
-              <SidebarMenu>
-                <SidebarMenuButton isActive={path === '/admin'} asChild>
-                  <Link className={'flex gap-2.5'} href={'/admin'}>
-                    <LayoutDashboard className={'h-4'} />
-                    <span>Dashboard</span>
-                  </Link>
-                </SidebarMenuButton>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuButton isActive={path === '/admin'} asChild>
+                <Link className={'flex gap-2.5'} href={'/admin'}>
+                  <LayoutDashboard className={'h-4'} />
+                  <span>Dashboard</span>
+                </Link>
+              </SidebarMenuButton>
 
-                <SidebarMenuButton
-                  isActive={path.includes('/admin/accounts')}
-                  asChild
+              <SidebarMenuButton
+                isActive={path.includes('/admin/accounts')}
+                asChild
+              >
+                <Link
+                  className={'flex size-full gap-2.5'}
+                  href={'/admin/accounts'}
                 >
-                  <Link
-                    className={'flex size-full gap-2.5'}
-                    href={'/admin/accounts'}
-                  >
-                    <Users className={'h-4'} />
-                    <span>Accounts</span>
-                  </Link>
-                </SidebarMenuButton>
-              </SidebarMenu>
-            </SidebarGroupContent>
-          </SidebarGroup>
-        </SidebarContent>
+                  <Users className={'h-4'} />
+                  <span>Accounts</span>
+                </Link>
+              </SidebarMenuButton>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
 
-        <SidebarFooter>
-          <ProfileAccountDropdownContainer />
-        </SidebarFooter>
-      </Sidebar>
-    </SidebarProvider>
+      <SidebarFooter>
+        <ProfileAccountDropdownContainer />
+      </SidebarFooter>
+    </Sidebar>
   );
 }

apps/web/app/admin/accounts/[id]/page.tsx

@@ -3,7 +3,6 @@ import { cache } from 'react';
 import { AdminAccountPage } from '@kit/admin/components/admin-account-page';
 import { AdminGuard } from '@kit/admin/components/admin-guard';
 import { getSupabaseServerAdminClient } from '@kit/supabase/server-admin-client';
-import { PageBody } from '@kit/ui/page';
 
 interface Params {
   params: Promise<{
@@ -24,11 +23,7 @@ async function AccountPage(props: Params) {
   const params = await props.params;
   const account = await loadAccount(params.id);
 
-  return (
-    <PageBody className={'py-4'}>
-      <AdminAccountPage account={account} />
-    </PageBody>
-  );
+  return <AdminAccountPage account={account} />;
 }
 
 export default AdminGuard(AccountPage);

apps/web/app/admin/accounts/page.tsx

@@ -3,6 +3,7 @@ import { ServerDataLoader } from '@makerkit/data-loader-supabase-nextjs';
 import { AdminAccountsTable } from '@kit/admin/components/admin-accounts-table';
 import { AdminGuard } from '@kit/admin/components/admin-guard';
 import { getSupabaseServerAdminClient } from '@kit/supabase/server-admin-client';
+import { AppBreadcrumbs } from '@kit/ui/app-breadcrumbs';
 import { PageBody, PageHeader } from '@kit/ui/page';
 
 interface SearchParams {
@@ -28,10 +29,7 @@ async function AccountsPage(props: AdminAccountsPageProps) {
 
   return (
     <>
-      <PageHeader
-        title={'Accounts'}
-        description={`Below is the list of all the accounts in your application.`}
-      />
+      <PageHeader description={<AppBreadcrumbs />} />
 
       <PageBody>
         <ServerDataLoader

apps/web/app/admin/layout.tsx

@@ -1,4 +1,9 @@
+import { use } from 'react';
+
+import { cookies } from 'next/headers';
+
 import { Page, PageMobileNavigation, PageNavigation } from '@kit/ui/page';
+import { SidebarProvider } from '@kit/ui/shadcn-sidebar';
 
 import { AdminSidebar } from '~/admin/_components/admin-sidebar';
 import { AdminMobileNavigation } from '~/admin/_components/mobile-navigation';
@@ -10,17 +15,30 @@ export const metadata = {
 export const dynamic = 'force-dynamic';
 
 export default function AdminLayout(props: React.PropsWithChildren) {
+  const state = use(getLayoutState());
+
   return (
-    <Page style={'sidebar'}>
-      <PageNavigation>
-        <AdminSidebar />
-      </PageNavigation>
+    <SidebarProvider defaultOpen={state.open}>
+      <Page style={'sidebar'}>
+        <PageNavigation>
+          <AdminSidebar />
+        </PageNavigation>
 
-      <PageMobileNavigation>
-        <AdminMobileNavigation />
-      </PageMobileNavigation>
+        <PageMobileNavigation>
+          <AdminMobileNavigation />
+        </PageMobileNavigation>
 
-      {props.children}
-    </Page>
+        {props.children}
+      </Page>
+    </SidebarProvider>
   );
 }
+
+async function getLayoutState() {
+  const cookieStore = await cookies();
+  const sidebarOpenCookie = cookieStore.get('sidebar:state');
+
+  return {
+    open: sidebarOpenCookie?.value !== 'true',
+  };
+}

apps/web/app/admin/page.tsx

@@ -5,10 +5,7 @@ import { PageBody, PageHeader } from '@kit/ui/page';
 function AdminPage() {
   return (
     <>
-      <PageHeader
-        title={'Super Admin'}
-        description={`Your SaaS stats at a glance`}
-      />
+      <PageHeader description={`Super Admin`} />
 
       <PageBody>
         <AdminDashboard />