memegoat/frontend/src/app/(dashboard)/layout.tsx

import * as React from "react";
import { AppSidebar } from "@/components/app-sidebar";
import { MobileFilters } from "@/components/mobile-filters";
import { ModeToggle } from "@/components/mode-toggle";
import { SearchSidebar } from "@/components/search-sidebar";
import {
	SidebarInset,
	SidebarProvider,
	SidebarTrigger,
} from "@/components/ui/sidebar";
import { Toaster } from "@/components/ui/sonner";
import { UserNavMobile } from "@/components/user-nav-mobile";

export default function DashboardLayout({
	children,
	modal,
}: {
	children: React.ReactNode;
	modal: React.ReactNode;
}) {
	return (
		<React.Suspense fallback={null}>
			<SidebarProvider>
				<AppSidebar />
				<SidebarInset className="flex flex-row overflow-hidden">
					<div className="flex-1 flex flex-col min-w-0">
						<header className="flex h-16 shrink-0 items-center gap-2 border-b px-4 lg:hidden sticky top-0 bg-background z-40">
							<SidebarTrigger />
							<div className="flex-1 flex justify-center">
								<span className="font-bold text-primary text-xl tracking-tight">
									MemeGoat
								</span>
							</div>
							<div className="flex items-center gap-2">
								<ModeToggle />
								<UserNavMobile />
							</div>
						</header>
						<main className="flex-1 overflow-y-auto bg-zinc-50 dark:bg-zinc-950">
							{children}
							{modal}
						</main>
						<React.Suspense fallback={null}>
							<MobileFilters />
						</React.Suspense>
					</div>
					<React.Suspense fallback={null}>
						<SearchSidebar />
					</React.Suspense>
				</SidebarInset>
			</SidebarProvider>
			<Toaster />
		</React.Suspense>
	);
}