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 collapsible="icon">
-      <Sidebar>
+      <SidebarHeader className={'m-2'}>
-        <SidebarHeader className={'m-2'}>
+        <AppLogo href={'/admin'} className="max-w-full" />
-          <AppLogo href={'/admin'} />
+      </SidebarHeader>
-        </SidebarHeader>
 
-        <SidebarContent>
+      <SidebarContent>
-          <SidebarGroup>
+        <SidebarGroup>
-            <SidebarGroupLabel>Admin</SidebarGroupLabel>
+          <SidebarGroupLabel>Admin</SidebarGroupLabel>
 
-            <SidebarGroupContent>
+          <SidebarGroupContent>
-              <SidebarMenu>
+            <SidebarMenu>
-                <SidebarMenuButton isActive={path === '/admin'} asChild>
+              <SidebarMenuButton isActive={path === '/admin'} asChild>
-                  <Link className={'flex gap-2.5'} href={'/admin'}>
+                <Link className={'flex gap-2.5'} href={'/admin'}>
-                    <LayoutDashboard className={'h-4'} />
+                  <LayoutDashboard className={'h-4'} />
-                    <span>Dashboard</span>
+                  <span>Dashboard</span>
-                  </Link>
+                </Link>
-                </SidebarMenuButton>
+              </SidebarMenuButton>
 
-                <SidebarMenuButton
+              <SidebarMenuButton
-                  isActive={path.includes('/admin/accounts')}
+                isActive={path.includes('/admin/accounts')}
-                  asChild
+                asChild
+              >
+                <Link
+                  className={'flex size-full gap-2.5'}
+                  href={'/admin/accounts'}
                 >
-                  <Link
+                  <Users className={'h-4'} />
-                    className={'flex size-full gap-2.5'}
+                  <span>Accounts</span>
-                    href={'/admin/accounts'}
+                </Link>
-                  >
+              </SidebarMenuButton>
-                    <Users className={'h-4'} />
+            </SidebarMenu>
-                    <span>Accounts</span>
+          </SidebarGroupContent>
-                  </Link>
+        </SidebarGroup>
-                </SidebarMenuButton>
+      </SidebarContent>
-              </SidebarMenu>
-            </SidebarGroupContent>
-          </SidebarGroup>
-        </SidebarContent>
 
-        <SidebarFooter>
+      <SidebarFooter>
-          <ProfileAccountDropdownContainer />
+        <ProfileAccountDropdownContainer />
-        </SidebarFooter>
+      </SidebarFooter>
-      </Sidebar>
+    </Sidebar>
-    </SidebarProvider>
   );
 }

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 (
+  return <AdminAccountPage account={account} />;
-    <PageBody className={'py-4'}>
-      <AdminAccountPage account={account} />
-    </PageBody>
-  );
 }
 
 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
+      <PageHeader description={<AppBreadcrumbs />} />
-        title={'Accounts'}
-        description={`Below is the list of all the accounts in your application.`}
-      />
 
       <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'}>
+    <SidebarProvider defaultOpen={state.open}>
-      <PageNavigation>
+      <Page style={'sidebar'}>
-        <AdminSidebar />
+        <PageNavigation>
-      </PageNavigation>
+          <AdminSidebar />
+        </PageNavigation>
 
-      <PageMobileNavigation>
+        <PageMobileNavigation>
-        <AdminMobileNavigation />
+          <AdminMobileNavigation />
-      </PageMobileNavigation>
+        </PageMobileNavigation>
 
-      {props.children}
+        {props.children}
-    </Page>
+      </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
+      <PageHeader description={`Super Admin`} />
-        title={'Super Admin'}
-        description={`Your SaaS stats at a glance`}
-      />
 
       <PageBody>
         <AdminDashboard />

apps/web/app/home/(user)/_components/home-account-selector.tsx

