Simplified Sidebar

docs/using-a-listview.md

@@ -5,6 +5,8 @@ title: Using List Views
 
 React Native provides a suite of components for presenting lists of data. Generally, you'll want to use either [FlatList](flatlist.md) or [SectionList](sectionlist.md).
 
+### FlatList
+
 The `FlatList` component displays a scrolling list of changing, but similarly structured, data. `FlatList` works well for long lists of data, where the number of items might change over time. Unlike the more generic [`ScrollView`](using-a-scrollview.md), the `FlatList` only renders elements that are currently showing on the screen, not all the elements at once.
 
 The `FlatList` component requires two props: `data` and `renderItem`. `data` is the source of information for the list. `renderItem` takes one item from the source and returns a formatted component to render.
@@ -52,6 +54,8 @@ const styles = StyleSheet.create({
 })
 ```
 
+### SectionList
+
 If you want to render a set of data broken into logical sections, maybe with section headers, similar to `UITableView`s on iOS, then a [SectionList](sectionlist.md) is the way to go.
 
 ```SnackPlayer name=SectionList%20Basics

website/i18n/en.json

@@ -3501,20 +3501,14 @@
     },
     "categories": {
       "The Basics": "The Basics",
+      "Guides": "Guides",
       "Environment setup": "Environment setup",
       "Workflow": "Workflow",
-      "Design": "Design",
-      "Interaction": "Interaction",
-      "Inclusion": "Inclusion",
-      "Performance": "Performance",
-      "JavaScript Runtime": "JavaScript Runtime",
-      "Connectivity": "Connectivity",
       "Native Components and Modules": "Native Components and Modules",
       "Guides (iOS)": "Guides (iOS)",
       "Guides (Android)": "Guides (Android)",
       "Components": "Components",
       "APIs": "APIs",
-      "Guides": "Guides",
       "Contributing": "Contributing"
     }
   },

website/sidebars.json

@@ -7,12 +7,42 @@
       "handling-text-input",
       "using-a-scrollview",
       "using-a-listview",
-      "troubleshooting",
-      "platform-specific-code",
+      "network",
       "more-resources"
     ],
+    "Guides": [
+      {
+        "type": "subcategory",
+        "label": "Design",
+        "ids": ["style", "height-and-width", "flexbox", "images", "colors"]
+      },
+      {
+        "type": "subcategory",
+        "label": "Interaction",
+        "ids": [
+          "handling-touches",
+          "navigation",
+          "animations",
+          "gesture-responder-system"
+        ]
+      },
+      {
+        "type": "subcategory",
+        "label": "Inclusion",
+        "ids": ["accessibility"]
+      },
+      {
+        "type": "subcategory",
+        "label": "Performance",
+        "ids": ["performance", "hermes", "optimizing-flatlist-configuration"]
+      },
+      "timers",
+      "javascript-environment",
+      "platform-specific-code"
+    ],
     "Environment setup": [
       "getting-started",
+      "troubleshooting",
       "integration-with-existing-apps",
       "building-for-apple-tv",
       "out-of-tree-platforms"
@@ -24,17 +54,6 @@
       "typescript",
       "upgrading"
     ],
-    "Design": ["style", "height-and-width", "flexbox", "images", "colors"],
-    "Interaction": [
-      "handling-touches",
-      "navigation",
-      "animations",
-      "gesture-responder-system"
-    ],
-    "Inclusion": ["accessibility"],
-    "Performance": ["performance", "optimizing-flatlist-configuration"],
-    "JavaScript Runtime": ["javascript-environment", "timers", "hermes"],
-    "Connectivity": ["network"],
     "Native Components and Modules": [
       "native-modules-setup",
       "direct-manipulation"

website/static/css/toc.css

@@ -99,3 +99,40 @@
     padding-top: 2rem;
   }
 }
+
+/** SubNavGroup **/
+.toc .toggleNav ul .subNavGroup .navItem {
+  padding-left: 16px;
+}
+
+.toc .toggleNav .navGroup .subNavGroup .navListItem::before {
+  content: "";
+  position: absolute;
+  left: 2px;
+  top: 0px;
+  bottom: 0px;
+  border-left: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.toc .toggleNav .navGroup .subNavGroup .navGroupSubcategoryTitle {
+  font-weight: 600;
+}
+
+.toc .toggleNav ul .subNavGroup li.navListItemActive::before {
+  content: "";
+  background-color: inherit;
+  position: absolute;
+  width: 5px;
+  top: 2px;
+  left: -20px;
+  bottom: 2px;
+}
+
+.toc .toggleNav ul .subNavGroup li.navListItemActive::after {
+  content: "";
+  background-color: $brand;
+  position: absolute;
+  width: 5px;
+  top: 2px;
+  bottom: 2px;
+}