Admin Layout
RavenSaaS has a built-in admin panel layout system that allows you to develop admin panel systems according to your needs.
Tip
You can implement a new admin panel layout in any path by simply importing the built-in DashboardLayout component and passing sidebar data.
Add Admin Layout
Refer to the built-in admin system layout logic:
Layout Implementation Example
app/admin/layout.tsx
1import DashboardLayout from "@/components/admin/dashboard/layout";
2import { ReactNode, Suspense } from "react";
3import type { Sidebar as SidebarType } from "@/types/blocks/sidebar";
4import { serverGetUserInfo } from "@/lib/common";
5import { redirect } from "next/navigation";
6import { navigationConfig } from "@/types/navigation";
7import { AdminSkeleton } from "@/components/skeletons/admin-skeleton";
8
9export default async function AdminLayout({
10 children,
11}: {
12 children: ReactNode;
13}) {
14 const userInfo = await serverGetUserInfo();
15 if (!userInfo?.uuid || !userInfo?.email) {
16 redirect("/auth/signin");
17 }
18
19 const adminEmails = process.env.ADMIN_EMAILS?.split(",");
20 if (!adminEmails?.includes(userInfo.email)) {
21 return (
22 <div className="w-screen h-screen flex items-center justify-center">
23 No access
24 </div>
25 );
26 }
27
28 const sidebarConfig: SidebarType = {
29 brand: {
30 title: process.env.NEXT_PUBLIC_BRAND_NAME || "RavenSaaS",
31 logo: {
32 src: "/logo.png",
33 alt: process.env.NEXT_PUBLIC_BRAND_NAME || "RavenSaaS",
34 },
35 },
36 nav: {
37 items: [
38 {
39 title: "Users",
40 url: "/admin/users",
41 icon: "RiUserLine",
42 },
43 {
44 title: "Orders",
45 icon: "RiOrderPlayLine",
46 url: "/admin/orders",
47 },
48 {
49 title: "Blog",
50 url: "/admin/posts",
51 icon: "RiBookLine",
52 },
53 {
54 title: "Affiliate",
55 url: "/admin/affiliates",
56 icon: "RiTeamLine",
57 },
58 ],
59 },
60 social: {
61 items: [
62 {
63 title: "Home",
64 url: "/",
65 target: "_blank",
66 icon: "RiHomeLine",
67 },
68 {
69 title: "Github",
70 url: "https://github.com/",
71 target: "_blank",
72 icon: "RiGithubLine",
73 },
74 {
75 title: "Discord",
76 url: "https://discord.gg/",
77 target: "_blank",
78 icon: "RiDiscordLine",
79 },
80 {
81 title: "X",
82 url: "https://x.com/",
83 target: "_blank",
84 icon: "RiTwitterLine",
85 },
86 ],
87 },
88 };
89
90 return (
91 <DashboardLayout sidebar={sidebarConfig}>
92 <Suspense fallback={<AdminSkeleton />}>{children}</Suspense>
93 </DashboardLayout>
94 );
95}