refactor: update sidebar structure and labels for documentation (#3436)

* refactor: update sidebar structure and labels for documentation

* chore: bump version to 3.3.4 in package.json

Author: ethanshar

docuilib/docusaurus.config.js

@@ -92,8 +92,14 @@ const darkCodeTheme = themes.dracula;
             {
               type: 'doc',
               docId: 'getting-started/setup',
-              position: 'right',
-              label: 'Docs'
+              position: 'left',
+              label: 'Guides'
+            },
+            {
+              type: 'doc',
+              docId: 'components/basic/View',
+              position: 'left',
+              label: 'Components'
             },
             // {to: '/blog', label: 'Blog', position: 'left'},
             {

docuilib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilib-docs",
-  "version": "3.3.3",
+  "version": "3.3.4",
   "main": "./src/index.ts",
   "scripts": {
     "docusaurus": "docusaurus",

docuilib/sidebars.js

@@ -31,8 +31,7 @@ module.exports = {
   // By default, Docusaurus generates a sidebar from the docs folder structure
   // tutorialSidebar: [{type: 'autogenerated', dirName: '.'}]
 
-  // But you can create a sidebar manually
-  tutorialSidebar: [
+  guidesSidebar: [
     {
       type: 'category',
       label: 'Getting Started',
@@ -54,25 +53,29 @@ module.exports = {
           dirName: `foundation`
         }
       ]
-    },
+    }
+  ],
+  componentsSidebar: [
     {
       type: 'category',
       label: 'Components',
       collapsible: false,
       // items: ['Basic', 'Lists', 'Form', 'Overlays', 'Layout', 'Keyboard', 'Incubator'].map(category => {
-      items: Object.keys(componentsCategories).sort().map(category => {
-        return {
-          type: 'category',
-          label: componentsCategories[category],
-          collapsed: true,
-          items: [
-            {
-              type: 'autogenerated',
-              dirName: `components/${category}`
-            }
-          ]
-        };
-      })
+      items: Object.keys(componentsCategories)
+        .sort()
+        .map(category => {
+          return {
+            type: 'category',
+            label: componentsCategories[category],
+            collapsed: true,
+            items: [
+              {
+                type: 'autogenerated',
+                dirName: `components/${category}`
+              }
+            ]
+          };
+        })
     }
   ]
 };