From 61ccee27f232693b8927591ba7450c79c6b4797f Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 28 Dec 2024 13:46:08 +0200
Subject: [PATCH] feat(mobile): implement simple slide effect for tree

---
 src/public/app/layouts/mobile_layout.js       |  4 +++-
 .../mobile_widgets/sidebar_container.js       | 19 +++++++++++++++++++
 src/public/stylesheets/style.css              | 17 +++++++++++++++++
 3 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 src/public/app/widgets/mobile_widgets/sidebar_container.js

diff --git a/src/public/app/layouts/mobile_layout.js b/src/public/app/layouts/mobile_layout.js
index bfcd87364..6307448ed 100644
--- a/src/public/app/layouts/mobile_layout.js
+++ b/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")
diff --git a/src/public/app/widgets/mobile_widgets/sidebar_container.js b/src/public/app/widgets/mobile_widgets/sidebar_container.js
new file mode 100644
index 000000000..f37753da4
--- /dev/null
+++ b/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');
+        }
+    }
+
+}
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index 7fd7dfa85..c0662cb0d 100644
--- a/src/public/stylesheets/style.css
+++ b/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);