Update Shadcn Sidebar (#73)

Migrated Sidebar to use Shadcn UI's

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

@@ -5,6 +5,30 @@ const RouteMatchingEnd = z
   .default(false)
   .optional();
 
+const Divider = z.object({
+  divider: z.literal(true),
+});
+
+const RouteChildren = z.array(
+  z.object({
+    label: z.string(),
+    path: z.string(),
+    Icon: z.custom<React.ReactNode>(),
+    end: RouteMatchingEnd,
+    children: z
+      .array(
+        z.object({
+          label: z.string(),
+          path: z.string(),
+          Icon: z.custom<React.ReactNode>(),
+          end: RouteMatchingEnd,
+        }),
+      )
+      .default([])
+      .optional(),
+  }),
+);
+
 export const NavigationConfigSchema = z.object({
   style: z.enum(['custom', 'sidebar', 'header']).default('sidebar'),
   sidebarCollapsed: z
@@ -14,28 +38,14 @@ export const NavigationConfigSchema = z.object({
     .transform((value) => value === `true`),
   routes: z.array(
     z.union([
-      z.object({
-        label: z.string(),
-        path: z.string(),
-        Icon: z.custom<React.ReactNode>(),
-        end: RouteMatchingEnd,
-      }),
       z.object({
         label: z.string(),
         collapsible: z.boolean().optional(),
         collapsed: z.boolean().optional(),
-        children: z.array(
-          z.object({
-            label: z.string(),
-            path: z.string(),
-            Icon: z.custom<React.ReactNode>(),
-            end: RouteMatchingEnd,
-          }),
-        ),
-      }),
-      z.object({
-        divider: z.literal(true),
+        children: RouteChildren,
+        renderAction: z.custom<React.ReactNode>().optional(),
       }),
+      Divider,
     ]),
   ),
 });

packages/ui/src/makerkit/page.tsx

@@ -29,12 +29,7 @@ function PageWithSidebar(props: PageProps) {
   const { Navigation, Children, MobileNavigation } = getSlotsFromPage(props);
 
   return (
-    <div
-      className={cn(
-        'flex bg-gray-50/95 dark:bg-background/85',
-        props.className,
-      )}
-    >
+    <div className={cn('flex', props.className)}>
       {Navigation}
 
       <div
@@ -47,7 +42,7 @@ function PageWithSidebar(props: PageProps) {
 
         <div
           className={
-            'flex flex-1 flex-col overflow-y-auto bg-background px-4 lg:m-1.5 lg:ml-0 lg:rounded-lg lg:border lg:px-0'
+            'flex flex-1 flex-col overflow-y-auto bg-background px-4 lg:px-0'
           }
         >
           {Children}

packages/ui/src/makerkit/profile-avatar.tsx

@@ -12,6 +12,7 @@ type TextProps = {
 
 type ProfileAvatarProps = (SessionProps | TextProps) & {
   className?: string;
+  fallbackClassName?: string;
 };
 
 export function ProfileAvatar(props: ProfileAvatarProps) {
@@ -23,8 +24,13 @@ export function ProfileAvatar(props: ProfileAvatarProps) {
   if ('text' in props) {
     return (
       <Avatar className={avatarClassName}>
-        <AvatarFallback>
-          <span className={'uppercase'}>{props.text.slice(0, 1)}</span>
+        <AvatarFallback
+          className={cn(
+            props.fallbackClassName,
+            'uppercase animate-in fade-in',
+          )}
+        >
+          {props.text.slice(0, 1)}
         </AvatarFallback>
       </Avatar>
     );
@@ -36,7 +42,9 @@ export function ProfileAvatar(props: ProfileAvatarProps) {
     <Avatar className={avatarClassName}>
       <AvatarImage src={props.pictureUrl ?? undefined} />
 
-      <AvatarFallback className={'animate-in fade-in'}>
+      <AvatarFallback
+        className={cn(props.fallbackClassName, 'animate-in fade-in')}
+      >
         <span suppressHydrationWarning className={'uppercase'}>
           {initials}
         </span>

packages/ui/src/makerkit/sidebar.tsx

@@ -26,6 +26,11 @@ export type SidebarConfig = z.infer<typeof NavigationConfigSchema>;
 
 export { SidebarContext };
 
+/**
+ * @deprecated
+ * This component is deprecated and will be removed in a future version.
+ * Please use the Shadcn Sidebar component instead.
+ */
 export function Sidebar(props: {
   collapsed?: boolean;
   expandOnHover?: boolean;
@@ -338,17 +343,6 @@ export function SidebarNavigation({
             </SidebarGroup>
           );
         }
-
-        return (
-          <SidebarItem
-            key={item.path}
-            end={item.end}
-            path={item.path}
-            Icon={item.Icon}
-          >
-            <Trans i18nKey={item.label} defaults={item.label} />
-          </SidebarItem>
-        );
       })}
     </>
   );