Docs revamp (#333)

* Docs revamp

* navbar update

Author: PriteshKiri

website/docusaurus.config.js

@@ -29,7 +29,7 @@ const resources = [
   },
   {
     label: 'FAQ',
-    href: 'https://docs.litmuschaos.io/docs/faq-general/'
+    href: 'https://docs.litmuschaos.io/docs/faq/'
   },
   {
     label: 'Issues',
@@ -51,6 +51,14 @@ module.exports = {
       apiKey: 'b388bb42bbdfcd9c02f0eb32c6ee9fa4',
       indexName: 'litmuschaos'
     },
+    announcementBar: {
+      id: 'support_us',
+      content:
+        'Star our repository on <a target="_blank" rel="noopener noreferrer" href="https://github.com/litmuschaos/litmus">GitHub</a> to stay updated with new features and contribute to our project!',
+      backgroundColor: '#d8dbfa',
+      textColor: '#5b44ba',
+      isCloseable: true,
+    },
     navbar: {
       title: 'Litmus Docs',
       logo: {
@@ -59,10 +67,6 @@ module.exports = {
         src: 'img/litmus-light-icon.svg'
       },
       items: [
-        {
-          type: 'docsVersion',
-          position: 'right'
-        },
         {
           activeBasePath: 'Version',
           label: 'Versions',
@@ -84,6 +88,15 @@ module.exports = {
             },
           ]
         },
+        {
+          type: 'docsVersion',
+          position: 'left'
+
+        },
+        {
+          type: 'search',
+          position: 'right',
+        },
         {
           label: 'APIs',
           to: 'https://litmuschaos.github.io/litmus/graphql/v3.11.0/api.html',
@@ -95,23 +108,33 @@ module.exports = {
           position: 'right'
         },
         {
-          to: 'https://github.com/litmuschaos/litmus',
-          label: 'GitHub',
+          to: 'https://hub.litmuschaos.io/',
+          label: 'ChaosHub',
           position: 'right'
+        } ,
+        {
+          to: 'https://github.com/litmuschaos/litmus',
+          position: 'right',
+          label: 'Try Litmus',
+          className: 'try-button',
+          'aria-label': 'Try Litmus',
         },
         {
-          to: 'https://app.slack.com/client/T09NY5SBT/CNXNB0ZTN',
-          label: 'Slack',
-          position: 'right'
+          href: 'https://github.com/litmuschaos/litmus',
+          className: 'github-button',
+          position: 'right',
+          'aria-label': 'GitHub repository',
         },
         {
-          to: 'https://hub.litmuschaos.io/',
-          label: 'ChaosHub',
-          position: 'right'
+          href: 'https://app.slack.com/client/T09NY5SBT/CNXNB0ZTN',
+          className: 'slack-button',
+          position: 'right',
+          'aria-label': 'Slack',
         }
+    
       ]
     },
-    colorMode: {
+    colorMode: {      
       // "light" | "dark"
       defaultMode: 'light',
 

website/sidebars.js

@@ -1,7 +1,12 @@
 module.exports = {
   docs: [
     {
-      Introduction: [
+      type: 'category',
+      label: 'Introduction',
+      className: 'category-as-header',
+      collapsed: false,
+      collapsible: false,
+      items: [
         'introduction/what-is-litmus',
         'introduction/features',
         'introduction/usage',
@@ -10,10 +15,50 @@ module.exports = {
       ]
     },
     {
-      'Getting Started': ['getting-started/resources', 'getting-started/installation']
+      type: 'category',
+      label: 'Getting Started',
+      className: 'category-as-header',
+      collapsed: false,
+      collapsible: false,
+      items: [
+        'getting-started/installation',
+        {
+          type: 'category',
+          label: 'Concepts',
+          items: [
+            'concepts/overview',
+            'concepts/chaos-infrastructure',
+            'concepts/chaoshub',
+            'concepts/chaos-workflow',
+            'concepts/probes',
+            'concepts/user-management',
+            'concepts/projects',
+            'concepts/teaming',
+            'concepts/gitops',
+            'concepts/oauth-dex-concept',
+            'concepts/visualize-experiment'
+          ]
+        },
+        {
+          type: 'category',
+          label: 'Tutorial',
+          items: [
+            'tutorials/overview',
+            'tutorials/podtato-head'
+          ]
+        },
+        'developer-guide/chaoscenter-developer-guide',
+        'glossary',
+        'getting-started/resources'
+      ]
     },
     {
-      Architecture: [
+      type: 'category',
+      label: 'Architecture',
+      className: 'category-as-header',
+      collapsed: false,
+      collapsible: false,
+      items: [
         'architecture/overview',
         'architecture/architecture-summary',
         'architecture/chaos-control-plane',
@@ -22,22 +67,12 @@ module.exports = {
       ]
     },
     {
-      Concepts: [
-        'concepts/overview',
-        'concepts/chaos-infrastructure',
-        'concepts/chaoshub',
-        'concepts/chaos-workflow',
-        'concepts/probes',
-        'concepts/user-management',
-        'concepts/projects',
-        'concepts/teaming',
-        'concepts/gitops',
-        'concepts/oauth-dex-concept',
-        'concepts/visualize-experiment'
-      ]
-    },
-    {
-      'User Guides': [
+      type: 'category',
+      label: 'User Guides',
+      className: 'category-as-header',
+      collapsed: false,
+      collapsible: false,
+      items: [
         'user-guides/overview',
         {
           'Advanced Installation': [
@@ -107,20 +142,32 @@ module.exports = {
       ]
     },
     {
-      'Developer Guide': ['developer-guide/chaoscenter-developer-guide']
+      type: 'category',
+      label: 'Litmusctl',
+      className: 'category-as-header',
+      collapsed: false,
+      collapsible: false,
+      items: ['litmusctl/installation', 'litmusctl/litmusctl-usage']
     },
     {
-      Litmusctl: ['litmusctl/installation', 'litmusctl/litmusctl-usage']
+      type: 'category',
+      label: 'Integrations',
+      className: 'category-as-header',
+      collapsed: false,
+      collapsible: false,
+      items: ['integrations/prometheus', 'integrations/grafana', 'integrations/backstage']
     },
     {
-      Integrations: ['integrations/prometheus', 'integrations/grafana', 'integrations/backstage']
-    },
-    {
-      Tutorials: ['tutorials/overview', 'tutorials/podtato-head']
-    },
-    'troubleshooting',
-    'best-practices',
-    'glossary',
-    'faq'
+      type: 'category',
+      label: 'Reference',
+      className: 'category-as-header',
+      collapsed: false,
+      collapsible: false,
+      items: [
+        'troubleshooting',
+        'best-practices',
+        'faq'
+      ]
+    }
   ]
 }