fix: add missing newlines at the end of JSON files; clean up formatting in page components

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

@@ -40,7 +40,7 @@ const RouteGroup = z.object({
 });
 
 export const NavigationConfigSchema = z.object({
-  sidebarCollapsed: z.stringbool().optional().default(false),
+  sidebarCollapsed: z.coerce.boolean().optional().default(false),
   sidebarCollapsedStyle: z.enum(['icon', 'offcanvas', 'none']).default('icon'),
   routes: z.array(z.union([RouteGroup, Divider])),
   style: z.enum(['sidebar', 'header', 'custom']).default('sidebar'),

packages/ui/src/makerkit/sidebar-navigation.tsx

@@ -3,7 +3,7 @@
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
-import { ChevronDown } from 'lucide-react';
+import { ChevronRight } from 'lucide-react';
 import { useLocale, useTranslations } from 'next-intl';
 import * as z from 'zod';
 
@@ -68,7 +68,7 @@ function MaybeCollapsible({
   }
 
   return (
-    <Collapsible defaultOpen={defaultOpen} className={'group/collapsible'}>
+    <Collapsible defaultOpen={defaultOpen} className="group/collapsible">
       {children}
     </Collapsible>
   );
@@ -129,23 +129,23 @@ function SidebarNavigationRouteGroupLabel({
 }) {
   const className = cn({ hidden: !open });
 
-  return (
-    <If
-      condition={collapsible}
-      fallback={
-        <SidebarGroupLabel className={className}>
-          <Trans i18nKey={label} defaults={label} />
-        </SidebarGroupLabel>
-      }
-    >
+  if (!collapsible) {
+    return (
       <SidebarGroupLabel className={className}>
-        <CollapsibleTrigger>
-          <Trans i18nKey={label} defaults={label} />
-
-          <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
-        </CollapsibleTrigger>
+        <Trans i18nKey={label} defaults={label} />
       </SidebarGroupLabel>
-    </If>
+    );
+  }
+
+  return (
+    <SidebarGroupLabel className={cn(className, 'cursor-pointer')}>
+      <CollapsibleTrigger className="flex w-full items-center gap-1">
+        <ChevronRight className="size-3.5 shrink-0 transition-transform duration-200 data-[panel-open]:rotate-90" />
+        <span className="truncate">
+          <Trans i18nKey={label} defaults={label} />
+        </span>
+      </CollapsibleTrigger>
+    </SidebarGroupLabel>
   );
 }
 
@@ -165,8 +165,8 @@ function SidebarNavigationSubItems({
       {(items) =>
         items.length > 0 && (
           <SidebarMenuSub
-            className={cn({
-              'mx-0 px-1.5': !open,
+            className={cn('border-sidebar-border ml-3.5 border-l pl-2', {
+              'mx-0 border-l-0 px-1.5': !open,
             })}
           >
             {items.map((child) => {
@@ -241,7 +241,7 @@ function SidebarNavigationRouteChildItem({
 
             <span
               className={cn(
-                'transition-width w-auto transition-opacity duration-500',
+                'transition-width w-auto transition-opacity duration-300',
                 {
                   'w-0 opacity-0': !open,
                 },
@@ -250,9 +250,9 @@ function SidebarNavigationRouteChildItem({
               <Trans i18nKey={child.label} defaults={child.label} />
             </span>
 
-            <ChevronDown
+            <ChevronRight
               className={cn(
-                'ml-auto size-4 transition-transform group-data-[state=open]/collapsible:rotate-180',
+                'ml-auto size-4 shrink-0 transition-transform duration-200 data-[panel-open]:rotate-90',
                 {
                   'hidden size-0': !open,
                 },

packages/ui/src/shadcn/collapsible.tsx

@@ -2,6 +2,8 @@
 
 import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';
 
+import { cn } from '../lib/utils';
+
 function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
   return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
 }
@@ -12,9 +14,31 @@ function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {
   );
 }
 
-function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {
+/**
+ * CollapsibleContent (Panel) with smooth height animation.
+ *
+ * Base UI sets `--collapsible-panel-height` automatically and provides
+ * `data-open`, `data-closed`, `data-starting-style`, `data-ending-style`
+ * for CSS-driven animations.
+ */
+function CollapsibleContent({
+  className,
+  ...props
+}: CollapsiblePrimitive.Panel.Props) {
   return (
-    <CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} />
+    <CollapsiblePrimitive.Panel
+      data-slot="collapsible-content"
+      className={cn(
+        [
+          'h-(--collapsible-panel-height) overflow-hidden transition-[height] duration-200 ease-out',
+          'data-[closed]:h-0',
+          'data-[starting-style]:h-0',
+          'data-[ending-style]:h-0',
+        ],
+        className,
+      )}
+      {...props}
+    />
   );
 }