From 4c8645735afa277c12c4f71464ac2965a3ac5e90 Mon Sep 17 00:00:00 2001
From: Philipp <philipp.siekmann@flipapp.de>
Date: Mon, 16 Dec 2024 15:11:02 +0100
Subject: [PATCH] Allow to change the initial mobile view of swirl-app-layout
 (#892)

---
 .changeset/fluffy-donuts-switch.md                |  7 +++++++
 packages/swirl-components/src/components.d.ts     |  2 ++
 .../swirl-app-layout/swirl-app-layout.tsx         |  5 +++++
 packages/swirl-components/vscode-data.json        | 15 +++++++++++++++
 4 files changed, 29 insertions(+)
 create mode 100644 .changeset/fluffy-donuts-switch.md

diff --git a/.changeset/fluffy-donuts-switch.md b/.changeset/fluffy-donuts-switch.md
new file mode 100644
index 000000000..29f68d0aa
--- /dev/null
+++ b/.changeset/fluffy-donuts-switch.md
@@ -0,0 +1,7 @@
+---
+"@getflip/swirl-components": minor
+"@getflip/swirl-components-angular": minor
+"@getflip/swirl-components-react": minor
+---
+
+Add "initial-mobile-view" prop to swirl-app-layout
diff --git a/packages/swirl-components/src/components.d.ts b/packages/swirl-components/src/components.d.ts
index bf68c31a2..39e39d77d 100644
--- a/packages/swirl-components/src/components.d.ts
+++ b/packages/swirl-components/src/components.d.ts
@@ -226,6 +226,7 @@ export namespace Components {
           * Hide the sidebar
          */
         "hideSidebar": () => Promise<void>;
+        "initialMobileView"?: SwirlAppLayoutMobileView;
         "navigationBackButtonLabel"?: string;
         "navigationExpansionStateStorageKey"?: string;
         "navigationLabel"?: string;
@@ -5875,6 +5876,7 @@ declare namespace LocalJSX {
         "ctaLabel"?: string;
         "hasNavigation"?: boolean;
         "hideAppBar"?: boolean;
+        "initialMobileView"?: SwirlAppLayoutMobileView;
         "navigationBackButtonLabel"?: string;
         "navigationExpansionStateStorageKey"?: string;
         "navigationLabel"?: string;
diff --git a/packages/swirl-components/src/components/swirl-app-layout/swirl-app-layout.tsx b/packages/swirl-components/src/components/swirl-app-layout/swirl-app-layout.tsx
index 6704f6a8e..9c643ff26 100644
--- a/packages/swirl-components/src/components/swirl-app-layout/swirl-app-layout.tsx
+++ b/packages/swirl-components/src/components/swirl-app-layout/swirl-app-layout.tsx
@@ -60,6 +60,7 @@ export class SwirlAppLayout {
   @Prop() ctaLabel?: string;
   @Prop({ mutable: true }) hasNavigation: boolean;
   @Prop() hideAppBar?: boolean;
+  @Prop() initialMobileView?: SwirlAppLayoutMobileView;
   @Prop() navigationBackButtonLabel?: string = "Go back";
   @Prop() navigationExpansionStateStorageKey?: string =
     SWIRL_APP_LAYOUT_NAV_EXPANSION_STATE_STORAGE_KEY;
@@ -114,6 +115,10 @@ export class SwirlAppLayout {
   private transitionTimeout: NodeJS.Timeout;
 
   componentWillLoad() {
+    if (this.initialMobileView) {
+      this.mobileView = this.initialMobileView;
+    }
+
     this.mutationObserver = new MutationObserver(() => {
       this.updateCustomAppBarBackButtonStatus();
       this.updateNavigationStatus();
diff --git a/packages/swirl-components/vscode-data.json b/packages/swirl-components/vscode-data.json
index 0faac7973..0811c196d 100644
--- a/packages/swirl-components/vscode-data.json
+++ b/packages/swirl-components/vscode-data.json
@@ -295,6 +295,21 @@
           "name": "hide-app-bar",
           "description": ""
         },
+        {
+          "name": "initial-mobile-view",
+          "description": "",
+          "values": [
+            {
+              "name": "body"
+            },
+            {
+              "name": "navigation"
+            },
+            {
+              "name": "sidebar"
+            }
+          ]
+        },
         {
           "name": "navigation-back-button-label",
           "description": ""