From 376ca3960b03c0907e9c0b7214cded324a406c90 Mon Sep 17 00:00:00 2001
From: Parker Lougheed <parlough@gmail.com>
Date: Mon, 31 Jul 2023 12:18:23 -0500
Subject: [PATCH] Add top-level headers to sidenav (#9161)

Closes https://github.com/flutter/website/issues/9011
---
 src/_data/sidenav.yml              | 7 ++++---
 src/_includes/sidenav-level-1.html | 4 +++-
 src/_sass/components/_sidebar.scss | 4 ++++
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/_data/sidenav.yml b/src/_data/sidenav.yml
index b55cffd8b1..35fc001a76 100644
--- a/src/_data/sidenav.yml
+++ b/src/_data/sidenav.yml
@@ -62,12 +62,12 @@
       permalink: /codelabs
 
 - divider
+- header: User interface
       
-# TODO(parlough): Rename to Layouts      
-- title: User interface
+- title: Layout
   permalink: /ui/layout
   children:
-    # TODO(parlough): Move to top-level entry
+    # TODO(parlough): Move to top-level entry (https://github.com/flutter/website/issues/9160)
     - title: Building user interfaces
       permalink: /ui
     - title: Layout introduction
@@ -244,6 +244,7 @@
       permalink: /ui/animations/overview
 
 - divider
+- header: Development
 
 - title: Data & backend
   permalink: /data-and-backend
diff --git a/src/_includes/sidenav-level-1.html b/src/_includes/sidenav-level-1.html
index 508bc650f2..5ad85750be 100644
--- a/src/_includes/sidenav-level-1.html
+++ b/src/_includes/sidenav-level-1.html
@@ -4,7 +4,9 @@
   {%- for entry in include.nav -%}
     {% if entry == 'divider' -%}
       <li aria-hidden="true"><div class="sidebar-primary-divider"></div></li>
-    {% else -%}
+    {% elsif entry contains 'header' -%}
+      <li class="nav-header">{{entry.header}}</li>
+    {% elsif entry contains 'children' -%}
       {% assign id = 'sidenav-' | append: forloop.index -%}
       {% if forloop.index == active_entries[0] -%}
         {% assign isActive = true -%}
diff --git a/src/_sass/components/_sidebar.scss b/src/_sass/components/_sidebar.scss
index 20464ef4cb..686c32f0d4 100644
--- a/src/_sass/components/_sidebar.scss
+++ b/src/_sass/components/_sidebar.scss
@@ -98,6 +98,10 @@
       padding: 0 $site-sidebar-side-padding;
     }
 
+    > .nav-header {
+      padding-top: bootstrap.bs-spacer(1);
+    }
+
     > .nav-item {
       &:first-child {
         > .nav-link {