From 2468cc2a4aed25cac78474a0055ec5b4fa60163e Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Fri, 27 Feb 2026 02:38:52 +0530
Subject: [PATCH] feat: add SidebarSeparator component and integrate into
 documentation layout

- Introduced SidebarSeparator component for improved sidebar organization.
- Updated layout configuration to utilize the new SidebarSeparator in the documentation layout.
---
 surfsense_web/app/docs/layout.tsx            |  6 ++++++
 surfsense_web/app/docs/sidebar-separator.tsx | 12 ++++++++++++
 2 files changed, 18 insertions(+)
 create mode 100644 surfsense_web/app/docs/sidebar-separator.tsx

diff --git a/surfsense_web/app/docs/layout.tsx b/surfsense_web/app/docs/layout.tsx
index 452106396..9311a45b4 100644
--- a/surfsense_web/app/docs/layout.tsx
+++ b/surfsense_web/app/docs/layout.tsx
@@ -2,6 +2,7 @@ import { DocsLayout } from "fumadocs-ui/layouts/docs";
 import type { ReactNode } from "react";
 import { baseOptions } from "@/app/layout.config";
 import { source } from "@/lib/source";
+import { SidebarSeparator } from "./sidebar-separator";
 
 const gridTemplate = `"sidebar header toc"
 "sidebar toc-popover toc"
@@ -13,6 +14,11 @@ export default function Layout({ children }: { children: ReactNode }) {
 			tree={source.pageTree}
 			{...baseOptions}
 			containerProps={{ style: { gridTemplate }, className: "bg-fd-card" }}
+			sidebar={{
+				components: {
+					Separator: SidebarSeparator,
+				},
+			}}
 		>
 			{children}
 		</DocsLayout>
diff --git a/surfsense_web/app/docs/sidebar-separator.tsx b/surfsense_web/app/docs/sidebar-separator.tsx
new file mode 100644
index 000000000..36fff09a4
--- /dev/null
+++ b/surfsense_web/app/docs/sidebar-separator.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import type { Separator } from "fumadocs-core/page-tree";
+
+export function SidebarSeparator({ item }: { item: Separator }) {
+	return (
+		<p className="inline-flex items-center gap-2 mb-1.5 px-2 mt-6 font-semibold first:mt-0 empty:mb-0">
+			{item.icon}
+			{item.name}
+		</p>
+	);
+}