Visually hide content when a drawer is opened

ratulb · Feb 19, 2024 · 214f6e3 · 214f6e3
1 parent 723327d
commit 214f6e3
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 2 deletions.
diff --git a/examples/book-ssr/src/app.rs b/examples/book-ssr/src/app.rs
@@ -207,17 +207,26 @@ pub fn Layout(#[prop(optional)] children: Option<Children>) -> impl IntoView {
     let is_small = use_media_query("(max-width: 800px)");
 
     let router_context = use_context::<RouterContext>();
+
     let is_doc = create_memo(move |_| {
         router_context
             .as_ref()
             .map(|router| router.pathname().get().starts_with("/doc"))
             .unwrap_or(false)
     });
 
+
     // The main drawer is only used on mobile / small screens!.
     let (main_drawer_closed, set_main_drawer_closed) = create_signal(true);
     let (doc_drawer_closed, set_doc_drawer_closed) = create_signal(false);
 
+    // Make sure the doc_drawer is closed whenever we leave a documentation route.
+    create_effect(move |_| {
+        if !is_doc.get() {
+            set_doc_drawer_closed.set(true);
+        }
+    });
+
     // Always close the doc-drawer when the application is now small.
     // Always open the doc-drawer when the application is no longer small.
     create_effect(move |_| {
@@ -356,7 +365,11 @@ pub fn Layout(#[prop(optional)] children: Option<Children>) -> impl IntoView {
             </div>
         </AppBar>
 
-        <Box id="content" style=format!("height: calc(var(--leptonic-vh, 100vh) - {APP_BAR_HEIGHT}); max-height: calc(var(--leptonic-vh, 100vh) - {APP_BAR_HEIGHT});")>
+        <Box 
+            id="content" 
+            attr:aria-hidden=move || { ((is_doc.get() && !doc_drawer_closed.get()) || !main_drawer_closed.get()).to_string() }
+            style=format!("height: calc(var(--leptonic-vh, 100vh) - {APP_BAR_HEIGHT}); max-height: calc(var(--leptonic-vh, 100vh) - {APP_BAR_HEIGHT});")
+        >
             {
                 match children {
                     Some(children) => {

diff --git a/examples/book-ssr/style/main.scss b/examples/book-ssr/style/main.scss
@@ -82,6 +82,27 @@ body {
     width: 100%;
     padding: 0;
     overflow-y: auto;
+
+    &::before {
+        content: "";
+        display: block;
+        z-index: 99;
+        pointer-events: none;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        opacity: 0;
+        transition: opacity 0.2s ease-in-out;
+        background-color: #0009;
+    }
+
+    &[aria-hidden="true"] {
+        &::before {
+            opacity: 1;
+        }
+    }
 }
 
 #main-drawer {
@@ -207,6 +228,10 @@ body {
     }
 }
 
+leptonic-quicksearch-result {
+    border-radius: 0.25em;
+}
+
 .search-link {
     width: 100%;
     height: 100%;
@@ -216,7 +241,7 @@ body {
         height: 100%;
         display: flex;
         justify-content: flex-start;
-        padding: 1em;
+        padding: .75em;
     }
 }