feat: articles clusters

apps/dashboard/src/app/[locale]/(app)/(sidebar)/layout.tsx

@@ -1,4 +1,4 @@
-import { SidebarInset, SidebarProvider } from "@basango/ui/components/sidebar";
+import { SidebarProvider } from "@basango/ui/components/sidebar";
 
 import { AppSidebar } from "#dashboard/components/sidebar/app-sidebar";
 import { HydrateClient } from "#dashboard/trpc/server";
@@ -9,7 +9,7 @@ export default async function Layout({ children }: { children: React.ReactNode }
       <SidebarProvider>
         <AppSidebar />
 
-        <SidebarInset>{children}</SidebarInset>
+        {children}
       </SidebarProvider>
     </HydrateClient>
   );

apps/dashboard/src/components/shell/page-header.tsx

@@ -4,11 +4,9 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
 } from "@basango/ui/components/breadcrumb";
-import { Separator } from "@basango/ui/components/separator";
 import { SidebarTrigger } from "@basango/ui/components/sidebar";
 
-import { Show } from "#dashboard/components/shell/show";
-import { ThemeToggle } from "#dashboard/components/theme-toggle";
+import { ThemeToggle } from "../theme-toggle";
 
 type Props = {
   title?: string | React.ReactNode;
@@ -16,20 +14,16 @@ type Props = {
 
 export function PageHeader({ title }: Props) {
   return (
-    <header className="flex h-16 shrink-0 items-center justify-between gap-2">
+    <header className="w-full flex justify-between items-center border-b py-2 px-6 h-14">
       <div className="flex items-center gap-2">
         <SidebarTrigger className="-ml-1" />
-
-        <Show when={title !== undefined}>
-          <Separator className="mr-2 data-[orientation=vertical]:h-4" orientation="vertical" />
-          <Breadcrumb>
-            <BreadcrumbList>
-              <BreadcrumbItem className="hidden md:block">
-                <BreadcrumbPage>{title}</BreadcrumbPage>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-        </Show>
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem className="hidden md:block">
+              <BreadcrumbPage className="font-bold">{title}</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
       </div>
       <div className="flex items-center gap-2">
         <ThemeToggle />

apps/dashboard/src/components/shell/page-layout.tsx

@@ -11,9 +11,13 @@ interface PageProps {
 export const PageLayout = (props: React.PropsWithChildren<PageProps>) => {
   const { title, header = <PageHeader title={title} />, children } = props;
   return (
-    <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
-      {header}
-      {children}
+    <div className="h-svh overflow-hidden lg:p-2 w-full">
+      <div className="lg:border lg:rounded-md overflow-hidden flex flex-col items-center justify-start h-full w-full">
+        {header}
+        <div className="overflow-auto w-full h-[calc(100svh-40px)] lg:h-[calc(100svh-56px)] p-4 space-y-6">
+          {children}
+        </div>
+      </div>
     </div>
   );
 };