Enhance board and planner UI; implement smooth width transitions, update icons, and improve layout responsiveness

This commit is contained in:
2026-09-09 21:19:57 +02:00
parent d83704d0df
commit 1aad7f5d7f
3 changed files with 86 additions and 18 deletions
+4 -7
View File
@@ -174,16 +174,13 @@ require_once __DIR__ . '/env_badge.php';
</button>
<div class="absolute left-0 top-full pt-2 w-64 hidden group-hover/projects:block z-50 animate-in fade-in zoom-in-95 duration-150">
<div class="bg-white dark:bg-[#111624] border border-slate-200 dark:border-slate-800 rounded-2xl shadow-xl p-2 space-y-1 backdrop-blur-md">
<!-- 1. Bord (Trello / Kanban) -->
<!-- 1. Bord (Kanban) -->
<a href="/board.php" class="flex items-start space-x-3 p-2.5 rounded-xl transition <?= $currentPage === 'board.php' ? 'bg-indigo-50 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300' : 'text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800/70' ?>">
<div class="w-8 h-8 rounded-lg bg-indigo-100 dark:bg-indigo-500/20 text-indigo-600 dark:text-indigo-400 flex items-center justify-center flex-shrink-0 mt-0.5">
<i data-lucide="trello" class="w-4 h-4"></i>
<i data-lucide="kanban" class="w-4 h-4"></i>
</div>
<div>
<div class="text-xs font-bold leading-tight flex items-center gap-1.5">
<span>Bord</span>
<span class="text-[9px] font-bold px-1.5 py-0.5 rounded bg-indigo-100 text-indigo-700 dark:bg-indigo-900/60 dark:text-indigo-300">Nieuw</span>
</div>
<div class="text-xs font-bold leading-tight">Bord</div>
<div class="text-[11px] text-slate-500 dark:text-slate-400 leading-snug">Lanes, post-its & Outlook planning</div>
</div>
</a>
@@ -264,7 +261,7 @@ require_once __DIR__ . '/env_badge.php';
<span>Planning</span>
</a>
<a href="/board.php" class="flex flex-col items-center py-1 <?= $currentPage === 'board.php' ? 'text-indigo-600 dark:text-indigo-400 font-bold' : 'text-slate-500 dark:text-slate-400' ?>">
<i data-lucide="trello" class="w-4 h-4 mb-0.5"></i>
<i data-lucide="kanban" class="w-4 h-4 mb-0.5"></i>
<span>Bord</span>
</a>
<a href="/brainstorm.php" class="flex flex-col items-center py-1 <?= in_array($currentPage, ['brainstorm.php', 'brainstorm_canvas.php']) ? 'text-indigo-600 dark:text-indigo-400 font-bold' : 'text-slate-500 dark:text-slate-400' ?>">