Add Root component for app-wide context and stateful logic; Improve m…

…ax width for example page templates; List examples at root level of site menu instead of under a dropdown

docs/sidebars.ts

@@ -43,16 +43,17 @@ const sidebars: SidebarsConfig = {
     'content',
     'layout',
     'utilities',
-    { type: 'html', value: `<hr>`},
-    {
-      type: 'category',
-      label: 'Examples',
-      link: {
-        type: 'generated-index',
-        title: 'Examples',
-      },
-      items: [{ type: 'autogenerated', dirName: 'examples' }]
-    },
+    { type: 'html', value: `<hr><b style="margin-left:.75rem;">Examples</b>`},
+    { type: 'autogenerated', dirName: 'examples' },
+    // {
+    //   type: 'category',
+    //   label: 'Examples',
+    //   link: {
+    //     type: 'generated-index',
+    //     title: 'Examples',
+    //   },
+    //   items: [{ type: 'autogenerated', dirName: 'examples' }]
+    // },
   ],
 }
 

docs/style.scss

@@ -84,3 +84,10 @@ $data-theme-prefix: '';
     --ifm-footer-background-color: #242526; // #303846
   }
 }
+
+// Give content more width when no sidebar
+@media (min-width: 997px) {
+  #__docusaurus .docItemCol_node_modules-\@docusaurus-theme-classic-lib-theme-DocItem-Layout-styles-module {
+    max-width: 100% !important;
+  }
+}

src/theme/Root.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+/**
+ * Add stateful logic that is not re-initialized across navigations
+ * @see https://docusaurus.io/docs/next/swizzling#wrapper-your-site-with-root
+ */
+export default function Root({ children }) {
+
+  // TODO: React Context provider
+
+  return <>{children}</>
+}