diff --git a/src/components/navigation/sidebars/nav/index.tsx b/src/components/navigation/sidebars/nav/index.tsx
index 5a5b763..95c57ec 100644
--- a/src/components/navigation/sidebars/nav/index.tsx
+++ b/src/components/navigation/sidebars/nav/index.tsx
@@ -56,11 +56,11 @@ const NavComponent: Component<NavProps> = props => {
     if (open()) {
       window.addEventListener("click", handleClickOutside);
       document.body.style.overflow = "hidden";
-      document.body.classList.add("dim-content");
+      document.body.classList.add("dim-content-nav");
     } else {
       window.removeEventListener("click", handleClickOutside);
       document.body.style.overflow = "auto";
-      document.body.classList.remove("dim-content");
+      document.body.classList.remove("dim-content-nav");
     }
   });
 
diff --git a/src/components/navigation/sidebars/toc/index.tsx b/src/components/navigation/sidebars/toc/index.tsx
index f25096a..566e596 100644
--- a/src/components/navigation/sidebars/toc/index.tsx
+++ b/src/components/navigation/sidebars/toc/index.tsx
@@ -51,11 +51,11 @@ const TableOfContents: Component<TOCProps> = props => {
     if (open()) {
       window.addEventListener("click", handleClickOutside);
       document.body.style.overflow = "hidden";
-      document.body.classList.add("dim-content");
+      document.body.classList.add("dim-content-toc");
     } else {
       window.removeEventListener("click", handleClickOutside);
       document.body.style.overflow = "auto";
-      document.body.classList.remove("dim-content");
+      document.body.classList.remove("dim-content-toc");
     }
   });
 
diff --git a/src/styles/docs/docs.css b/src/styles/docs/docs.css
index e0e4a1e..cad2f73 100644
--- a/src/styles/docs/docs.css
+++ b/src/styles/docs/docs.css
@@ -20,8 +20,10 @@
   flex-direction: row;
 }
 
-.dim-content .docslayout-root {
+.dim-content-toc .docslayout-root,
+.dim-content-nav .docslayout-root {
   filter: brightness(50%);
+  pointer-events: none;
 }
 
 .docs-content {