From 386ea2dc8271de95ac63864300f7198bdd445e23 Mon Sep 17 00:00:00 2001
From: rtkay123 <dev@kanjala.com>
Date: Fri, 20 Feb 2026 17:16:26 +0200
Subject: feat(web): login screen

---
 .../lib/components/header/navigation-bar.svelte    | 179 +++++++++++++++++++++
 1 file changed, 179 insertions(+)
 create mode 100644 website/src/lib/components/header/navigation-bar.svelte

(limited to 'website/src/lib/components/header')

diff --git a/website/src/lib/components/header/navigation-bar.svelte b/website/src/lib/components/header/navigation-bar.svelte
new file mode 100644
index 0000000..3c3da94
--- /dev/null
+++ b/website/src/lib/components/header/navigation-bar.svelte
@@ -0,0 +1,179 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { Menu, X, Search, ShoppingBag } from 'lucide-svelte';
+    import { fade, slide } from 'svelte/transition';
+    import { quintOut } from 'svelte/easing';
+    import Logo from '../logo.svelte';
+
+    let mobileOpen = $state(false);
+    let searchOpen = $state(false);
+    let scrolled = $state(false);
+    let query = $state('');
+    let user = $state(null);
+
+    const navLinks = [
+        { label: 'Discover', href: '/discover' },
+        { label: 'Federations', href: '/federations' },
+        { label: 'Stores', href: '/stores' },
+        { label: 'Developers', href: '/developers' },
+    ];
+
+    const handleScroll = () => {
+        scrolled = window.scrollY > 10;
+    };
+
+    onMount(() => {
+        window.addEventListener('scroll', handleScroll);
+        return () => window.removeEventListener('scroll', handleScroll);
+    });
+
+    function openSearch() {
+        searchOpen = true;
+        mobileOpen = false; // Close mobile menu if search opens
+    }
+
+    function closeSearch() {
+        searchOpen = false;
+        query = '';
+    }
+</script>
+
+<nav
+    class="fixed top-0 left-0 z-50 w-full text-white transition-all duration-300
+    {scrolled ? 'bg-black/80 shadow-sm backdrop-blur-xl' : 'bg-black backdrop-blur-lg'}"
+>
+    <div class="mx-auto max-w-7xl px-4">
+        <div class="relative flex h-14 items-center justify-between">
+            <a
+                href="/"
+                class="z-10 flex items-center text-[17px] font-semibold tracking-tight transition-opacity duration-200 {searchOpen
+                    ? 'max-md:hidden'
+                    : ''}"
+                class:opacity-0={searchOpen}
+            >
+                <Logo class="h-8 w-8" /><span>sellers</span><span class="text-rose-600">hut</span>
+            </a>
+
+            <div class="relative flex flex-1 justify-center px-2">
+                {#if !searchOpen}
+                    <div
+                        class="hidden items-center gap-8 text-[13px] font-medium md:flex"
+                        transition:fade={{ duration: 200 }}
+                    >
+                        {#each navLinks as link}
+                            <a
+                                href={link.href}
+                                class="text-neutral-200 transition-colors hover:text-white"
+                            >
+                                {link.label}
+                            </a>
+                        {/each}
+                    </div>
+                {:else}
+                    <div
+                        class="absolute inset-0 z-20 flex items-center"
+                        in:slide={{ duration: 250, easing: quintOut }}
+                        out:fade={{ duration: 150 }}
+                    >
+                        <div class="relative mx-auto flex w-full max-w-2xl items-center gap-2">
+                            <div class="relative flex-1">
+                                <Search
+                                    size={16}
+                                    class="absolute top-1/2 left-4 -translate-y-1/2 text-neutral-500"
+                                />
+                                <input
+                                    bind:value={query}
+                                    placeholder="search sellershut.com"
+                                    class="h-10 w-full rounded-lg bg-neutral-100 pr-4 pl-10 text-sm text-black outline-none focus:border-transparent focus:ring-2 focus:ring-rose-500 focus:outline-none"
+                                />
+                            </div>
+                            <button
+                                onclick={closeSearch}
+                                class="p-2 text-neutral-100 hover:text-white"
+                            >
+                                <X size={20} />
+                            </button>
+                        </div>
+                    </div>
+                {/if}
+            </div>
+
+            <div class="z-10 flex items-center gap-3 md:gap-6">
+                {#if !searchOpen}
+                    <button
+                        onclick={openSearch}
+                        class="p-2 text-neutral-200 transition-colors hover:text-white"
+                        aria-label="Search"
+                    >
+                        <Search size={18} />
+                    </button>
+
+                    <button class="p-2 text-neutral-200 hover:text-white" aria-label="Cart">
+                        <ShoppingBag size={18} />
+                    </button>
+
+                    <div class="hidden sm:block">
+                        {#if user}
+                            <img
+                                src="/avatar.jpg"
+                                alt="User"
+                                class="h-7 w-7 rounded-full ring-1 ring-black/10"
+                            />
+                        {:else}
+                            <a
+                                href="/login"
+                                class="inline-flex h-9 items-center justify-center rounded-md bg-rose-600 px-4 py-1 text-sm font-medium tracking-tight text-white shadow-sm transition-all duration-200 hover:bg-rose-700 active:scale-[0.98]"
+                            >
+                                Sign in
+                            </a>
+                        {/if}
+                    </div>
+
+                    <button
+                        class="p-2 text-neutral-200 md:hidden"
+                        onclick={() => (mobileOpen = !mobileOpen)}
+                    >
+                        {#if mobileOpen}
+                            <X size={22} />
+                        {:else}
+                            <Menu size={22} />
+                        {/if}
+                    </button>
+                {/if}
+            </div>
+        </div>
+    </div>
+
+    {#if mobileOpen}
+        <div
+            class="fixed inset-x-0 top-14 z-40 bg-black text-white md:hidden"
+            transition:slide={{ duration: 250, easing: quintOut }}
+        >
+            <div class="h-screen space-y-8 border-t border-white/10 px-6 py-8">
+                <div class="flex flex-col gap-6">
+                    {#each navLinks as link}
+                        <a
+                            href={link.href}
+                            class="text-2xl font-semibold tracking-tight text-white/90 transition-colors hover:text-rose-500"
+                            onclick={() => (mobileOpen = false)}
+                        >
+                            {link.label}
+                        </a>
+                    {/each}
+                </div>
+
+                <div class="h-px bg-white/10"></div>
+
+                <a
+                    href="/login"
+                    class="block text-lg font-medium text-rose-500"
+                    onclick={() => (mobileOpen = false)}
+                >
+                    {user ? 'My Profile' : 'Sign in / Register'}
+                </a>
+            </div>
+        </div>
+    {/if}
+</nav>
+
+<div class="h-14"></div>
-- 
cgit v1.2.3