@@ -29,7 +29,7 @@ export function HomeAccountSelector(props: {
 
   return (
     <AccountSelector
-      collapsed={context?.minimized}
+      collapsed={!context?.open}
       collisionPadding={props.collisionPadding ?? 20}
       accounts={props.accounts}
       features={features}

apps/web/app/home/(user)/_components/home-page-header.tsx

@@ -7,8 +7,6 @@ export function HomeLayoutPageHeader(
   }>,
 ) {
   return (
-    <PageHeader title={props.title} description={props.description}>
+    <PageHeader description={props.description}>{props.children}</PageHeader>
-      {props.children}
-    </PageHeader>
   );
 }

apps/web/app/home/(user)/_components/home-sidebar.tsx

@@ -20,24 +20,23 @@ import { HomeAccountSelector } from './home-account-selector';
 
 interface HomeSidebarProps {
   workspace: UserWorkspace;
-  minimized: boolean;
 }
 
 export function HomeSidebar(props: HomeSidebarProps) {
   const { workspace, user, accounts } = props.workspace;
+  const collapsible = personalAccountNavigationConfig.sidebarCollapsedStyle;
 
   return (
-    <Sidebar>
+    <Sidebar collapsible={collapsible}>
       <SidebarHeader className={'h-16 justify-center'}>
         <div className={'flex items-center justify-between gap-x-3'}>
           <If
             condition={featuresFlagConfig.enableTeamAccounts}
             fallback={
               <AppLogo
-                className={cn({
+                className={cn(
-                  'max-w-full': props.minimized,
+                  'py-2 group-data-[minimized=true]:max-w-full group-data-[minimized=true]:py-0',
-                  'py-2': !props.minimized,
+                )}
-                })}
               />
             }
           >

apps/web/app/home/(user)/layout.tsx

@@ -3,12 +3,7 @@ import { use } from 'react';
 import { cookies } from 'next/headers';
 
 import { UserWorkspaceContextProvider } from '@kit/accounts/components';
-import {
+import { Page, PageMobileNavigation, PageNavigation } from '@kit/ui/page';
-  Page,
-  PageLayoutStyle,
-  PageMobileNavigation,
-  PageNavigation,
-} from '@kit/ui/page';
 import { SidebarProvider } from '@kit/ui/shadcn-sidebar';
 
 import { AppLogo } from '~/components/app-logo';
@@ -22,9 +17,9 @@ import { HomeSidebar } from './_components/home-sidebar';
 import { loadUserWorkspace } from './_lib/server/load-user-workspace';
 
 function UserHomeLayout({ children }: React.PropsWithChildren) {
-  const style = use(getLayoutStyle());
+  const state = use(getLayoutState());
 
-  if (style === 'sidebar') {
+  if (state.style === 'sidebar') {
     return <SidebarLayout>{children}</SidebarLayout>;
   }
 
@@ -35,14 +30,16 @@ export default withI18n(UserHomeLayout);
 
 function SidebarLayout({ children }: React.PropsWithChildren) {
   const workspace = use(loadUserWorkspace());
-  const sidebarMinimized = personalAccountNavigationConfig.sidebarCollapsed;
+  const state = use(getLayoutState());
+
+  console.log('state', state);
 
   return (
     <UserWorkspaceContextProvider value={workspace}>
-      <SidebarProvider minimized={sidebarMinimized}>
+      <SidebarProvider defaultOpen={state.open}>
         <Page style={'sidebar'}>
           <PageNavigation>
-            <HomeSidebar workspace={workspace} minimized={sidebarMinimized} />
+            <HomeSidebar workspace={workspace} />
           </PageNavigation>
 
           <PageMobileNavigation className={'flex items-center justify-between'}>
@@ -90,11 +87,21 @@ function MobileNavigation({
   );
 }
 
-async function getLayoutStyle() {
+async function getLayoutState() {
   const cookieStore = await cookies();
 
-  return (
+  const layoutStyleCookie = cookieStore.get('layout-style');
-    (cookieStore.get('layout-style')?.value as PageLayoutStyle) ??
+  const sidebarOpenCookie = cookieStore.get('sidebar:state');
-    personalAccountNavigationConfig.style
+
-  );
+  const sidebarOpenCookieValue = sidebarOpenCookie
+    ? sidebarOpenCookie.value === 'false'
+    : personalAccountNavigationConfig.sidebarCollapsed;
+
+  const style =
+    layoutStyleCookie?.value ?? personalAccountNavigationConfig.style;
+
+  return {
+    open: sidebarOpenCookieValue,
+    style,
+  };
 }

apps/web/app/home/[account]/_components/team-account-accounts-selector.tsx

@@ -1,8 +1,11 @@
 'use client';
 
+import { useContext } from 'react';
+
 import { useRouter } from 'next/navigation';
 
 import { AccountSelector } from '@kit/accounts/account-selector';
+import { SidebarContext } from '@kit/ui/shadcn-sidebar';
 
 import featureFlagsConfig from '~/config/feature-flags.config';
 import pathsConfig from '~/config/paths.config';
@@ -20,17 +23,16 @@ export function TeamAccountAccountsSelector(params: {
     value: string | null;
     image: string | null;
   }>;
-
-  collapsed?: boolean;
 }) {
   const router = useRouter();
+  const ctx = useContext(SidebarContext);
 
   return (
     <AccountSelector
       selectedAccount={params.selectedAccount}
       accounts={params.accounts}
       userId={params.userId}
-      collapsed={params.collapsed}
+      collapsed={!ctx?.open}
       features={features}
       onAccountChange={(value) => {
         const path = value

apps/web/app/home/[account]/_components/team-account-layout-page-header.tsx

@@ -8,8 +8,6 @@ export function TeamAccountLayoutPageHeader(
   }>,
 ) {
   return (
-    <PageHeader title={props.title} description={props.description}>
+    <PageHeader description={props.description}>{props.children}</PageHeader>
-      {props.children}
-    </PageHeader>
   );
 }

apps/web/app/home/[account]/_components/team-account-layout-sidebar-navigation.tsx

@@ -1,13 +1,12 @@
+import { z } from 'zod';
+
+import { NavigationConfigSchema } from '@kit/ui/navigation-schema';
 import { SidebarNavigation } from '@kit/ui/shadcn-sidebar';
 
-import { getTeamAccountSidebarConfig } from '~/config/team-account-navigation.config';
-
 export function TeamAccountLayoutSidebarNavigation({
-  account,
+  config,
 }: React.PropsWithChildren<{
-  account: string;
+  config: z.infer<typeof NavigationConfigSchema>;
 }>) {
-  const routes = getTeamAccountSidebarConfig(account);
+  return <SidebarNavigation config={config} />;
-
-  return <SidebarNavigation config={routes} />;
 }

apps/web/app/home/[account]/_components/team-account-layout-sidebar.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import type { User } from '@supabase/supabase-js';
 
 import {
@@ -7,11 +5,10 @@ import {
   SidebarContent,
   SidebarFooter,
   SidebarHeader,
-  useSidebar,
 } from '@kit/ui/shadcn-sidebar';
-import { cn } from '@kit/ui/utils';
 
 import { ProfileAccountDropdownContainer } from '~/components//personal-account-dropdown-container';
+import { getTeamAccountSidebarConfig } from '~/config/team-account-navigation.config';
 import { TeamAccountNotifications } from '~/home/[account]/_components/team-account-notifications';
 
 import { TeamAccountAccountsSelector } from '../_components/team-account-accounts-selector';
@@ -47,27 +44,21 @@ function SidebarContainer(props: {
 }) {
   const { account, accounts, user } = props;
   const userId = user.id;
-  const { minimized } = useSidebar();
 
-  const className = cn(
+  const config = getTeamAccountSidebarConfig(account);
-    'flex max-w-full items-center justify-between space-x-4',
+  const collapsible = config.sidebarCollapsedStyle;
-    {
-      'w-full justify-start space-x-0': minimized,
-    },
-  );
 
   return (
-    <Sidebar>
+    <Sidebar collapsible={collapsible}>
       <SidebarHeader className={'h-16 justify-center'}>
-        <div className={className}>
+        <div className={'flex items-center justify-between gap-x-3'}>
           <TeamAccountAccountsSelector
             userId={userId}
             selectedAccount={account}
             accounts={accounts}
-            collapsed={minimized}
           />
 
-          <div className="group-data-[minimized=true]:hidden">
+          <div className={'group-data-[minimized=true]:hidden'}>
             <TeamAccountNotifications
               userId={userId}
               accountId={props.accountId}
@@ -77,7 +68,7 @@ function SidebarContainer(props: {
       </SidebarHeader>
 
       <SidebarContent className={`mt-5 h-[calc(100%-160px)] overflow-y-auto`}>
-        <TeamAccountLayoutSidebarNavigation account={account} />
+        <TeamAccountLayoutSidebarNavigation config={config} />
       </SidebarContent>
 
       <SidebarFooter>

apps/web/app/home/[account]/billing/error.tsx

@@ -20,10 +20,7 @@ export default function BillingErrorPage({
 
   return (
     <>
-      <PageHeader
+      <PageHeader description={<AppBreadcrumbs />} />
-        title={<Trans i18nKey={'common:routes.billing'} />}
-        description={<AppBreadcrumbs />}
-      />
 
       <PageBody>
         <div className={'flex flex-col space-y-4'}>

apps/web/app/home/[account]/layout.tsx

@@ -27,9 +27,9 @@ type TeamWorkspaceLayoutProps = React.PropsWithChildren<{
 
 function TeamWorkspaceLayout({ children, params }: TeamWorkspaceLayoutProps) {
   const account = use(params).account;
-  const style = use(getLayoutStyle(account));
+  const state = use(getLayoutState(account));
 
-  if (style === 'sidebar') {
+  if (state.style === 'sidebar') {
     return <SidebarLayout account={account}>{children}</SidebarLayout>;
   }
 
@@ -43,6 +43,7 @@ function SidebarLayout({
   account: string;
 }>) {
   const data = use(loadTeamWorkspace(account));
+  const state = use(getLayoutState(account));
 
   const accounts = data.accounts.map(({ name, slug, picture_url }) => ({
     label: name,
@@ -50,11 +51,9 @@ function SidebarLayout({
     image: picture_url,
   }));
 
-  const minimized = getTeamAccountSidebarConfig(account).sidebarCollapsed;
-
   return (
     <TeamAccountWorkspaceContextProvider value={data}>
-      <SidebarProvider minimized={minimized}>
+      <SidebarProvider defaultOpen={state.open}>
         <Page style={'sidebar'}>
           <PageNavigation>
             <TeamAccountLayoutSidebar
@@ -123,13 +122,21 @@ function HeaderLayout({
   );
 }
 
-async function getLayoutStyle(account: string) {
+async function getLayoutState(account: string) {
   const cookieStore = await cookies();
+  const sidebarOpenCookie = cookieStore.get('sidebar:state');
+  const layoutCookie = cookieStore.get('layout-style');
+  const layoutStyle = layoutCookie?.value as PageLayoutStyle;
+  const config = getTeamAccountSidebarConfig(account);
 
-  return (
+  const sidebarOpenCookieValue = sidebarOpenCookie
-    (cookieStore.get('layout-style')?.value as PageLayoutStyle) ??
+    ? sidebarOpenCookie.value === 'false'
-    getTeamAccountSidebarConfig(account).style
+    : config.sidebarCollapsed;
-  );
+
+  return {
+    open: sidebarOpenCookieValue,
+    style: layoutStyle ?? config.style,
+  };
 }
 
 export default withI18n(TeamWorkspaceLayout);

apps/web/config/personal-account-navigation.config.tsx

@@ -43,4 +43,5 @@ export const personalAccountNavigationConfig = NavigationConfigSchema.parse({
   routes,
   style: process.env.NEXT_PUBLIC_USER_NAVIGATION_STYLE,
   sidebarCollapsed: process.env.NEXT_PUBLIC_HOME_SIDEBAR_COLLAPSED,
+  sidebarCollapsedStyle: process.env.NEXT_PUBLIC_SIDEBAR_COLLAPSED_STYLE,
 });

apps/web/config/team-account-navigation.config.tsx

@@ -49,6 +49,7 @@ export function getTeamAccountSidebarConfig(account: string) {
     routes: getRoutes(account),
     style: process.env.NEXT_PUBLIC_TEAM_NAVIGATION_STYLE,
     sidebarCollapsed: process.env.NEXT_PUBLIC_TEAM_SIDEBAR_COLLAPSED,
+    sidebarCollapsedStyle: process.env.NEXT_PUBLIC_SIDEBAR_COLLAPSED_STYLE,
   });
 }
 

packages/features/admin/src/components/admin-account-page.tsx

@@ -14,6 +14,7 @@ import { Badge } from '@kit/ui/badge';
 import { Button } from '@kit/ui/button';
 import { Heading } from '@kit/ui/heading';
 import { If } from '@kit/ui/if';
+import { PageBody, PageHeader } from '@kit/ui/page';
 import { ProfileAvatar } from '@kit/ui/profile-avatar';
 import {
   Table,
@@ -61,38 +62,22 @@ async function PersonalAccountPage(props: { account: Account }) {
     'banned_until' in data.user && data.user.banned_until !== 'none';
 
   return (
-    <div className={'flex flex-col space-y-4'}>
+    <>
-      <AppBreadcrumbs
+      <PageHeader
-        values={{
+        className="border-b"
-          [props.account.id]:
+        description={
-            props.account.name ?? props.account.email ?? 'Account',
+          <AppBreadcrumbs
-        }}
+            values={{
-      />
+              [props.account.id]:
-
+                props.account.name ?? props.account.email ?? 'Account',
-      <div className={'flex items-center justify-between'}>
+            }}
-        <div className={'flex items-center gap-x-4'}>
+          />
-          <div className={'flex items-center gap-x-2.5'}>
+        }
-            <ProfileAvatar
+      >
-              pictureUrl={props.account.picture_url}
+        <div className={'flex gap-x-2.5'}>
-              displayName={props.account.name}
-            />
-
-            <span className={'text-sm font-semibold capitalize'}>
-              {props.account.name}
-            </span>
-          </div>
-
-          <Badge variant={'outline'}>Personal Account</Badge>
-
-          <If condition={isBanned}>
-            <Badge variant={'destructive'}>Banned</Badge>
-          </If>
-        </div>
-
-        <div className={'flex gap-x-1'}>
           <If condition={isBanned}>
             <AdminReactivateUserDialog userId={props.account.id}>
-              <Button size={'sm'} variant={'ghost'}>
+              <Button size={'sm'} variant={'secondary'}>
                 <ShieldPlus className={'mr-1 h-4'} />
                 Reactivate
               </Button>
@@ -101,15 +86,15 @@ async function PersonalAccountPage(props: { account: Account }) {
 
           <If condition={!isBanned}>
             <AdminBanUserDialog userId={props.account.id}>
-              <Button size={'sm'} variant={'ghost'}>
+              <Button size={'sm'} variant={'secondary'}>
-                <Ban className={'mr-1 h-4'} />
+                <Ban className={'text-destructive mr-1 h-3'} />
                 Ban
               </Button>
             </AdminBanUserDialog>
 
             <AdminImpersonateUserDialog userId={props.account.id}>
-              <Button size={'sm'} variant={'ghost'}>
+              <Button size={'sm'} variant={'secondary'}>
-                <VenetianMask className={'mr-1 h-4'} />
+                <VenetianMask className={'mr-1 h-4 text-blue-500'} />
                 Impersonate
               </Button>
             </AdminImpersonateUserDialog>
@@ -122,20 +107,43 @@ async function PersonalAccountPage(props: { account: Account }) {
             </Button>
           </AdminDeleteUserDialog>
         </div>
-      </div>
+      </PageHeader>
 
-      <div className={'flex flex-col gap-y-8'}>
+      <PageBody className={'space-y-6 py-4'}>
-        <SubscriptionsTable accountId={props.account.id} />
+        <div className={'flex items-center justify-between'}>
+          <div className={'flex items-center gap-x-4'}>
+            <div className={'flex items-center gap-x-2.5'}>
+              <ProfileAvatar
+                pictureUrl={props.account.picture_url}
+                displayName={props.account.name}
+              />
 
-        <div className={'divider-divider-x flex flex-col gap-y-2.5'}>
+              <span className={'text-sm font-semibold capitalize'}>
-          <Heading level={6}>Teams</Heading>
+                {props.account.name}
+              </span>
+            </div>
 
-          <div>
+            <Badge variant={'outline'}>Personal Account</Badge>
-            <AdminMembershipsTable memberships={memberships} />
+
+            <If condition={isBanned}>
+              <Badge variant={'destructive'}>Banned</Badge>
+            </If>
           </div>
         </div>
-      </div>
+
-    </div>
+        <div className={'flex flex-col gap-y-8'}>
+          <SubscriptionsTable accountId={props.account.id} />
+
+          <div className={'divider-divider-x flex flex-col gap-y-2.5'}>
+            <Heading level={6}>Teams</Heading>
+
+            <div>
+              <AdminMembershipsTable memberships={memberships} />
+            </div>
+          </div>
+        </div>
+      </PageBody>
+    </>
   );
 }
 
@@ -145,50 +153,57 @@ async function TeamAccountPage(props: {
   const members = await getMembers(props.account.slug ?? '');
 
   return (
-    <div className={'flex flex-col gap-y-4'}>
+    <>
-      <AppBreadcrumbs
+      <PageHeader
-        values={{
+        className="border-b"
-          [props.account.id]:
+        description={
-            props.account.name ?? props.account.email ?? 'Account',
+          <AppBreadcrumbs
-        }}
+            values={{
-      />
+              [props.account.id]:
-
+                props.account.name ?? props.account.email ?? 'Account',
-      <div className={'flex justify-between'}>
+            }}
-        <div className={'flex items-center gap-x-4'}>
+          />
-          <div className={'flex items-center gap-x-2.5'}>
+        }
-            <ProfileAvatar
+      >
-              pictureUrl={props.account.picture_url}
-              displayName={props.account.name}
-            />
-
-            <span className={'text-sm font-semibold capitalize'}>
-              {props.account.name}
-            </span>
-          </div>
-
-          <Badge variant={'outline'}>Team Account</Badge>
-        </div>
-
         <AdminDeleteAccountDialog accountId={props.account.id}>
           <Button size={'sm'} variant={'destructive'}>
             <BadgeX className={'mr-1 h-4'} />
             Delete
           </Button>
         </AdminDeleteAccountDialog>
-      </div>
+      </PageHeader>
 
-      <div>
+      <PageBody className={'space-y-6 py-4'}>
-        <div className={'flex flex-col gap-y-8'}>
+        <div className={'flex justify-between'}>
-          <SubscriptionsTable accountId={props.account.id} />
+          <div className={'flex items-center gap-x-4'}>
+            <div className={'flex items-center gap-x-2.5'}>
+              <ProfileAvatar
+                pictureUrl={props.account.picture_url}
+                displayName={props.account.name}
+              />
 
-          <div className={'flex flex-col gap-y-2.5'}>
+              <span className={'text-sm font-semibold capitalize'}>
-            <Heading level={6}>Team Members</Heading>
+                {props.account.name}
+              </span>
+            </div>
 
-            <AdminMembersTable members={members} />
+            <Badge variant={'outline'}>Team Account</Badge>
           </div>
         </div>
-      </div>
+
-    </div>
+        <div>
+          <div className={'flex flex-col gap-y-8'}>
+            <SubscriptionsTable accountId={props.account.id} />
+
+            <div className={'flex flex-col gap-y-2.5'}>
+              <Heading level={6}>Team Members</Heading>
+
+              <AdminMembersTable members={members} />
+            </div>
+          </div>
+        </div>
+      </PageBody>
+    </>
   );
 }
 

packages/ui/src/makerkit/navigation-config.schema.ts

@@ -40,8 +40,9 @@ export const NavigationConfigSchema = z.object({
   style: z.enum(['custom', 'sidebar', 'header']).default('sidebar'),
   sidebarCollapsed: z
     .enum(['false', 'true'])
-    .default('false')
+    .default('true')
     .optional()
     .transform((value) => value === `true`),
+  sidebarCollapsedStyle: z.enum(['offcanvas', 'icon', 'none']).default('icon'),
   routes: z.array(z.union([RouteGroup, Divider])),
 });

packages/ui/src/makerkit/page.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 
 import { cn } from '../lib/utils';
+import { Separator } from '../shadcn/separator';
+import { SidebarTrigger } from '../shadcn/sidebar';
 import { If } from './if';
 
 export type PageLayoutStyle = 'sidebar' | 'header' | 'custom';
@@ -12,6 +14,10 @@ type PageProps = React.PropsWithChildren<{
   sticky?: boolean;
 }>;
 
+const ENABLE_SIDEBAR_TRIGGER = process.env.NEXT_PUBLIC_ENABLE_SIDEBAR_TRIGGER
+  ? process.env.NEXT_PUBLIC_ENABLE_SIDEBAR_TRIGGER === 'true'
+  : true;
+
 export function Page(props: PageProps) {
   switch (props.style) {
     case 'header':
@@ -118,7 +124,7 @@ export function PageNavigation(props: React.PropsWithChildren) {
 
 export function PageDescription(props: React.PropsWithChildren) {
   return (
-    <div className={'h-6'}>
+    <div className={'flex h-6 items-center'}>
       <div className={'text-muted-foreground text-xs leading-none font-normal'}>
         {props.children}
       </div>
@@ -130,7 +136,7 @@ export function PageTitle(props: React.PropsWithChildren) {
   return (
     <h1
       className={
-        'font-heading text-xl leading-none font-bold tracking-tight dark:text-white'
+        'font-heading text-base leading-none font-bold tracking-tight dark:text-white'
       }
     >
       {props.children}
@@ -147,10 +153,12 @@ export function PageHeader({
   title,
   description,
   className,
+  displaySidebarTrigger = ENABLE_SIDEBAR_TRIGGER,
 }: React.PropsWithChildren<{
   className?: string;
   title?: string | React.ReactNode;
   description?: string | React.ReactNode;
+  displaySidebarTrigger?: boolean;
 }>) {
   return (
     <div
@@ -159,10 +167,20 @@ export function PageHeader({
         className,
       )}
     >
-      <div className={'flex flex-col'}>
+      <div className={'flex flex-col gap-y-2'}>
-        <If condition={description}>
+        <div className="flex items-center gap-x-2.5">
-          <PageDescription>{description}</PageDescription>
+          {displaySidebarTrigger ? (
-        </If>
+            <SidebarTrigger className="text-muted-foreground hover:text-secondary-foreground h-4.5 w-4.5 cursor-pointer" />
+          ) : null}
+
+          <If condition={description}>
+            <If condition={displaySidebarTrigger}>
+              <Separator orientation="vertical" className="h-4 w-px" />
+            </If>
+
+            <PageDescription>{description}</PageDescription>
+          </If>
+        </div>
 
         <If condition={title}>
           <PageTitle>{title}</PageTitle>

packages/ui/src/makerkit/version-updater.tsx

@@ -50,9 +50,11 @@ export function VersionUpdater(props: { intervalTimeInSecond?: number }) {
     <AlertDialog open={showDialog} onOpenChange={setShowDialog}>
       <AlertDialogContent>
         <AlertDialogHeader>
-          <AlertDialogTitle className={'flex items-center space-x-4'}>
+          <AlertDialogTitle className={'flex items-center gap-x-2'}>
             <RocketIcon className={'h-4'} />
-            <Trans i18nKey="common:newVersionAvailable" />
+            <span>
+              <Trans i18nKey="common:newVersionAvailable" />
+            </span>
           </AlertDialogTitle>
 
           <AlertDialogDescription>

packages/ui/src/shadcn/sidebar.tsx

@@ -36,9 +36,9 @@ const SIDEBAR_COOKIE_NAME = 'sidebar:state';
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 const SIDEBAR_WIDTH = '16rem';
 const SIDEBAR_WIDTH_MOBILE = '18rem';
-const SIDEBAR_WIDTH_ICON = '3rem';
+const SIDEBAR_WIDTH_ICON = '4rem';
 const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
-const SIDEBAR_MINIMIZED_WIDTH = '4rem';
+const SIDEBAR_MINIMIZED_WIDTH = SIDEBAR_WIDTH_ICON;
 
 type SidebarContext = {
   state: 'expanded' | 'collapsed';
@@ -46,12 +46,8 @@ type SidebarContext = {
   setOpen: (open: boolean) => void;
   openMobile: boolean;
   setOpenMobile: (open: boolean) => void;
-  setMinimized: (minimized: boolean) => void;
   isMobile: boolean;
   toggleSidebar: () => void;
-  minimized: boolean;
-  startMinimized: boolean;
-  expandOnHover: boolean;
 };
 
 export const SidebarContext = React.createContext<SidebarContext | null>(null);
@@ -71,13 +67,10 @@ const SidebarProvider: React.FC<
     defaultOpen?: boolean;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
-    minimized?: boolean;
-    expandOnHover?: boolean;
   }
 > = ({
   ref,
   defaultOpen = true,
-  minimized: isMinimized = false,
   open: openProp,
   onOpenChange: setOpenProp,
   className,
@@ -87,11 +80,7 @@ const SidebarProvider: React.FC<
 }) => {
   const isMobile = useIsMobile();
   const [openMobile, setOpenMobile] = React.useState(false);
-  const [minimized, setMinimized] = React.useState(isMinimized);
+  const collapsibleStyle = process.env.NEXT_PUBLIC_SIDEBAR_COLLAPSIBLE_STYLE;
-
-  const expandOnHover =
-    props.expandOnHover ??
-    process.env.NEXT_PUBLIC_EXPAND_SIDEBAR_ON_HOVER === 'true';
 
   // This is the internal state of the sidebar.
   // We use openProp and setOpenProp for control from outside the component.
@@ -136,7 +125,6 @@ const SidebarProvider: React.FC<
   // We add a state so that we can do data-state="expanded" or "collapsed".
   // This makes it easier to style the sidebar with Tailwind classes.
   const state = open ? 'expanded' : 'collapsed';
-  const startMinimized = isMinimized;
 
   const contextValue = React.useMemo<SidebarContext>(
     () => ({
@@ -144,43 +132,33 @@ const SidebarProvider: React.FC<
       open,
       setOpen,
       isMobile,
-      minimized,
-      setMinimized,
-      expandOnHover,
       openMobile,
       setOpenMobile,
       toggleSidebar,
-      startMinimized,
     }),
-    [
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
-      state,
-      open,
-      setOpen,
-      isMobile,
-      openMobile,
-      setOpenMobile,
-      toggleSidebar,
-      expandOnHover,
-      minimized,
-      setMinimized,
-      startMinimized,
-    ],
   );
 
+  const sidebarWidth = !open
+    ? collapsibleStyle === 'icon'
+      ? SIDEBAR_WIDTH_ICON
+      : collapsibleStyle === 'offcanvas'
+        ? 0
+        : SIDEBAR_MINIMIZED_WIDTH
+    : SIDEBAR_WIDTH;
+
   return (
     <SidebarContext.Provider value={contextValue}>
       <TooltipProvider delayDuration={0}>
         <div
           style={
             {
-              '--sidebar-width': minimized
+              '--sidebar-width': sidebarWidth,
-                ? SIDEBAR_MINIMIZED_WIDTH
-                : SIDEBAR_WIDTH,
               '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
               ...style,
             } as React.CSSProperties
           }
-          data-minimized={minimized}
+          data-minimized={!open}
           className={cn(
             'group text-sidebar-foreground has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
             className,
@@ -212,42 +190,7 @@ const Sidebar: React.FC<
   ref,
   ...props
 }) => {
-  const {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
-    isMobile,
-    state,
-    openMobile,
-    setOpenMobile,
-    minimized,
-    setMinimized,
-    expandOnHover,
-    startMinimized,
-  } = useSidebar();
-  useSidebar();
-
-  const isExpandedRef = React.useRef<boolean>(false);
-
-  const onMouseEnter =
-    startMinimized && expandOnHover
-      ? () => {
-          setMinimized(false);
-          isExpandedRef.current = true;
-        }
-      : undefined;
-
-  const onMouseLeave =
-    startMinimized && expandOnHover
-      ? () => {
-          if (!isRadixPopupOpen()) {
-            setMinimized(true);
-            isExpandedRef.current = false;
-          } else {
-            onRadixPopupClose(() => {
-              setMinimized(true);
-              isExpandedRef.current = false;
-            });
-          }
-        }
-      : undefined;
 
   if (collapsible === 'none') {
     return (
@@ -256,7 +199,7 @@ const Sidebar: React.FC<
           'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',
           className,
           {
-            [SIDEBAR_MINIMIZED_WIDTH]: minimized,
+            [SIDEBAR_MINIMIZED_WIDTH]: !open,
           },
         )}
         ref={ref}
@@ -301,8 +244,6 @@ const Sidebar: React.FC<
       data-collapsible={state === 'collapsed' ? collapsible : ''}
       data-variant={variant}
       data-side={side}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
     >
       {/* This is what handles the sidebar gap on desktop */}
       <div
@@ -569,7 +510,10 @@ const SidebarMenu: React.FC<React.ComponentProps<'ul'>> = ({
 }) => (
   <ul
     data-sidebar="menu"
-    className={cn('flex w-full min-w-0 flex-col gap-1', className)}
+    className={cn(
+      'flex w-full min-w-0 flex-col gap-1 group-data-[minimized=true]:items-center',
+      className,
+    )}
     {...props}
   />
 );
@@ -581,7 +525,10 @@ const SidebarMenuItem: React.FC<React.ComponentProps<'li'>> = ({
 }) => (
   <li
     data-sidebar="menu-item"
-    className={cn('group/menu-item relative', className)}
+    className={cn(
+      'group/menu-item relative flex group-data-[collapsible=icon]:justify-center',
+      className,
+    )}
     {...props}
   />
 );
@@ -625,7 +572,7 @@ const SidebarMenuButton: React.FC<
   ...props
 }) => {
   const Comp = asChild ? Slot : 'button';
-  const { isMobile, minimized } = useSidebar();
+  const { isMobile, open } = useSidebar();
   const { t } = useTranslation();
 
   const button = (
@@ -656,7 +603,7 @@ const SidebarMenuButton: React.FC<
       <TooltipContent
         side="right"
         align="center"
-        hidden={isMobile || !minimized}
+        hidden={isMobile || open}
         {...tooltip}
       />
     </Tooltip>
@@ -806,7 +753,7 @@ export function SidebarNavigation({
   config: SidebarConfig;
 }>) {
   const currentPath = usePathname() ?? '';
-  const { minimized } = useSidebar();
+  const { open } = useSidebar();
 
   return (
     <>
@@ -847,15 +794,12 @@ export function SidebarNavigation({
                 <If
                   condition={item.collapsible}
                   fallback={
-                    <SidebarGroupLabel className={cn({ hidden: minimized })}>
+                    <SidebarGroupLabel className={cn({ hidden: !open })}>
                       <Trans i18nKey={item.label} defaults={item.label} />
                     </SidebarGroupLabel>
                   }
                 >
-                  <SidebarGroupLabel
+                  <SidebarGroupLabel className={cn({ hidden: !open })} asChild>
-                    className={cn({ hidden: minimized })}
-                    asChild
-                  >
                     <CollapsibleTrigger>
                       <Trans i18nKey={item.label} defaults={item.label} />
                       <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
@@ -910,15 +854,15 @@ export function SidebarNavigation({
                                   <div
                                     className={cn('flex items-center gap-2', {
                                       'mx-auto w-full gap-0 [&>svg]:flex-1 [&>svg]:shrink-0':
-                                        minimized,
+                                        !open,
                                     })}
                                   >
                                     {child.Icon}
                                     <span
                                       className={cn(
-                                        'w-auto transition-opacity duration-300',
+                                        'transition-width w-auto transition-opacity duration-500',
                                         {
-                                          'w-0 opacity-0': minimized,
+                                          'w-0 opacity-0': !open,
                                         },
                                       )}
                                     >
@@ -927,11 +871,12 @@ export function SidebarNavigation({
                                         defaults={child.label}
                                       />
                                     </span>
+
                                     <ChevronDown
                                       className={cn(
                                         'ml-auto size-4 transition-transform group-data-[state=open]/collapsible:rotate-180',
                                         {
-                                          'hidden size-0': minimized,
+                                          'hidden size-0': !open,
                                         },
                                       )}
                                     />
@@ -958,8 +903,7 @@ export function SidebarNavigation({
                             >
                               <Link
                                 className={cn('flex items-center', {
-                                  'mx-auto w-full gap-0! [&>svg]:flex-1':
+                                  'mx-auto w-full gap-0! [&>svg]:flex-1': !open,
-                                    minimized,
                                 })}
                                 href={path}
                               >
@@ -968,7 +912,7 @@ export function SidebarNavigation({
                                   className={cn(
                                     'w-auto transition-opacity duration-300',
                                     {
-                                      'w-0 opacity-0': minimized,
+                                      'w-0 opacity-0': !open,
                                     },
                                   )}
                                 >
@@ -992,7 +936,7 @@ export function SidebarNavigation({
                                   {(children) => (
                                     <SidebarMenuSub
                                       className={cn({
-                                        'mx-0 px-1.5': minimized,
+                                        'mx-0 px-1.5': !open,
                                       })}
                                     >
                                       {children.map((child) => {
@@ -1023,7 +967,7 @@ export function SidebarNavigation({
                                                   'flex items-center',
                                                   {
                                                     'mx-auto w-full gap-0! [&>svg]:flex-1':
-                                                      minimized,
+                                                      !open,
                                                   },
                                                 )}
                                                 href={child.path}
@@ -1033,8 +977,7 @@ export function SidebarNavigation({
                                                   className={cn(
                                                     'w-auto transition-opacity duration-300',
                                                     {
-                                                      'w-0 opacity-0':
+                                                      'w-0 opacity-0': !open,
-                                                        minimized,
                                                     },
                                                   )}
                                                 >
@@ -1065,7 +1008,7 @@ export function SidebarNavigation({
                 </SidebarGroupContent>
               </SidebarGroup>
 
-              <If condition={minimized && !isLast}>
+              <If condition={!open && !isLast}>
                 <SidebarSeparator />
               </If>
             </Container>
@@ -1102,30 +1045,3 @@ export {
   SidebarTrigger,
   useSidebar,
 };
-
-function getRadixPopup() {
-  return document.querySelector('[data-radix-popper-content-wrapper]');
-}
-
-function isRadixPopupOpen() {
-  return getRadixPopup() !== null;
-}
-
-function onRadixPopupClose(callback: () => void) {
-  const element = getRadixPopup();
-
-  if (element) {
-    const observer = new MutationObserver(() => {
-      if (!getRadixPopup()) {
-        callback();
-
-        observer.disconnect();
-      }
-    });
-
-    observer.observe(element.parentElement!, {
-      childList: true,
-      subtree: true,
-    });
-  }
-}