feat: Add navigation section separator component (#15436)

- Add section_end_divider frontmatter field
- Add SidebarSeparator component to render horizontal dividers
- Add separator styles (.sidebar-separator)
- Update dynamicNav to render separators after items with
section_end_divider
- Update platformSidebar to map section_end_divider from frontmatter

This allows documentation pages to add visual separators in the sidebar
by setting section_end_divider: true in their frontmatter, helping to
visually group related navigation sections.

<img width="316" height="615" alt="CleanShot 2025-11-09 at 10  00 46@2x"
src="https://github.com/user-attachments/assets/4e4b08f2-f71c-46d3-9cbd-7a69079071d5"
/>

Author: codyde

src/components/sidebar/dynamicNav.tsx

@@ -5,14 +5,15 @@ import {sortPages} from 'sentry-docs/utils';
 import {getUnversionedPath, VERSION_INDICATOR} from 'sentry-docs/versioning';
 
 import {CollapsibleSidebarLink} from './collapsibleSidebarLink';
-import {SidebarLink} from './sidebarLink';
+import {SidebarLink, SidebarSeparator} from './sidebarLink';
 
 type Node = {
   [key: string]: any;
   context: {
     [key: string]: any;
     beta?: boolean;
     new?: boolean;
+    section_end_divider?: boolean;
     sidebar_hidden?: boolean;
     sidebar_order?: number;
     sidebar_title?: string;
@@ -98,6 +99,11 @@ export const renderChildren = (
         {renderChildren(nodeChildren, exclude, path, showDepth, depth + 1)}
       </CollapsibleSidebarLink>
     );
+
+    // Add separator after this item if section_end_divider is true
+    if (node.context.section_end_divider && depth === 0) {
+      result.push(<SidebarSeparator key={`separator-${node.path}`} />);
+    }
   });
 
   return result;

src/components/sidebar/platformSidebar.tsx

@@ -24,6 +24,7 @@ export function PlatformSidebar({
         sidebar_hidden: n.frontmatter.sidebar_hidden,
         beta: n.frontmatter.beta,
         new: n.frontmatter.new,
+        section_end_divider: n.frontmatter.section_end_divider,
       },
       path: '/' + n.path + '/',
     };

src/components/sidebar/sidebarLink.tsx

@@ -48,5 +48,5 @@ export function SidebarLink({
 }
 
 export function SidebarSeparator() {
-  return <hr className={styles['sidebar-separator']} />;
+  return <hr className={`${styles['sidebar-separator']} mt-3 mb-3`} />;
 }

src/components/sidebar/style.module.scss

@@ -205,7 +205,5 @@
 }
 
 .sidebar-separator {
-  margin: 1rem 0;
-  border: none;
-  border-top: 1px solid var(--border-color);
+  border-top: 2px solid var(--gray-6);
 }