Update UI layout and update request handler types

The UI layout has been updated to fix full screen display issues and enable class names in Sidebar. Separately, request handler function types have been improved in next route handlers for better flexibility and type safety.

packages/next/src/routes/index.ts

@@ -22,12 +22,12 @@ interface Config<Schema> {
 }
 
 interface HandlerParams<
-  Body extends object,
+  Schema extends z.ZodType | undefined,
   RequireAuth extends boolean | undefined,
 > {
   request: NextRequest;
   user: RequireAuth extends false ? undefined : User;
-  body: Body;
+  body: Schema extends z.ZodType ? z.infer<Schema> : never;
 }
 
 /**
@@ -51,19 +51,17 @@ interface HandlerParams<
  *
  */
 export const enhanceRouteHandler = <
-  Body extends object,
-  Schema extends z.ZodType<Body, z.ZodTypeDef>,
-  Params extends Config<Schema> = Config<Schema>,
+  Body,
+  Params extends Config<z.ZodType<Body, z.ZodTypeDef>>,
 >(
   // Route handler function
   handler:
     | ((
-        params: HandlerParams<z.infer<Schema>, Params['auth']>,
+        params: HandlerParams<Params['schema'], Params['auth']>,
       ) => NextResponse | Response)
     | ((
-        params: HandlerParams<z.infer<Schema>, Params['auth']>,
+        params: HandlerParams<Params['schema'], Params['auth']>,
       ) => Promise<NextResponse | Response>),
-
   // Parameters object
   params?: Params,
 ) => {

packages/ui/src/makerkit/page.tsx

@@ -64,7 +64,7 @@ function PageWithHeader(props: PageProps) {
   const { Navigation, Children, MobileNavigation } = getSlotsFromPage(props);
 
   return (
-    <div className={cn('flex flex-1 flex-col', props.className)}>
+    <div className={cn('flex h-screen flex-1 flex-col', props.className)}>
       <div
         className={
           props.contentContainerClassName ?? 'flex flex-1 flex-col space-y-4'
@@ -87,7 +87,11 @@ function PageWithHeader(props: PageProps) {
           {MobileNavigation}
         </div>
 
-        <div className={'flex flex-col space-y-8 px-4 py-4 lg:container'}>
+        <div
+          className={
+            'flex h-screen flex-1 flex-col space-y-8 px-4 py-4 lg:container'
+          }
+        >
           {Children}
         </div>
       </div>

packages/ui/src/makerkit/sidebar.tsx

@@ -26,6 +26,7 @@ export type SidebarConfig = z.infer<typeof NavigationConfigSchema>;
 
 export function Sidebar(props: {
   collapsed?: boolean;
+  className?: string;
   children:
     | React.ReactNode
     | ((props: {
@@ -35,7 +36,7 @@ export function Sidebar(props: {
 }) {
   const [collapsed, setCollapsed] = useState(props.collapsed ?? false);
 
-  const className = getClassNameBuilder()({
+  const className = getClassNameBuilder(props.className ?? '')({
     collapsed,
   });
 
@@ -191,9 +192,14 @@ export function SidebarItem({
   );
 }
 
-function getClassNameBuilder() {
+function getClassNameBuilder(className: string) {
   return cva(
-    ['flex box-content h-screen flex-col relative shadow-sm border-r'],
+    [
+      cn(
+        'flex box-content h-screen flex-col relative shadow-sm border-r',
+        className,
+      ),
+    ],
     {
       variants: {
         collapsed: {