From 8e717f109ac524a713ae1aea8a9f1f7625348aa7 Mon Sep 17 00:00:00 2001
From: Erik Osterman <erik@cloudposse.com>
Date: Mon, 3 Jun 2024 15:18:21 -0500
Subject: [PATCH] auto collapse sidebar. fix mobile menu background filter

---
 .../vendoring/components-manifest.mdx              |  2 +-
 website/docusaurus.config.js                       |  7 +++++--
 website/src/css/custom.css                         | 14 ++++++++------
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/website/docs/core-concepts/vendoring/components-manifest.mdx b/website/docs/core-concepts/vendoring/components-manifest.mdx
index f4ace06064..bb9523b4c5 100644
--- a/website/docs/core-concepts/vendoring/components-manifest.mdx
+++ b/website/docs/core-concepts/vendoring/components-manifest.mdx
@@ -100,7 +100,7 @@ spec:
 ### Vendoring Modules as Components
 
 Any terraform module can also be used as a component, provided that Atmos backend
-generation ([`auto_generate_backend_file` is `true`](/cli/configuration/#components)) is enabled. Use this strategy when you want to use the module
+generation ([`auto_generate_backend_file` is `true`](/cli/configuration#components)) is enabled. Use this strategy when you want to use the module
 directly, without needing to wrap it in a component to add additional functionality. This is essentially treating a terraform child module as a root
 module.
 
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 13b819bd6c..61870b0bf0 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -29,13 +29,15 @@ const config = {
     projectName: 'atmos',
 
     // Even if you don't use internalization, you can use this field to set useful
-    // metadata like html lang. For example, if your site is Chinese, you may want
-    // to replace "en" with "zh-Hans".
+    // metadata like html lang.
     i18n: {
         defaultLocale: 'en',
         locales: ['en'],
     },
 
+    scripts: [
+    ],
+
     plugins: [
         [
             'docusaurus-plugin-image-zoom', {},
@@ -105,6 +107,7 @@ const config = {
             docs: {
                 sidebar: {
                     hideable: true,
+                    autoCollapseCategories: true,
                 },
             },
             navbar: {
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 562a94894f..f3559ca1e0 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -14,10 +14,6 @@ html[data-theme='dark'] nav.navbar {
     background: rgba(3, 7, 17, .75);
 }
 
-.navbar-sidebar--show .navbar-sidebar {
-    height: 100vh;
-}
-
 a.navbar__item.navbar__link.latest-release-link {
     color: #cccccc6e;
     font-size: 0.8em;
@@ -322,10 +318,16 @@ li.menu__list-item.hidden {
     color: var(--ifm-button-color);
     font-weight: bolder;
     order: 2;
+    margin-left: 2em;
 }
 
-.navbar-sidebar__item menu .navbar-cta-button {
-    margin-left: 2em;
+
+.navbar-sidebar--show {
+  backdrop-filter: none !important;
+}
+
+.navbar-sidebar__item .navbar-cta-button {
+    margin-left: inherit;
 }
 
 .navbar-cta-button:hover {