feat: 🚸 split sidebars for doc categories

Add separate sidebars for each category of documentation (reference/tutorials/FAQ)

docusaurus.config.js

@@ -131,15 +131,19 @@ const config = {
             type: "doc",
             docId: "introduction",
             position: "left",
-            label: "Get Started",
+            label: "Docs",
           },
           {
             type: "doc",
             docId: "tutorials/index",
             position: "left",
             label: "Tutorials",
           },
-          { to: "/api", label: "API", position: "left" },
+          {
+            to: "/api",
+            position: "left",
+            label: "API",
+          },
           {
             type: "doc",
             docId: "faq",

sidebars.js

@@ -1,31 +1,41 @@
-/**
- * Creating a sidebar enables you to:
- - create an ordered group of docs
- - render a sidebar for each doc of that group
- - provide next/previous navigation
-
- The sidebars can be generated from the filesystem, or explicitly defined here.
-
- Create as many sidebars as you want.
- */
-
 // @ts-check
-
 /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
 const sidebars = {
-  // By default, Docusaurus generates a sidebar from the docs folder structure
-  tutorialSidebar: [{ type: "autogenerated", dirName: "." }],
-
-  // But you can create a sidebar manually
-  /*
-  tutorialSidebar: [
+  referenceSidebar: [
+    'introduction',
+    'tutorials/index',
     {
       type: 'category',
-      label: 'Tutorial',
-      items: ['hello'],
+      label: 'Reference',
+      items: [
+        { type: 'autogenerated', dirName: 'reference' }
+      ]
     },
   ],
-   */
+  tutorialsSidebar: [
+    'tutorials/index',
+    {
+      type: 'category',
+      label: 'Beginner',
+      items: [
+        { type: 'autogenerated', dirName: 'tutorials/beginner' }
+      ]
+    },
+    {
+      type: 'category',
+      label: 'Basic',
+      items: [
+        { type: 'autogenerated', dirName: 'tutorials/basic' }
+      ]
+    },
+    {
+      type: 'category',
+      label: 'Advanced',
+      items: [
+        { type: 'autogenerated', dirName: 'tutorials/advanced' }
+      ]
+    }
+  ]
 };
 
 module.exports = sidebars;