feat(mobile): implement dismiss region of sidebar

src/public/app/layouts/mobile_layout.js

@@ -127,9 +127,13 @@ export default class MobileLayout {
                     .css('padding-left', "0")
                     .css('padding-right', "0")
                     .css('contain', 'content')
-                    .child(new QuickSearchWidget())
-                    .child(new NoteTreeWidget()
-                        .cssBlock(FANCYTREE_CSS)))
+                    .child(new FlexContainer("column")
+                        .filling()
+                        .id("mobile-sidebar-wrapper")
+                        .child(new QuickSearchWidget())
+                        .child(new NoteTreeWidget()
+                            .cssBlock(FANCYTREE_CSS))
+                    ))
                 .child(new ScreenContainer("detail", "column")
                     .class("d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-7 col-md-8 col-lg-9")
                     .css("padding-left", "0")

src/public/app/widgets/mobile_widgets/screen_container.js

@@ -8,11 +8,6 @@ export default class ScreenContainer extends FlexContainer {
     }
 
     activeScreenChangedEvent({activeScreen}) {
-        if (activeScreen === this.screenName) {
-            this.$widget.removeClass('d-none');
-        }
-        else {
-            this.$widget.addClass('d-none');
-        }
+
     }
 }

src/public/app/widgets/mobile_widgets/sidebar_container.js

@@ -8,6 +8,14 @@ export default class SidebarContainer extends FlexContainer {
         this.screenName = screenName;
     }
 
+    doRender() {
+        super.doRender();
+
+        this.$widget.on("click", () => {
+            this.triggerEvent('activeScreenChanged', "detail");
+        });
+    }
+
     activeScreenChangedEvent({activeScreen}) {
         if (activeScreen === this.screenName) {
             this.$widget.addClass('show');

src/public/stylesheets/style.css

@@ -1176,14 +1176,18 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
 #mobile-sidebar-container {
     position: absolute;
     top: 0;
-    left: 0;
-    right: 0;
+    left: 0;    
     bottom: var(--launcher-pane-size);
     padding-top: env(safe-area-inset-top);
-    z-index: 100;
-    background: var(--main-background-color);
+    z-index: 100;    
     transform: translateX(-100%);
     transition: transform 250ms ease-in-out;
+    backdrop-filter: blur(20px);
+}
+
+#mobile-sidebar-wrapper {
+    width: 85vw;
+    background: var(--main-background-color);
 }
 
 #mobile-sidebar-container.show {