From 3fca169096e488063a9de04eddc094e7c3451be3 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Wed, 27 Mar 2024 12:45:53 +0100
Subject: [PATCH] feat: change page width

---
 resources/views/components/navbar.blade.php | 16 ++++++++++++++--
 resources/views/layouts/app.blade.php       |  9 +++++++--
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php
index 07f0e885e..aae13b4c8 100644
--- a/resources/views/components/navbar.blade.php
+++ b/resources/views/components/navbar.blade.php
@@ -1,5 +1,14 @@
 <nav class="flex flex-col flex-1 pl-2 bg-white border-r dark:border-coolgray-200 dark:bg-base" x-data="{
-    init() {
+    switchWidth() {
+            if (this.full === 'full') {
+                localStorage.removeItem('pageWidth');
+            } else {
+                localStorage.setItem('pageWidth', 'full');
+            }
+            window.location.reload();
+        },
+        init() {
+            this.full = localStorage.getItem('pageWidth');
             window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
                 const userSettings = localStorage.getItem('theme');
                 if (userSettings !== 'system') {
@@ -60,13 +69,16 @@
                     </div>
                 </x-slot:title>
                 <div class="flex flex-col gap-1">
+                    <div class="mb-1 font-bold border-b dark:border-coolgray-500 dark:text-white text-md">Color</div>
                     <button @click="setTheme('dark')" class="px-1 dropdown-item-no-padding">Dark</button>
                     <button @click="setTheme('light')" class="px-1 dropdown-item-no-padding">Light</button>
                     <button @click="setTheme('system')" class="px-1 dropdown-item-no-padding">System</button>
+                    <div class="my-1 font-bold border-b dark:border-coolgray-500 dark:text-white text-md">Width</div>
+                    <button @click="switchWidth()" class="px-1 dropdown-item-no-padding" x-show="full">Center</button>
+                    <button @click="switchWidth()" class="px-1 dropdown-item-no-padding" x-show="!full">Full</button>
                 </div>
             </x-dropdown>
         </div>
-
     </div>
     <div class="px-2 pt-2 pb-7">
         <livewire:switch-team />
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 744f33739..caed5ff3a 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -5,7 +5,12 @@
         <livewire:layout-popups />
     @endif
     @auth
-        <div x-data="{ open: false }" x-cloak class="mx-auto max-w-7xl">
+        <div x-data="{
+            open: false,
+            init() {
+                this.pageWidth = localStorage.getItem('pageWidth');
+            }
+        }" x-cloak class="mx-auto" :class="pageWidth === 'full' ? '' : 'max-w-7xl'">
             <div class="relative z-50 lg:hidden" :class="open ? 'block' : 'hidden'" role="dialog" aria-modal="true">
                 <div class="fixed inset-0 bg-black/80"></div>
                 <div class="fixed inset-0 flex">
@@ -50,7 +55,7 @@
                 </a> --}}
             </div>
 
-            <main class="lg:pl-48" >
+            <main class="lg:pl-48">
                 <div class="p-4 sm:px-6 lg:px-8 lg:py-6">
                     {{ $slot }}
                 </div>