Adjust layout on resize and preserve side panels state

Author: brufdev

resources/views/components/vault/fileDetails.blade.php

@@ -40,7 +40,7 @@ class="flex flex-grow p-0 px-1 text-lg font-semibold bg-transparent border-0 foc
                     </div>
                     <button
                         title="{{ __('Toggle content width') }}"
-                        x-show="window.innerWidth > 768"
+                        x-show="showToggleContentWidthButton"
                         @click="toggleContentWidth"
                     >
                         <x-icons.arrowsExpandHorizontal class="w-5 h-5" />

resources/views/livewire/vault/show.blade.php

@@ -52,7 +52,7 @@ class="fixed inset-0 z-40 opacity-50 bg-light-base-50 dark:bg-base-900"
 
         <div
             class="fixed inset-0 z-20 opacity-50 bg-light-base-50 dark:bg-base-900"
-            x-show="(isLeftPanelOpen || isRightPanelOpen) && isSmallDevice()"
+            x-show="(isLeftPanelOpen || isRightPanelOpen) && isNotExtraLargeDevice()"
             @click="closePanels"
             x-transition:enter="ease-out duration-300"
             x-transition:leave="ease-in duration-200"
@@ -260,9 +260,12 @@ class="text-primary-400 dark:text-primary-500 hover:text-primary-300 dark:hover:
 @script
     <script>
         Alpine.data('vault', () => ({
+            defaultLeftPanelOpen: Alpine.$persist(true),
+            defaultRightPanelOpen: Alpine.$persist(true),
             isLeftPanelOpen: false,
             isRightPanelOpen: false,
             isContentWidthFull: Alpine.$persist(false),
+            showToggleContentWidthButton: false,
             recentFiles: $wire.entangle('recentFiles'),
             isEditingMarkdown: Alpine.$persist(false),
             isEditMode: Alpine.$persist(true),
@@ -291,8 +294,8 @@ class="text-primary-400 dark:text-primary-500 hover:text-primary-300 dark:hover:
                     });
                 }
 
-                this.isLeftPanelOpen = !this.isSmallDevice();
-                this.isRightPanelOpen = !this.isSmallDevice();
+                this.handleResponsiveLayout();
+                window.onresize = () => this.handleResponsiveLayout();
 
                 Echo.private('User.{{ auth()->user()->id }}')
                     .listen('CollaborationDeletedEvent', (e) => {
@@ -322,15 +325,38 @@ class="text-primary-400 dark:text-primary-500 hover:text-primary-300 dark:hover:
                 });
             },
 
-            isSmallDevice() {
+            isMediumDevice() {
+                return window.innerWidth > 768;
+            },
+
+            isNotExtraLargeDevice() {
                 return window.innerWidth < 1280;
             },
 
+            handleResponsiveLayout() {
+                if (this.isNotExtraLargeDevice()) {
+                    this.closePanels();
+                } else {
+                    this.isLeftPanelOpen = this.defaultLeftPanelOpen;
+                    this.isRightPanelOpen = this.defaultRightPanelOpen;
+                }
+
+                this.showToggleContentWidthButton = this.isMediumDevice();
+            },
+
             toggleLeftPanel() {
+                if (!this.isNotExtraLargeDevice()) {
+                    this.defaultLeftPanelOpen = !this.defaultLeftPanelOpen;
+                }
+
                 this.isLeftPanelOpen = !this.isLeftPanelOpen;
             },
 
             toggleRightPanel() {
+                if (!this.isNotExtraLargeDevice()) {
+                    this.defaultRightPanelOpen = !this.defaultRightPanelOpen;
+                }
+
                 this.isRightPanelOpen = !this.isRightPanelOpen;
             },
 
@@ -366,7 +392,7 @@ class="text-primary-400 dark:text-primary-500 hover:text-primary-300 dark:hover:
 
                 $wire.openFileId(fileId, autofocus);
 
-                if (this.isSmallDevice()) {
+                if (this.isNotExtraLargeDevice()) {
                     this.closePanels();
                 }
             },