Refactor settings page layout for better responsiveness
This commit is contained in:
parent
99c7e417d6
commit
3235907266
@ -1,18 +1,19 @@
|
||||
<div>
|
||||
<x-settings.navbar />
|
||||
<div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex h-full pt-1">
|
||||
<div class="flex flex-col gap-4 min-w-fit">
|
||||
<a :class="activeTab === 'general' && 'dark:text-white'"
|
||||
<div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex h-full pt-1 gap-8 sm:flex-row flex-col">
|
||||
<div class="flex sm:flex-col gap-2 xl:w-48 overflow-x-scroll">
|
||||
<a class="menu-item" :class="activeTab === 'general' && 'menu-item-active'"
|
||||
@click.prevent="activeTab = 'general'; window.location.hash = 'general'" href="#">General</a>
|
||||
<a :class="activeTab === 'backup' && 'dark:text-white'"
|
||||
<a class="menu-item" :class="activeTab === 'backup' && 'menu-item-active'"
|
||||
@click.prevent="activeTab = 'backup'; window.location.hash = 'backup'" href="#">Instance Backup</a>
|
||||
<a :class="activeTab === 'smtp' && 'dark:text-white'"
|
||||
<a class="menu-item" :class="activeTab === 'smtp' && 'menu-item-active'"
|
||||
@click.prevent="activeTab = 'smtp'; window.location.hash = 'smtp'" href="#">Transactional
|
||||
Email</a>
|
||||
<a :class="activeTab === 'auth' && 'dark:text-white'"
|
||||
@click.prevent="activeTab = 'auth'; window.location.hash = 'auth'" href="#">Authentication (OAuth)</a>
|
||||
<a class="menu-item" :class="activeTab === 'auth' && 'menu-item-active'"
|
||||
@click.prevent="activeTab = 'auth'; window.location.hash = 'auth'" href="#">Authentication
|
||||
(OAuth)</a>
|
||||
</div>
|
||||
<div class="w-full pl-8">
|
||||
<div class="w-full">
|
||||
<div x-cloak x-show="activeTab === 'general'" class="h-full">
|
||||
<livewire:settings.configuration :settings="$settings" />
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user