Logo
RavenSaaS Docs

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}