User Console
User Center
After users log in, they can click on the avatar dropdown to enter the user center. View their orders, edit personal information, etc.
You can add more features to the user console according to your needs.
Console Layout
RavenSaaS has a built-in console layout located in the components/console/layout.tsx file.
To implement a user center layout, you just need to import the console layout component and pass a sidebar.
Layout Implementation Example
src/app/[locale]/users/layout.tsx
1import { ReactNode } from "react";
2import { Sidebar } from "@/types/siderbar";
3import ConsoleLayout from "@/components/console/layout";
4import { getTranslations } from "next-intl/server";
5import { serverGetUserInfo } from "@/services/user";
6import { redirect } from "next/navigation";
7
8export default async function UserLayout({ children }: { children: ReactNode }) {
9 const userInfo = await serverGetUserInfo();
10 if (!userInfo || !userInfo.email) {
11 redirect("/auth/signin");
12 }
13 const t = await getTranslations();
14
15 const sidebar: Sidebar = {
16 nav: {
17 items: [
18 {
19 title: t("user.my_orders"),
20 url: "/users/my-orders",
21 icon: "RiOrderPlayLine",
22 },
23 {
24 title: t("user.my_invites"),
25 url: "/users/my-invites",
26 icon: "RiTeamLine",
27 },
28 {
29 title: t("user.my_profile"),
30 url: "/users/profile",
31 icon: "RiUserLine",
32 },
33 ],
34 },
35 };
36
37 return <ConsoleLayout sidebar={sidebar}>{children}</ConsoleLayout>;
38}