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

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'}>
-        <If condition={description}>
-          <PageDescription>{description}</PageDescription>
-        </If>
+      <div className={'flex flex-col gap-y-2'}>
+        <div className="flex items-center gap-x-2.5">
+          {displaySidebarTrigger ? (
+            <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>