From c64c98b9c5c660d539b792390bf6027cf0ec53e4 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens@goauthentik.io>
Date: Mon, 2 Oct 2023 12:57:23 +0200
Subject: [PATCH] fix mobile rendering

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---
 website/package-lock.json  | 12 ++++++------
 website/src/css/custom.css | 14 +++++++++++++-
 website/src/utils.js       |  2 +-
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/website/package-lock.json b/website/package-lock.json
index 87c6c49f6..557e14111 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -4518,9 +4518,9 @@
             }
         },
         "node_modules/caniuse-lite": {
-            "version": "1.0.30001478",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001478.tgz",
-            "integrity": "sha512-gMhDyXGItTHipJj2ApIvR+iVB5hd0KP3svMWWXDvZOmjzJJassGLMfxRkQCSYgGd2gtdL/ReeiyvMSFD1Ss6Mw==",
+            "version": "1.0.30001542",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001542.tgz",
+            "integrity": "sha512-UrtAXVcj1mvPBFQ4sKd38daP8dEcXXr5sQe6QNNinaPd0iA/cxg9/l3VrSdL73jgw5sKyuQ6jNgiKO12W3SsVA==",
             "funding": [
                 {
                     "type": "opencollective",
@@ -17148,9 +17148,9 @@
             }
         },
         "caniuse-lite": {
-            "version": "1.0.30001478",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001478.tgz",
-            "integrity": "sha512-gMhDyXGItTHipJj2ApIvR+iVB5hd0KP3svMWWXDvZOmjzJJassGLMfxRkQCSYgGd2gtdL/ReeiyvMSFD1Ss6Mw=="
+            "version": "1.0.30001542",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001542.tgz",
+            "integrity": "sha512-UrtAXVcj1mvPBFQ4sKd38daP8dEcXXr5sQe6QNNinaPd0iA/cxg9/l3VrSdL73jgw5sKyuQ6jNgiKO12W3SsVA=="
         },
         "ccount": {
             "version": "1.1.0",
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 010b1b92b..76bb0645a 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -10,6 +10,9 @@
     --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 {
@@ -114,7 +117,6 @@
 }
 
 /* Custom navbar dropdown */
-
 .dropdown--custom div.dropdown__menu {
     display: flex;
     font-size: calc(var(--ifm-font-size-base) * 1.2);
@@ -152,3 +154,13 @@
         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);
+    }
+}
diff --git a/website/src/utils.js b/website/src/utils.js
index c98ef0753..a1377df3a 100644
--- a/website/src/utils.js
+++ b/website/src/utils.js
@@ -1,5 +1,5 @@
 function generateNavbarDropdown(label, categories, extra) {
-    return `<a aria-haspopup="true" aria-expanded="false" role="button" class="menu__link">${label}</a>
+    return `<a aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">${label}</a>
     <div class="dropdown__menu">
         ${categories
             .map(({ label, items }) => {