In small screen the submenu is moved up, under the navbar-main

This commit is contained in:
Francesco Bruno 2024-05-05 15:23:25 +00:00
parent 0cddce7a37
commit 6102e441d6
6 changed files with 15 additions and 15 deletions

View File

@ -157,7 +157,7 @@ .menu {
}
.menu-item {
@apply flex items-center w-full gap-3 py-1 pl-2 dark:hover:bg-coolgray-100 dark:hover:text-white hover:bg-neutral-300;
@apply flex items-center w-full gap-3 py-1 px-2 sm:pr-0 dark:hover:bg-coolgray-100 dark:hover:text-white hover:bg-neutral-300;
}
.menu-item-active {

View File

@ -2,8 +2,8 @@
<h1>Configuration</h1>
<livewire:project.shared.configuration-checker :resource="$application" />
<livewire:project.application.heading :application="$application" />
<div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex h-full pt-6">
<div class="flex flex-col gap-2 xl:w-48">
<div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex h-full pt-6 sm:flex-row flex-col gap-8">
<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>
@if ($application->destination->server->isSwarm())
@ -78,7 +78,7 @@
@click.prevent="activeTab = 'danger'; window.location.hash = 'danger'" href="#">Danger Zone
</a>
</div>
<div class="w-full pl-8">
<div class="w-full">
<div x-cloak x-show="activeTab === 'general'" class="h-full">
<livewire:project.application.general :application="$application" />
</div>

View File

@ -2,8 +2,8 @@
<h1>Configuration</h1>
<livewire:project.shared.configuration-checker :resource="$database" />
<livewire:project.database.heading :database="$database" />
<div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex h-full pt-6">
<div class="flex flex-col gap-4 min-w-fit">
<div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }" class="flex h-full pt-6 sm:flex-row flex-col gap-8">
<div class="flex sm:flex-col gap-2 xl:w-48 overflow-x-scroll">
<a :class="activeTab === 'general' && 'dark:text-white'"
@click.prevent="activeTab = 'general';
window.location.hash = 'general'"
@ -48,7 +48,7 @@
href="#">Danger Zone
</a>
</div>
<div class="w-full pl-8">
<div class="w-full">
<div x-cloak x-show="activeTab === 'general'" class="h-full">
@if ($database->type() === 'standalone-postgresql')
<livewire:project.database.postgresql.general :database="$database" />

View File

@ -1,6 +1,6 @@
<div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'service-stack' }" x-init="$wire.check_status" wire:poll.5000ms="check_status">
<livewire:project.service.navbar :service="$service" :parameters="$parameters" :query="$query" />
<div class="flex h-full pt-6">
<div class="flex h-full pt-6 sm:flex-row flex-col gap-8">
<div class="flex flex-col items-start gap-4 min-w-fit">
<a target="_blank" href="{{ $service->documentation() }}">Documentation <x-external-link /></a>
<a :class="activeTab === 'service-stack' && 'dark:text-white'"
@ -39,7 +39,7 @@
href="#">Danger Zone
</a>
</div>
<div class="w-full pl-8">
<div class="w-full">
<div x-cloak x-show="activeTab === 'service-stack'">
<livewire:project.service.stack-form :service="$service" />
<h3>Services</h3>

View File

@ -1,7 +1,7 @@
<div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }">
<livewire:project.service.navbar :service="$service" :parameters="$parameters" :query="$query" />
<div class="flex h-full pt-6">
<div class="flex flex-col gap-4 min-w-fit">
<div class="flex h-full pt-6 sm:flex-row flex-col gap-8">
<div class="flex sm:flex-col gap-2 xl:w-48 overflow-x-scroll">
<a class="{{ request()->routeIs('project.service.configuration') ? 'dark:text-white' : '' }}"
href="{{ route('project.service.configuration', [...$parameters, 'stack_service_uuid' => null]) }}">
<button><- Back</button>
@ -24,7 +24,7 @@
@click.prevent="activeTab = 'backups'; window.location.hash = 'backups'" href="#">Backups</a>
@endif
</div>
<div class="w-full pl-8">
<div class="w-full">
@isset($serviceApplication)
<div x-cloak x-show="activeTab === 'general'" class="h-full">
<livewire:project.service.service-application-view :application="$serviceApplication" />

View File

@ -1,13 +1,13 @@
<div>
<x-server.navbar :server="$server" :parameters="$parameters" />
<div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'managed' }" class="flex h-full">
<div class="flex flex-col gap-4">
<div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'managed' }" class="flex h-full flex-col md:flex-row gap-8">
<div class="flex md:flex-col gap-4 flex-row">
<a :class="activeTab === 'managed' && 'dark:text-white'"
@click.prevent="activeTab = 'managed'; window.location.hash = 'managed'" href="#">Managed</a>
<a :class="activeTab === 'unmanaged' && 'dark:text-white'"
@click.prevent="activeTab = 'unmanaged'; window.location.hash = 'unmanaged'" href="#">Unmanaged</a>
</div>
<div class="w-full pl-8">
<div class="w-full">
<div x-cloak x-show="activeTab === 'managed'" class="h-full">
<div class="flex flex-col">
<div class="flex gap-2">