feat(mobile): implement simple slide effect for tree

src/public/app/layouts/mobile_layout.js

@@ -25,6 +25,7 @@ import SharedInfoWidget from "../widgets/shared_info.js";
 import PromotedAttributesWidget from "../widgets/ribbon_widgets/promoted_attributes.js";
 import ClassicEditorToolbar from "../widgets/ribbon_widgets/classic_editor_toolbar.js";
 import options from "../services/options.js";
+import SidebarContainer from "../widgets/mobile_widgets/sidebar_container.js";
 
 const MOBILE_CSS = `
 <style>
@@ -119,8 +120,9 @@ export default class MobileLayout {
             .cssBlock(MOBILE_CSS)
             .child(new FlexContainer("row")
                 .filling()
-                .child(new ScreenContainer("tree", 'column')
+                .child(new SidebarContainer("tree", 'column')
                     .class("d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-5 col-md-4 col-lg-3 col-xl-3")
+                    .id("mobile-sidebar-container")
                     .css("max-height", "100%")
                     .css('padding-left', "0")
                     .css('padding-right', "0")

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

@@ -0,0 +1,19 @@
+import FlexContainer from "../containers/flex_container.js";
+
+export default class SidebarContainer extends FlexContainer {
+
+    constructor(screenName, direction) {
+        super(direction);
+
+        this.screenName = screenName;
+    }
+
+    activeScreenChangedEvent({activeScreen}) {
+        if (activeScreen === this.screenName) {
+            this.$widget.addClass('show');
+        } else {
+            this.$widget.removeClass('show');
+        }
+    }
+
+}

src/public/stylesheets/style.css

@@ -1173,6 +1173,23 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
     background-color: var(--left-pane-background-color);
 }
 
+#mobile-sidebar-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: var(--launcher-pane-size);
+    padding-top: env(safe-area-inset-top);
+    z-index: 100;
+    background: var(--main-background-color);
+    transform: translateX(-100%);
+    transition: transform 250ms ease-in-out;
+}
+
+#mobile-sidebar-container.show {
+    transform: translateX(0);
+}
+
 #launcher-pane {
     color: var(--launcher-pane-text-color);
     background-color: var(--launcher-pane-background-color);