cat/Kanban
Private
Public Access
1
0
Fork 0
Code Activity

Rearrange nav: logo left, search centered, nav items right

Browse Source 
Use a 3-column CSS grid on desktop (auto | 1fr | auto) so the search
bar stays centered in the viewport while logo and nav items pin to
the edges. Mobile layout unchanged (logo left, hamburger right).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Catherine Renelle
2026-02-27 14:39:39 -05:00
parent ce5310e7a0
commit ecd037ce5c
1 changed files with 31 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/+layout.svelte
+31 -11
View File
@@ -26,8 +26,10 @@
<div class="min-h-screen layout-page-bg">
<nav class="shadow-sm layout-nav-bg">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="flex h-14 items-center justify-between">
<div class="px-4 sm:px-6 lg:px-8">
<!-- Desktop: 3-column grid (logo | search | nav) -->
<div class="hidden sm:grid sm:grid-cols-[auto_1fr_auto] h-14 items-center gap-4">
<!-- Left: Logo -->
<a href="/" class="flex items-center gap-2 text-white font-bold text-lg">
{#if data.tenant?.logoUrl}
<img src={data.tenant.logoUrl} alt="" class="h-7 w-auto" />
@@ -42,14 +44,17 @@
{data.tenant?.logoText ?? data.tenant?.name ?? 'Pounce'}
</a>
{#if data.user}
<div class="hidden sm:block">
<SearchBar />
</div>
{/if}
<!-- Center: Search -->
<div class="flex justify-center">
{#if data.user}
<div class="w-full max-w-md">
<SearchBar />
</div>
{/if}
</div>
<!-- Desktop nav -->
<div class="hidden sm:flex items-center gap-3">
<!-- Right: Nav items -->
<div class="flex items-center gap-3">
{#if data.user}
<a
href="/my-work"
@@ -120,9 +125,24 @@
</a>
{/if}
</div>
</div>
<!-- Mobile hamburger -->
<div class="flex items-center gap-2 sm:hidden">
<!-- Mobile header -->
<div class="flex h-14 items-center justify-between sm:hidden">
<a href="/" class="flex items-center gap-2 text-white font-bold text-lg">
{#if data.tenant?.logoUrl}
<img src={data.tenant.logoUrl} alt="" class="h-7 w-auto" />
{:else}
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="currentColor">
<circle cx="7" cy="5" r="2.2" />
<circle cx="12" cy="3.5" r="2.2" />
<circle cx="17" cy="5" r="2.2" />
<ellipse cx="12" cy="14" rx="6" ry="7" />
</svg>
{/if}
{data.tenant?.logoText ?? data.tenant?.name ?? 'Pounce'}
</a>
<div class="flex items-center gap-2">
<button
onclick={toggleTheme}
class="rounded p-1.5 text-white/80 hover:text-white hover:bg-white/20 transition"