Shiloh/lasthourcloud
Shiloh/lasthourcloud
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

feat: change page width

Browse Source
This commit is contained in:
Andras Bacsai 2024-03-27 12:45:53 +01:00
parent 58b451f616
commit 3fca169096
2 changed files with 21 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
resources/views/components/navbar.blade.php
View File

@ -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 />

9
resources/views/layouts/app.blade.php
View File

@ -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>