NiekRabelink/jouwdriedee
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add whitespace-nowrap and strict shrink-0 to admin nav items to prevent any text wrapping or overlap

Browse Source
This commit is contained in:
Niek Rabelink
2026-11-02 12:44:08 +01:00
parent 07258420af
commit 3ddcf1d238
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/layouts/admin.blade.php
+7 -7
View File
@@ -35,7 +35,7 @@
<div class="flex items-center space-x-3 shrink-0">
<a href="{{ route('admin.content.index') }}" class="flex items-center space-x-2 shrink-0 group">
<img src="/images/logo.svg" alt="Jouwdriedee.nl" class="h-6 w-auto shrink-0">
<span class="px-2 py-0.5 rounded-md bg-slate-100 text-slate-600 font-semibold text-[10px] tracking-wider uppercase shrink-0">Studio CMS</span>
<span class="px-2 py-0.5 rounded-md bg-slate-100 text-slate-600 font-semibold text-[10px] tracking-wider uppercase shrink-0 whitespace-nowrap">Studio CMS</span>
</a>
</div>
@@ -65,17 +65,17 @@
<nav class="hidden lg:flex items-center space-x-1.5 text-xs font-medium">
<!-- 1. Layout & Teksten -->
<a href="{{ route('admin.content.index') }}" class="px-3 py-1.5 rounded-lg transition flex items-center space-x-1.5 {{ request()->routeIs('admin.content.*') ? 'bg-slate-900 text-white font-semibold shadow-2xs' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100' }}">
<a href="{{ route('admin.content.index') }}" class="px-3 py-1.5 rounded-lg transition flex items-center space-x-1.5 whitespace-nowrap {{ request()->routeIs('admin.content.*') ? 'bg-slate-900 text-white font-semibold shadow-2xs' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100' }}">
<i data-lucide="palette" class="w-3.5 h-3.5"></i>
<span>Layout & Teksten</span>
</a>
<!-- 2. Assortiment (Grouped Dropdown) -->
<div class="relative" @click.outside="catalogOpen = false">
<div class="relative shrink-0" @click.outside="catalogOpen = false">
<button
type="button"
@click="catalogOpen = !catalogOpen; relationsOpen = false"
class="px-3 py-1.5 rounded-lg transition flex items-center space-x-1.5 cursor-pointer {{ $isCatalogActive ? 'bg-slate-900 text-white font-semibold shadow-2xs' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100' }}"
class="px-3 py-1.5 rounded-lg transition flex items-center space-x-1.5 cursor-pointer whitespace-nowrap {{ $isCatalogActive ? 'bg-slate-900 text-white font-semibold shadow-2xs' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100' }}"
>
<i data-lucide="box" class="w-3.5 h-3.5"></i>
<span>Assortiment</span>
@@ -145,17 +145,17 @@
</div>
<!-- 3. Bestellingen (Direct Link) -->
<a href="{{ route('admin.orders.index') }}" class="px-3 py-1.5 rounded-lg transition flex items-center space-x-1.5 {{ request()->routeIs('admin.orders.*') ? 'bg-slate-900 text-white font-semibold shadow-2xs' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100' }}">
<a href="{{ route('admin.orders.index') }}" class="px-3 py-1.5 rounded-lg transition flex items-center space-x-1.5 whitespace-nowrap {{ request()->routeIs('admin.orders.*') ? 'bg-slate-900 text-white font-semibold shadow-2xs' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100' }}">
<i data-lucide="shopping-cart" class="w-3.5 h-3.5"></i>
<span>Bestellingen</span>
</a>
<!-- 4. Klanten & Communicatie (Grouped Dropdown) -->
<div class="relative" @click.outside="relationsOpen = false">
<div class="relative shrink-0" @click.outside="relationsOpen = false">
<button
type="button"
@click="relationsOpen = !relationsOpen; catalogOpen = false"
class="px-3 py-1.5 rounded-lg transition flex items-center space-x-1.5 cursor-pointer {{ $isRelationsActive ? 'bg-slate-900 text-white font-semibold shadow-2xs' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100' }}"
class="px-3 py-1.5 rounded-lg transition flex items-center space-x-1.5 cursor-pointer whitespace-nowrap {{ $isRelationsActive ? 'bg-slate-900 text-white font-semibold shadow-2xs' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100' }}"
>
<i data-lucide="users" class="w-3.5 h-3.5"></i>
<span>Klanten & Communicatie</span>