dave/coolify
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Give more space to navbar

Browse Source 
Especially in full width and mobile view, the navbar looked cramped
because there was very little padding to the left end of the screen.
This commit adds horizontal padding to the navbar
and increases its width from 48 to 56 tailwind units.
This commit is contained in:
Tim Koch
2024-10-27 12:24:34 +01:00
parent a35e2f427b
commit f073d01a5f
2 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
<nav class="flex flex-col flex-1 bg-white border-r dark:border-coolgray-200 dark:bg-base" x-data="{ <nav class="flex flex-col flex-1 px-2 bg-white border-r dark:border-coolgray-200 dark:bg-base" x-data="{
switchWidth() { switchWidth() {
if (this.full === 'full') { if (this.full === 'full') {
localStorage.setItem('pageWidth', 'center'); localStorage.setItem('pageWidth', 'center');

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

@@ -18,7 +18,7 @@
<div class="relative z-50 lg:hidden" :class="open ? 'block' : 'hidden'" role="dialog" aria-modal="true"> <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 bg-black/80"></div>
<div class="fixed inset-0 flex"> <div class="fixed inset-0 flex">
<div class="relative flex flex-1 w-full mr-16 max-w-48 "> <div class="relative flex flex-1 w-full mr-16 max-w-56 ">
<div class="absolute top-0 flex justify-center w-16 pt-5 left-full"> <div class="absolute top-0 flex justify-center w-16 pt-5 left-full">
<button type="button" class="-m-2.5 p-2.5" x-on:click="open = !open"> <button type="button" class="-m-2.5 p-2.5" x-on:click="open = !open">
<span class="sr-only">Close sidebar</span> <span class="sr-only">Close sidebar</span>
@@ -29,14 +29,14 @@
</button> </button>
</div> </div>
<div class="flex flex-col pb-2 overflow-y-auto min-w-48 dark:bg-coolgray-100 gap-y-5 scrollbar"> <div class="flex flex-col pb-2 overflow-y-auto min-w-56 dark:bg-coolgray-100 gap-y-5 scrollbar">
<x-navbar /> <x-navbar />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-48 lg:flex-col"> <div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-56 lg:flex-col">
<div class="flex flex-col overflow-y-auto grow gap-y-5 scrollbar"> <div class="flex flex-col overflow-y-auto grow gap-y-5 scrollbar">
<x-navbar /> <x-navbar />
</div> </div>
@@ -52,7 +52,7 @@
</button> </button>
</div> </div>
<main class="lg:pl-48"> <main class="lg:pl-56">
<div class="p-4 sm:px-6 lg:px-8 lg:py-6"> <div class="p-4 sm:px-6 lg:px-8 lg:py-6">
{{ $slot }} {{ $slot }}
</div> </div>