vikingowl
a77082c400
- Apply void dark background with neon-blue border accents - Add neon text-shadow glow to logo (cyan + gold) - Update nav links to hover:text-neon-blue with focus-visible states - Add grid pattern overlay to footer - Use neon-red for heart icon and donation hover - Add motion-reduce support and accessible focus rings 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
80 lines
2.4 KiB
Svelte
80 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import { Menu, X } from 'lucide-svelte';
|
|
import SearchBar from './SearchBar.svelte';
|
|
import ThemeToggle from './ThemeToggle.svelte';
|
|
|
|
let mobileMenuOpen = $state(false);
|
|
|
|
const navigation = [
|
|
{ name: 'Home', href: '/' },
|
|
{ name: 'Matches', href: '/matches' },
|
|
{ name: 'Players', href: '/players' },
|
|
{ name: 'About', href: '/about' }
|
|
];
|
|
</script>
|
|
|
|
<header class="sticky top-0 z-50 w-full border-b border-neon-blue/20 bg-void/95 backdrop-blur-md">
|
|
<div class="container mx-auto px-4">
|
|
<div class="flex h-16 items-center justify-between">
|
|
<!-- Logo -->
|
|
<a
|
|
href="/"
|
|
class="rounded transition-transform hover:scale-105 focus:outline-none focus-visible:ring-2 focus-visible:ring-neon-blue focus-visible:ring-offset-2 focus-visible:ring-offset-void motion-reduce:hover:scale-100"
|
|
aria-label="teamflash.rip Home"
|
|
>
|
|
<h1 class="text-2xl font-bold">
|
|
<span style="color: #00d4ff; text-shadow: 0 0 10px #00d4ff;">team</span><span
|
|
style="color: #ffd700; text-shadow: 0 0 10px #ffd700;">flash.rip</span
|
|
>
|
|
</h1>
|
|
</a>
|
|
|
|
<!-- Desktop Navigation -->
|
|
<nav class="hidden items-center gap-6 md:flex">
|
|
{#each navigation as item}
|
|
<a
|
|
href={item.href}
|
|
class="rounded text-sm font-medium text-white/60 transition-colors hover:text-neon-blue focus:outline-none focus-visible:text-neon-blue"
|
|
>
|
|
{item.name}
|
|
</a>
|
|
{/each}
|
|
</nav>
|
|
|
|
<!-- Search & Actions -->
|
|
<div class="flex items-center gap-2">
|
|
<SearchBar />
|
|
<ThemeToggle />
|
|
|
|
<!-- Mobile Menu Toggle -->
|
|
<button
|
|
class="rounded-lg p-2 text-white/70 transition-colors hover:bg-neon-blue/10 hover:text-neon-blue focus:outline-none focus-visible:ring-2 focus-visible:ring-neon-blue md:hidden"
|
|
onclick={() => (mobileMenuOpen = !mobileMenuOpen)}
|
|
aria-label="Toggle menu"
|
|
>
|
|
{#if mobileMenuOpen}
|
|
<X class="h-5 w-5" />
|
|
{:else}
|
|
<Menu class="h-5 w-5" />
|
|
{/if}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Navigation -->
|
|
{#if mobileMenuOpen}
|
|
<nav class="animate-fade-in border-t border-neon-blue/20 py-4 md:hidden">
|
|
{#each navigation as item}
|
|
<a
|
|
href={item.href}
|
|
class="mx-2 block rounded-lg px-4 py-2 text-sm font-medium text-white/60 transition-colors hover:bg-neon-blue/10 hover:text-neon-blue"
|
|
onclick={() => (mobileMenuOpen = false)}
|
|
>
|
|
{item.name}
|
|
</a>
|
|
{/each}
|
|
</nav>
|
|
{/if}
|
|
</div>
|
|
</header>
|