Shift the vertical navigation to the left, narrow the rail, and sync light/dark styling with layout offsets.
73 lines
2.6 KiB
TypeScript
73 lines
2.6 KiB
TypeScript
import { cookies } from "next/headers";
|
|
import Script from "next/script";
|
|
import { Suspense } from "react";
|
|
import { AppSidebar } from "@/components/app-sidebar";
|
|
import { DataStreamProvider } from "@/components/data-stream-provider";
|
|
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
|
|
import { auth } from "../(auth)/auth";
|
|
import { TopNavbar } from "@/components/top-navbar";
|
|
import { getSiteSettings, getNavLinks, getTutorialVideos } from "@/lib/db/queries";
|
|
|
|
export default function Layout({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<>
|
|
<Script
|
|
src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"
|
|
strategy="beforeInteractive"
|
|
/>
|
|
<DataStreamProvider>
|
|
<Suspense fallback={<div className="flex h-dvh" />}>
|
|
<SidebarWrapper>{children}</SidebarWrapper>
|
|
</Suspense>
|
|
</DataStreamProvider>
|
|
</>
|
|
);
|
|
}
|
|
|
|
async function SidebarWrapper({ children }: { children: React.ReactNode }) {
|
|
const [session, cookieStore, siteSettings, navLinks, tutorialVideos] = await Promise.all([
|
|
auth(),
|
|
cookies(),
|
|
getSiteSettings(),
|
|
getNavLinks(),
|
|
getTutorialVideos(),
|
|
]);
|
|
const isCollapsed = cookieStore.get("sidebar_state")?.value !== "true";
|
|
|
|
return (
|
|
<SidebarProvider defaultOpen={!isCollapsed}>
|
|
<TopNavbar
|
|
siteName={siteSettings.siteName}
|
|
siteLogo={siteSettings.siteLogo || undefined}
|
|
siteLogoDark={siteSettings.siteLogoDark || undefined}
|
|
isAdmin={session?.user?.type === "admin"}
|
|
customLinks={navLinks.map(link => ({
|
|
id: link.id,
|
|
name: link.name,
|
|
url: link.url,
|
|
order: link.order,
|
|
toolboxGroup: link.toolboxGroup || 1,
|
|
}))}
|
|
toolbox1Name={siteSettings.toolbox1Name || "工具箱"}
|
|
toolbox1Enabled={siteSettings.toolbox1Enabled ?? true}
|
|
toolbox2Name={siteSettings.toolbox2Name || "工具箱2"}
|
|
toolbox2Enabled={siteSettings.toolbox2Enabled ?? false}
|
|
tutorialVideos={tutorialVideos.map(v => ({
|
|
id: v.id,
|
|
title: v.title,
|
|
videoUrl: v.videoUrl,
|
|
coverUrl: v.coverUrl,
|
|
description: v.description,
|
|
order: v.order,
|
|
}))}
|
|
tutorialEnabled={siteSettings.tutorialEnabled ?? false}
|
|
rankingEnabled={siteSettings.rankingEnabled ?? true}
|
|
/>
|
|
<div className="flex h-svh w-full overflow-hidden pl-16 [--sidebar-offset:4rem]">
|
|
<AppSidebar user={session?.user} />
|
|
<SidebarInset className="h-full">{children}</SidebarInset>
|
|
</div>
|
|
</SidebarProvider>
|
|
);
|
|
}
|