fix mobile rendering

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

website/docs/flow/stages/identification/index.md

@@ -12,7 +12,7 @@ Select which fields the user can use to identify themselves. Multiple fields can
 -   Email
 -   UPN
 
-    UPN will attempt to identify the user based on the `upn` attribute, which can be imported with an [LDAP Source](/integrations/sources/ldap/index)
+    UPN will attempt to identify the user based on the `upn` attribute, which can be imported with an [LDAP Source](../../../sources/ldap/)
 
 :::info
 Starting with authentik 2023.5, when no user fields are selected and only one source is selected, authentik will automatically redirect the user to that source.

website/docs/releases/2022/v2022.8.md

@@ -13,7 +13,7 @@ slug: "/releases/2022.8"
 
 -   Blueprints
 
-    Blueprints allow for the configuration, automation and templating of authentik objects and configurations. They can be used to bootstrap new instances, configure them automatically without external tools, and to template configurations for sharing. See more [here](../../developer-docs/blueprints/)
+    Blueprints allow for the configuration, automation and templating of authentik objects and configurations. They can be used to bootstrap new instances, configure them automatically without external tools, and to template configurations for sharing. See more [here](../../blueprints/index.md)
 
     For installations upgrading to 2022.8, if a single flow exists, then the default blueprints will not be activated, to not overwrite user modifications.
 
@@ -23,7 +23,7 @@ slug: "/releases/2022.8"
 
 -   Support for Caddy forward auth
 
-    Based on the traefik support, there is now dedicated support for Caddy with configuration examples, see [here](../providers/proxy/forward_auth)
+    Based on the traefik support, there is now dedicated support for Caddy with configuration examples, see [here](../../providers/proxy/forward_auth.mdx)
 
 ## Minor changes/fixes
 

website/docs/sources/index.mdx

@@ -1,8 +1,10 @@
 ---
-title: General
+title: Sources
-slug: general
 ---
 
+import DocCardList from "@theme/DocCardList";
+import { useCurrentSidebarCategory } from "@docusaurus/theme-common";
+
 Sources allow you to connect authentik to an existing user directory. They can also be used for social logins, using external providers such as Facebook, Twitter, etc.
 
 ### Add Sources to Default Login Page
@@ -14,3 +16,5 @@ To have sources show on the default login screen you will need to add them. This
 3. Click the **Stage Bindings** tab
 4. Chose **Edit Stage** for the _default-authentication-identification_ stage
 5. Under **Sources** you should see the additional sources you have configured. Click all applicable sources to have them displayed on the Login Page
+
+<DocCardList items={useCurrentSidebarCategory().items} />

website/docs/sources/ldap/index.md

@@ -1,5 +1,5 @@
 ---
-title: LDAP
+title: LDAP Source
 ---
 
 Sources allow you to connect authentik to an existing user directory. They can also be used for social logins, using external providers such as Facebook, Twitter, etc.
@@ -9,9 +9,9 @@ Sources allow you to connect authentik to an existing user directory. They can a
 This source allows you to import users and groups from an LDAP Server.
 
 :::info
-For Active Directory, follow the [Active Directory Integration](../active-directory/)
+For Active Directory, follow the [Active Directory Integration](../../../integrations/sources/active-directory/)
 
-For FreeIPA, follow the [FreeIPA Integration](../freeipa/)
+For FreeIPA, follow the [FreeIPA Integration](../../../integrations/sources/freeipa/)
 :::
 
 -   Server URI: URI to your LDAP server/Domain Controller.

website/docs/sources/oauth/index.md

@@ -1,5 +1,5 @@
 ---
-title: OAuth
+title: OAuth Source
 ---
 
 :::note

website/docs/sources/saml/index.md

@@ -1,5 +1,5 @@
 ---
-title: SAML
+title: SAML Source
 ---
 
 This source allows authentik to act as a SAML Service Provider. Just like the SAML Provider, it supports signed requests. Vendor-specific documentation can be found in the Integrations Section.

