feat: introduce the notion of "Products" in the nav (#418)

Signed-off-by: David Dal Busco <david.dalbusco@outlook.com>

Author: peterpeterparker

docusaurus.config.ts

@@ -115,11 +115,42 @@ const config: Config = {
         },
         hideOnScroll: true,
         items: [
+          {
+            type: "dropdown",
+            label: "Products",
+            position: "left",
+            items: [
+              {
+                to: "/docs/build/authentication",
+                html: `<span style="display: flex; align-items: center; gap: 0.45rem;"><span style="display: flex; justify-content: center; align-items: center; width: 1.25rem; height: 1.25rem; padding: 0.25rem; border-radius: 50%; background: #fff;"><img src="/icons/authentication.svg" style="height: 1em;" alt="" /></span>Authentication</span>`
+              },
+              {
+                to: "/docs/build/datastore",
+                html: `<span style="display: flex; align-items: center; gap: 0.45rem;"><span style="display: flex; justify-content: center; align-items: center; width: 1.25rem; height: 1.25rem; padding: 0.25rem; border-radius: 50%; background: #fff;"><img src="/icons/datastore.svg" style="height: 1em;" alt="" /></span>Datastore</span>`
+              },
+              {
+                to: "/docs/build/storage",
+                html: `<span style="display: flex; align-items: center; gap: 0.45rem;"><span style="display: flex; justify-content: center; align-items: center; width: 1.25rem; height: 1.25rem; padding: 0.25rem; border-radius: 50%; background: #fff;"><img src="/icons/storage.svg" style="height: 1em;" alt="" /></span>Storage</span>`
+              },
+              {
+                to: "/docs/build/hosting",
+                html: `<span style="display: flex; align-items: center; gap: 0.45rem;"><span style="display: flex; justify-content: center; align-items: center; width: 1.25rem; height: 1.25rem; padding: 0.25rem; border-radius: 50%; background: #fff;"><img src="/icons/hosting.svg" style="height: 1em;" alt="" /></span>Hosting</span>`
+              },
+              {
+                to: "/docs/build/functions",
+                html: `<span style="display: flex; align-items: center; gap: 0.45rem;"><span style="display: flex; justify-content: center; align-items: center; width: 1.25rem; height: 1.25rem; padding: 0.25rem; border-radius: 50%; background: #fff;"><img src="/icons/functions.svg" style="height: 1em;" alt="" /></span>Functions</span>`
+              },
+              {
+                to: "/docs/build/analytics",
+                html: `<span style="display: flex; align-items: center; gap: 0.45rem;"><span style="display: flex; justify-content: center; align-items: center; width: 1.25rem; height: 1.25rem; padding: 0.25rem; border-radius: 50%; background: #fff;"><img src="/icons/analytics.svg" style="height: 1em;" alt="" /></span>Analytics</span>`
+              }
+            ]
+          },
           {
             type: "doc",
             docId: "intro",
             position: "left",
-            label: "Documentation"
+            label: "Docs"
           },
           {
             type: "docSidebar",
@@ -191,6 +222,39 @@ const config: Config = {
               {
                 label: "Guides",
                 to: "/docs/category/guides"
+              },
+              {
+                label: "References",
+                to: "/docs/reference/cli"
+              }
+            ]
+          },
+          {
+            title: "Products",
+            items: [
+              {
+                label: "Authentication",
+                to: "/docs/build/authentication"
+              },
+              {
+                label: "Datastore",
+                to: "/docs/build/datastore"
+              },
+              {
+                label: "Storage",
+                to: "/docs/build/storage"
+              },
+              {
+                label: "Hosting",
+                to: "/docs/build/hosting"
+              },
+              {
+                label: "Functions",
+                to: "/docs/build/functions"
+              },
+              {
+                label: "Analytics",
+                to: "/docs/build/analytics"
               }
             ]
           },

sidebars.ts

@@ -61,9 +61,10 @@ const sidebars: SidebarsConfig = {
     },
     {
       type: "category",
-      label: "Build",
+      label: "Products",
       link: {
         type: "generated-index",
+        slug: "/category/build", // For backward compatibility, we use /build in the URL even though the label is now "Products" (it was originally called "Build")
         description:
           "Learn about Juno features to build apps running 100% on blockchain without the need to manage servers or write any backend code."
       },