auto collapse sidebar. fix mobile menu background filter

cloudposse · Jun 3, 2024 · 8e717f1 · 8e717f1
1 parent b253c3e
commit 8e717f1
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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 {