website/docusaurus.config.js

@@ -1,4 +1,5 @@
 const fs = require("fs").promises;
+const generateNavbarDropdown = require("./src/utils.js").generateNavbarDropdown;
 
 /** @type {import('@docusaurus/types').DocusaurusConfig} */
 module.exports = async function () {
@@ -21,28 +22,179 @@ module.exports = async function () {
             navbar: {
                 logo: {
                     alt: "authentik logo",
-                    src: "img/icon_left_brand.svg",
+                    src: "img/icon.svg",
                 },
                 items: [
-                    { to: "blog", label: "Blog", position: "left" },
+                    { to: "blog", label: "Why authentik", position: "left" },
                     {
-                        to: "docs/",
+                        type: "html",
-                        label: "Docs",
+                        className:
+                            "dropdown dropdown--hoverable dropdown--custom",
+                        value: generateNavbarDropdown(
+                            "Platform",
+                            [
+                                {
+                                    label: "Get started",
+                                    items: [
+                                        {
+                                            label: "Docker compose",
+                                            to: "docs/installation/docker-compose",
+                                        },
+                                        {
+                                            label: "Kubernetes",
+                                            to: "docs/installation/kubernetes",
+                                        },
+                                    ],
+                                },
+                                {
+                                    label: "Documentation",
+                                    items: [
+                                        {
+                                            label: "Installation",
+                                            to: "docs/installation/",
+                                        },
+                                        {
+                                            label: "Integrations",
+                                            to: "integrations/",
+                                        },
+                                        {
+                                            label: "Release notes",
+                                            to: "docs/releases/",
+                                        },
+                                        {
+                                            label: "Roadmap",
+                                            to: "docs/",
+                                        },
+                                    ],
+                                },
+                                {
+                                    label: "Solutions",
+                                    items: [
+                                        {
+                                            label: "Work",
+                                            to: "docs/installation/",
+                                        },
+                                        {
+                                            label: "foo",
+                                            to: "docs/",
+                                        },
+                                        {
+                                            label: "bar",
+                                            to: "integrations/",
+                                        },
+                                        {
+                                            label: "baz",
+                                            to: "integrations/",
+                                        },
+                                    ],
+                                },
+                            ],
+                            `<div class="category enterprise">
+                                <p>Enterprise</p>
+                                <ul>
+                                    <li><a class="dropdown__link" href="">Advantages</a></li>
+                                    <li><a class="dropdown__link" href="">Support</a></li>
+                                    <li><a class="dropdown__link" href="">Pricing</a></li>
+                                </ul>
+                            </div>`,
+                        ),
                         position: "left",
                     },
                     {
-                        to: "integrations/",
                         label: "Integrations",
-                        position: "left",
+                        to: "integrations/",
                     },
                     {
-                        to: "developer-docs/",
-                        label: "Developer",
-                        position: "left",
-                    },
-                    {
-                        to: "pricing/",
                         label: "Pricing",
+                        to: "pricing/",
+                    },
+                    {
+                        type: "html",
+                        className:
+                            "dropdown dropdown--hoverable dropdown--custom",
+                        value: generateNavbarDropdown("Community", [
+                            {
+                                label: "Connect",
+                                items: [
+                                    {
+                                        label: "Blog",
+                                        to: "blog/",
+                                    },
+                                    {
+                                        label: "Discord",
+                                        to: "https://goauthentik.io/discord",
+                                    },
+                                    {
+                                        label: "GitHub",
+                                        to: "https://github.com/goauthentik/authentik",
+                                    },
+                                ],
+                            },
+                            {
+                                label: "Developer",
+                                items: [
+                                    {
+                                        label: "Set up authentik",
+                                        to: "developer-docs/setup/full-dev-environment/",
+                                    },
+                                    {
+                                        label: "Writing documentation",
+                                        to: "developer-docs/docs/writing-documentation",
+                                    },
+                                ],
+                            },
+                            {
+                                label: "Community",
+                                items: [
+                                    {
+                                        label: "Contributing",
+                                        to: "developer-docs/",
+                                    },
+                                    {
+                                        label: "Events",
+                                        to: "developer-docs/events",
+                                    },
+                                ],
+                            },
+                            {
+                                label: "Resources",
+                                items: [
+                                    {
+                                        label: "Icons & Branding",
+                                        to: "developer-docs/",
+                                    },
+                                ],
+                            },
+                        ]),
+                        position: "left",
+                    },
+                    {
+                        type: "html",
+                        className:
+                            "dropdown dropdown--hoverable dropdown--custom",
+                        value: generateNavbarDropdown("About us", [
+                            {
+                                label: "",
+                                items: [
+                                    {
+                                        label: "The company",
+                                        to: "",
+                                    },
+                                    {
+                                        label: "Jobs",
+                                        to: "",
+                                    },
+                                    {
+                                        label: "Team",
+                                        to: "",
+                                    },
+                                    {
+                                        label: "Contact us",
+                                        to: "",
+                                    },
+                                ],
+                            },
+                        ]),
                         position: "left",
                     },
                     {
@@ -51,12 +203,6 @@ module.exports = async function () {
                         "aria-label": "GitHub repository",
                         position: "right",
                     },
-                    {
-                        href: "https://goauthentik.io/discord",
-                        className: "header-discord-link",
-                        "aria-label": "GitHub repository",
-                        position: "right",
-                    },
                 ],
             },
             footer: {

website/docusaurus.docs-only.js

@@ -23,7 +23,7 @@ module.exports = async function () {
                     {
                         to: "docs/",
                         activeBasePath: "docs",
-                        label: "Docs",
+                        label: "Documentation",
                         position: "left",
                     },
                     {
@@ -35,7 +35,7 @@ module.exports = async function () {
                     {
                         to: "developer-docs/",
                         activeBasePath: "developer-docs",
-                        label: "Developer Docs",
+                        label: "Developer documentation",
                         position: "left",
                     },
                     {

website/integrations/services/index.mdx

@@ -8,6 +8,8 @@ import { useCurrentSidebarCategory } from "@docusaurus/theme-common";
 
 Below is a list of all applications that are known to work with authentik.
 
+The pages in this section describe integrations with various other applications, see [Providers](../../docs/providers).
+
 All integrations will have a combination of these badges:
 
 -   <span class="badge badge--secondary">Support level: Community</span>

website/integrations/sources/apple/index.md

@@ -69,5 +69,5 @@ The following placeholders will be used:
 Save, and you now have Apple as a source.
 
 :::note
-For more details on how-to have the new source display on the Login Page see [here](../general#add-sources-to-default-login-page).
+For more details on how-to have the new source display on the Login Page see [here](../../../docs/sources/#add-sources-to-default-login-page).
 :::

website/integrations/sources/azure-ad/index.md

@@ -48,5 +48,5 @@ If you kept the default _Supported account types_ selection of _Single tenant_,
 Save, and you now have Azure AD as a source.
 
 :::note
-For more details on how-to have the new source display on the Login Page see [here](../general#add-sources-to-default-login-page).
+For more details on how-to have the new source display on the Login Page see [here](../../../docs/sources/#add-sources-to-default-login-page).
 :::

website/integrations/sources/discord/index.md

@@ -50,7 +50,7 @@ Here is an example of a complete authentik Discord OAuth Source
 Save, and you now have Discord as a source.
 
 :::note
-For more details on how-to have the new source display on the Login Page see [here](../general#add-sources-to-default-login-page).
+For more details on how-to have the new source display on the Login Page see [here](../../../docs/sources/#add-sources-to-default-login-page).
 :::
 
 ### Checking for membership of a Discord Guild

website/integrations/sources/github/index.md

@@ -47,7 +47,7 @@ Here is an example of a complete authentik Github OAuth Source
 Save, and you now have Github as a source.
 
 :::note
-For more details on how-to have the new source display on the Login Page see [here](../general#add-sources-to-default-login-page).
+For more details on how-to have the new source display on the Login Page see [here](../../../docs/sources/#add-sources-to-default-login-page).
 :::
 
 ### Checking for membership of a GitHub Organisation

website/integrations/sources/google/index.md

@@ -79,7 +79,7 @@ Here is an example of a complete authentik Google OAuth Source
 Save, and you now have Google as a source.
 
 :::note
-For more details on how-to have the new source display on the Login Page see [here](../general#add-sources-to-default-login-page).
+For more details on how-to have the new source display on the Login Page see [here](../../../docs/sources/#add-sources-to-default-login-page).
 :::
 
 ## Username mapping

website/integrations/sources/index.mdx

@@ -0,0 +1,26 @@
+---
+title: Sources
+---
+
+import DocCardList from "@theme/DocCardList";
+import { useCurrentSidebarCategory } from "@docusaurus/theme-common";
+
+Below is a list of all sources that are known to work with authentik.
+
+The pages in this section describe integrations with various other applications, see [Sources](../../docs/sources).
+
+All integrations will have a combination of these badges:
+
+-   <span class="badge badge--secondary">Support level: Community</span>
+
+    The integration is community maintained.
+
+-   <span class="badge badge--info">Support level: Vendor</span>
+
+    The integration is supported by the vendor.
+
+-   <span class="badge badge--primary">Support level: authentik</span>
+
+    The integration is regularly tested by the authentik team.
+
+<DocCardList items={useCurrentSidebarCategory().items} />

website/integrations/sources/mailcow/index.md

@@ -50,5 +50,5 @@ Here is an example of a complete authentik Mailcow OAuth Source
 Save, and you now have Mailcow as a source.
 
 :::note
-For more details on how-to have the new source display on the Login Page see [here](../general#add-sources-to-default-login-page).
+For more details on how-to have the new source display on the Login Page see [here](../../../docs/sources/#add-sources-to-default-login-page).
 :::

website/integrations/sources/plex/index.md

@@ -23,5 +23,5 @@ Add _Plex_ as a _source_
 Save, and you now have Plex as a source.
 
 :::note
-For more details on how-to have the new source display on the Login Page see [here](../general#add-sources-to-default-login-page).
+For more details on how-to have the new source display on the Login Page see [here](../../../docs/sources/#add-sources-to-default-login-page).
 :::

website/integrations/sources/twitch/index.md

@@ -56,5 +56,5 @@ Here is an example of a complete authentik Twitch OAuth Source
 Save, and you now have Twitch as a source.
 
 :::note
-For more details on how-to have the new source display on the Login Page see [here](../general#add-sources-to-default-login-page).
+For more details on how-to have the new source display on the Login Page see [here](../../../docs/sources/#add-sources-to-default-login-page).
 :::

website/integrations/sources/twitter/index.md

@@ -44,5 +44,5 @@ You will need to create a new project, and OAuth credentials in the Twitter Deve
 5. **Consumer Secret:** Your Client Secret from step 25
 
 :::note
-For more details on how-to have the new source display on the Login Page see [here](../general#add-sources-to-default-login-page).
+For more details on how-to have the new source display on the Login Page see [here](../../../docs/sources/#add-sources-to-default-login-page).
 :::

website/netlify.toml

@@ -29,6 +29,19 @@
   status = 301
   force = true
 
+# Migrate API and blueprints into main docs
+[[redirects]]
+  from = "/developer-docs/api*"
+  to = "/docs/api:splat"
+[[redirects]]
+  from = "/developer-docs/blueprints*"
+  to = "/docs/blueprints:splat"
+
+# Migrate base source docs into main section
+[[redirects]]
+  from = "/integrations/sources*"
+  to = "/docs/sources:splat"
+
 # Container registry
 [[redirects]]
   from = "/v2"

website/package-lock.json

@@ -4518,9 +4518,9 @@
             }
         },
         "node_modules/caniuse-lite": {
-            "version": "1.0.30001478",
+            "version": "1.0.30001542",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001478.tgz",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001542.tgz",
-            "integrity": "sha512-gMhDyXGItTHipJj2ApIvR+iVB5hd0KP3svMWWXDvZOmjzJJassGLMfxRkQCSYgGd2gtdL/ReeiyvMSFD1Ss6Mw==",
+            "integrity": "sha512-UrtAXVcj1mvPBFQ4sKd38daP8dEcXXr5sQe6QNNinaPd0iA/cxg9/l3VrSdL73jgw5sKyuQ6jNgiKO12W3SsVA==",
             "funding": [
                 {
                     "type": "opencollective",
@@ -17148,9 +17148,9 @@
             }
         },
         "caniuse-lite": {
-            "version": "1.0.30001478",
+            "version": "1.0.30001542",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001478.tgz",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001542.tgz",
-            "integrity": "sha512-gMhDyXGItTHipJj2ApIvR+iVB5hd0KP3svMWWXDvZOmjzJJassGLMfxRkQCSYgGd2gtdL/ReeiyvMSFD1Ss6Mw=="
+            "integrity": "sha512-UrtAXVcj1mvPBFQ4sKd38daP8dEcXXr5sQe6QNNinaPd0iA/cxg9/l3VrSdL73jgw5sKyuQ6jNgiKO12W3SsVA=="
         },
         "ccount": {
             "version": "1.1.0",

website/sidebars.js

@@ -59,6 +59,12 @@ const docsSidebar = {
         {
             type: "category",
             label: "Providers",
+            link: {
+                type: "generated-index",
+                title: "Providers",
+                slug: "providers",
+                description: "Overview of all available provider types",
+            },
             items: [
                 {
                     type: "category",
@@ -114,11 +120,21 @@ const docsSidebar = {
         },
         {
             type: "category",
-            label: "Outposts",
+            label: "Sources",
             link: {
                 type: "doc",
-                id: "outposts/index",
+                id: "sources/index",
             },
+            items: [
+                "sources/ldap/index",
+                "sources/oauth/index",
+                "sources/saml/index",
+            ],
+        },
+        {
+            type: "category",
+            label: "Outposts",
+            link: {},
             items: [
                 "outposts/embedded/embedded",
                 {
@@ -262,6 +278,43 @@ const docsSidebar = {
             label: "Users & Groups",
             items: ["user-group/user", "user-group/group"],
         },
+        {
+            type: "category",
+            label: "Blueprints",
+            link: {
+                type: "doc",
+                id: "blueprints/index",
+            },
+            items: [
+                "blueprints/export",
+                "blueprints/v1/structure",
+                "blueprints/v1/tags",
+                "blueprints/v1/example",
+                {
+                    type: "category",
+                    label: "Models",
+                    link: {
+                        type: "doc",
+                        id: "blueprints/v1/models",
+                    },
+                    items: ["blueprints/v1/meta"],
+                },
+            ],
+        },
+        {
+            type: "category",
+            label: "API",
+            link: {
+                type: "doc",
+                id: "api/api",
+            },
+            items: [
+                "api/flow-executor",
+                "api/making-schema-changes",
+                "api/websocket",
+                "api/browser",
+            ],
+        },
         {
             type: "category",
             label: "Release Notes",

website/sidebarsDev.js

@@ -12,43 +12,6 @@ module.exports = {
             type: "doc",
             id: "index",
         },
-        {
-            type: "category",
-            label: "Blueprints",
-            link: {
-                type: "doc",
-                id: "blueprints/index",
-            },
-            items: [
-                "blueprints/export",
-                "blueprints/v1/structure",
-                "blueprints/v1/tags",
-                "blueprints/v1/example",
-                {
-                    type: "category",
-                    label: "Models",
-                    link: {
-                        type: "doc",
-                        id: "blueprints/v1/models",
-                    },
-                    items: ["blueprints/v1/meta"],
-                },
-            ],
-        },
-        {
-            type: "category",
-            label: "API",
-            link: {
-                type: "doc",
-                id: "api/api",
-            },
-            items: [
-                "api/flow-executor",
-                "api/making-schema-changes",
-                "api/websocket",
-                "api/browser",
-            ],
-        },
         {
             type: "category",
             label: "Setup",
@@ -92,6 +55,11 @@ module.exports = {
         {
             type: "category",
             label: "Community Events",
+            link: {
+                type: "generated-index",
+                title: "Events",
+                slug: "events",
+            },
             items: ["hackathon/index"],
         },
     ],

website/sidebarsIntegrations.js

@@ -141,11 +141,8 @@ module.exports = {
             type: "category",
             label: "Federation & Social login",
             link: {
-                type: "generated-index",
+                type: "doc",
-                title: "Sources",
+                id: "sources/index",
-                slug: "sources",
-                description:
-                    "Sources of users which can be federated with authentik",
             },
             items: [
                 {
@@ -156,16 +153,6 @@ module.exports = {
                         "sources/freeipa/index",
                     ],
                 },
-                "sources/general",
-                {
-                    type: "category",
-                    label: "Protocols",
-                    items: [
-                        "sources/ldap/index",
-                        "sources/oauth/index",
-                        "sources/saml/index",
-                    ],
-                },
                 {
                     type: "category",
                     label: "Social Logins",

website/src/css/custom.css

@@ -6,9 +6,13 @@
     --ifm-color-primary-light: #fd644b;
     --ifm-color-primary-lighter: #fd7159;
     --ifm-color-primary-lightest: #fe9786;
+    --purple: rgba(47, 6, 75, 1);
     --white: #e3e3e3;
     --ifm-navbar-link-color: var(--white);
     --ifm-navbar-link-hover-color: var(--ifm-color-gray-1000);
+    --ifm-menu-color: var(--white);
+    --ifm-menu-color-background-active: var(--white);
+    --ifm-navbar-background-color: var(--ifm-color-primary);
 }
 
 .button.button--outline {
@@ -40,7 +44,7 @@
 .hero--primary {
     background: radial-gradient(
         circle,
-        rgba(47, 6, 75, 1) 0%,
+        var(--purple) 0%,
         var(--ifm-color-primary) 50%
     );
     padding-bottom: 5.3rem !important;
@@ -68,19 +72,6 @@
         no-repeat;
 }
 
-.header-discord-link:hover {
-    opacity: 0.6;
-}
-
-.header-discord-link::before {
-    content: "";
-    width: 24px;
-    height: 19px;
-    display: flex;
-    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20127.14%2096.36%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22%E5%9B%BE%E5%B1%82_2%22%20data-name%3D%22%E5%9B%BE%E5%B1%82%202%22%3E%3Cg%20id%3D%22Discord_Logos%22%20data-name%3D%22Discord%20Logos%22%3E%3Cg%20id%3D%22Discord_Logo_-_Large_-_White%22%20data-name%3D%22Discord%20Logo%20-%20Large%20-%20White%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M107.7%2C8.07A105.15%2C105.15%2C0%2C0%2C0%2C81.47%2C0a72.06%2C72.06%2C0%2C0%2C0-3.36%2C6.83A97.68%2C97.68%2C0%2C0%2C0%2C49%2C6.83%2C72.37%2C72.37%2C0%2C0%2C0%2C45.64%2C0%2C105.89%2C105.89%2C0%2C0%2C0%2C19.39%2C8.09C2.79%2C32.65-1.71%2C56.6.54%2C80.21h0A105.73%2C105.73%2C0%2C0%2C0%2C32.71%2C96.36%2C77.7%2C77.7%2C0%2C0%2C0%2C39.6%2C85.25a68.42%2C68.42%2C0%2C0%2C1-10.85-5.18c.91-.66%2C1.8-1.34%2C2.66-2a75.57%2C75.57%2C0%2C0%2C0%2C64.32%2C0c.87.71%2C1.76%2C1.39%2C2.66%2C2a68.68%2C68.68%2C0%2C0%2C1-10.87%2C5.19%2C77%2C77%2C0%2C0%2C0%2C6.89%2C11.1A105.25%2C105.25%2C0%2C0%2C0%2C126.6%2C80.22h0C129.24%2C52.84%2C122.09%2C29.11%2C107.7%2C8.07ZM42.45%2C65.69C36.18%2C65.69%2C31%2C60%2C31%2C53s5-12.74%2C11.43-12.74S54%2C46%2C53.89%2C53%2C48.84%2C65.69%2C42.45%2C65.69Zm42.24%2C0C78.41%2C65.69%2C73.25%2C60%2C73.25%2C53s5-12.74%2C11.44-12.74S96.23%2C46%2C96.12%2C53%2C91.08%2C65.69%2C84.69%2C65.69Z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E")
-        no-repeat;
-}
-
 @media (min-width: 1600px) {
     #__docusaurus_skipToContent_fallback > div {
         align-self: center;
@@ -94,17 +85,6 @@
     max-width: 1600px;
 }
 
-/* Load new font as Roboto */
-
-@font-face {
-    font-family: "superMario";
-    src: url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap");
-}
-
-body {
-    font-family: "Roboto", sans-serif;
-}
-
 /* Container styles */
 .content {
     width: 100vw;
@@ -135,3 +115,52 @@ body {
 .navbar-sidebar__items {
     background-color: var(--ifm-color-primary);
 }
+
+/* Custom navbar dropdown */
+.dropdown--custom div.dropdown__menu {
+    display: flex;
+    font-size: calc(var(--ifm-font-size-base) * 1.2);
+    border-radius: 0;
+}
+.dropdown--custom div.category {
+    min-width: 10rem;
+}
+.dropdown--custom div.category p {
+    color: var(--purple);
+    font-weight: bold;
+    margin: calc(var(--ifm-paragraph-margin-bottom) / 2);
+}
+.dropdown--custom div.category ul {
+    list-style: none;
+    font-size: calc(var(--ifm-font-size-base) * 1.2);
+    padding-left: calc(var(--ifm-paragraph-margin-bottom) / 2);
+}
+.dropdown--custom div.category .dropdown__link {
+    font-size: 1rem;
+}
+
+.dropdown--custom div.category.enterprise {
+    background-color: #2f064b2e;
+    margin: -8px;
+    padding: 8px;
+}
+
+@media screen and (max-width: 830px) {
+    .dropdown--custom div.dropdown__menu {
+        flex-direction: column;
+    }
+    .dropdown--custom div.category.enterprise {
+        margin-top: 8px;
+        padding-top: 0px;
+    }
+}
+
+@media screen and (max-width: 996px) {
+    .dropdown {
+        width: 100%;
+        line-height: 1.25;
+    }
+    .navbar__link {
+        padding: var(--ifm-menu-link-padding-vertical) var(--ifm-menu-link-padding-horizontal);
+    }
+}

website/src/utils.js

@@ -1,3 +1,24 @@
+function generateNavbarDropdown(label, categories, extra) {
+    return `<a aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">${label}</a>
+    <div class="dropdown__menu">
+        ${categories
+            .map(({ label, items }) => {
+                return `<div class="category">
+                <p>${label}</p>
+                <ul>
+                ${items
+                    .map(({ to, label }) => {
+                        return `<li><a class="dropdown__link" href="${to}">${label}</a></li>`;
+                    })
+                    .join("")}
+            </ul>
+            </div>`;
+            })
+            .join("")}
+        ${extra ?? ""}
+    </div>`;
+}
+
 function generateVersionDropdown(sidebar) {
     const releases = sidebar.docs
         .filter((doc) => doc.link?.slug === "releases")[0]
@@ -28,4 +49,5 @@ function generateVersionDropdown(sidebar) {
 
 module.exports = {
     generateVersionDropdown,
+    generateNavbarDropdown,
 };