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"> <div class="min-h-screen layout-page-bg">
<nav class="shadow-sm layout-nav-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="px-4 sm:px-6 lg:px-8">
<div class="flex h-14 items-center justify-between"> <!-- 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"> <a href="/" class="flex items-center gap-2 text-white font-bold text-lg">
{#if data.tenant?.logoUrl} {#if data.tenant?.logoUrl}
<img src={data.tenant.logoUrl} alt="" class="h-7 w-auto" /> <img src={data.tenant.logoUrl} alt="" class="h-7 w-auto" />
@@ -42,14 +44,17 @@
{data.tenant?.logoText ?? data.tenant?.name ?? 'Pounce'} {data.tenant?.logoText ?? data.tenant?.name ?? 'Pounce'}
</a> </a>
{#if data.user} <!-- Center: Search -->
<div class="hidden sm:block"> <div class="flex justify-center">
<SearchBar /> {#if data.user}
</div> <div class="w-full max-w-md">
{/if} <SearchBar />
</div>
{/if}
</div>
<!-- Desktop nav --> <!-- Right: Nav items -->
<div class="hidden sm:flex items-center gap-3"> <div class="flex items-center gap-3">
{#if data.user} {#if data.user}
<a <a
href="/my-work" href="/my-work"
@@ -120,9 +125,24 @@
</a> </a>
{/if} {/if}
</div> </div>
</div>
<!-- Mobile hamburger --> <!-- Mobile header -->
<div class="flex items-center gap-2 sm:hidden"> <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 <button
onclick={toggleTheme} onclick={toggleTheme}
class="rounded p-1.5 text-white/80 hover:text-white hover:bg-white/20 transition" class="rounded p-1.5 text-white/80 hover:text-white hover:bg-white/20 transition"