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

@@ -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>

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>
+	);
+}