You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
83 lines
3.3 KiB
83 lines
3.3 KiB
<script lang="ts"> |
|
import { sessionManager, type UserSession } from '../../services/auth/session-manager.js'; |
|
import ThemeToggle from '../preferences/ThemeToggle.svelte'; |
|
import UserPreferences from '../preferences/UserPreferences.svelte'; |
|
import ProfileBadge from '../layout/ProfileBadge.svelte'; |
|
|
|
let currentSession = $state<UserSession | null>(sessionManager.session.value); |
|
let isLoggedIn = $derived(currentSession !== null); |
|
let currentPubkey = $derived(currentSession?.pubkey || null); |
|
|
|
// Subscribe to session changes |
|
$effect(() => { |
|
const unsubscribe = sessionManager.session.subscribe((session: UserSession | null) => { |
|
currentSession = session; |
|
}); |
|
return unsubscribe; |
|
}); |
|
|
|
</script> |
|
|
|
<header class="relative border-b border-fog-border dark:border-fog-dark-border"> |
|
<!-- Banner image --> |
|
<div class="h-32 md:h-48 overflow-hidden bg-fog-surface dark:bg-fog-dark-surface"> |
|
<div class="max-w-7xl mx-auto h-full"> |
|
<img |
|
src="/aither.png" |
|
alt="Aitherboard banner" |
|
class="w-full h-full object-cover opacity-90 dark:opacity-70" |
|
/> |
|
<!-- Overlay gradient for text readability --> |
|
<div class="absolute inset-0 bg-gradient-to-b from-fog-bg/30 to-fog-bg/80 dark:from-fog-dark-bg/40 dark:to-fog-dark-bg/90 pointer-events-none"></div> |
|
</div> |
|
</div> |
|
|
|
<!-- Navigation --> |
|
<nav class="bg-fog-surface/95 dark:bg-fog-dark-surface/95 backdrop-blur-sm border-b border-fog-border dark:border-fog-dark-border px-4 py-3"> |
|
<div class="flex flex-wrap items-center justify-between gap-2 max-w-7xl mx-auto"> |
|
<a href="/" class="text-xl font-semibold text-fog-text dark:text-fog-dark-text hover:text-fog-text-light dark:hover:text-fog-dark-text-light transition-colors">Aitherboard</a> |
|
<div class="flex flex-wrap gap-2 sm:gap-4 items-center text-sm"> |
|
<a href="/" class="text-fog-text dark:text-fog-dark-text hover:text-fog-accent dark:hover:text-fog-dark-accent transition-colors">Threads</a> |
|
<a href="/feed" class="text-fog-text dark:text-fog-dark-text hover:text-fog-accent dark:hover:text-fog-dark-accent transition-colors">Feed</a> |
|
{#if isLoggedIn && currentPubkey} |
|
<span class="text-fog-text-light dark:text-fog-dark-text-light">Logged in as </span> |
|
<ProfileBadge pubkey={currentPubkey} /> |
|
<button |
|
onclick={() => sessionManager.clearSession()} |
|
class="px-3 py-1 rounded border border-fog-border dark:border-fog-dark-border bg-fog-post dark:bg-fog-dark-post hover:bg-fog-highlight dark:hover:bg-fog-dark-highlight text-fog-text dark:text-fog-dark-text transition-colors" |
|
> |
|
Logout |
|
</button> |
|
{:else} |
|
<a href="/login" class="text-fog-text dark:text-fog-dark-text hover:text-fog-accent dark:hover:text-fog-dark-accent transition-colors">Login</a> |
|
{/if} |
|
<UserPreferences /> |
|
<ThemeToggle /> |
|
</div> |
|
</div> |
|
</nav> |
|
</header> |
|
|
|
<style> |
|
header { |
|
max-width: 100%; |
|
} |
|
|
|
nav { |
|
min-width: 0; /* Allow flex items to shrink */ |
|
} |
|
|
|
@media (max-width: 768px) { |
|
nav { |
|
padding: 0.5rem 0.75rem; /* Smaller padding on mobile */ |
|
} |
|
|
|
nav a, nav button { |
|
font-size: 0.875rem; /* Slightly smaller text on mobile */ |
|
} |
|
|
|
nav .text-xl { |
|
font-size: 1.125rem; /* Smaller logo on mobile */ |
|
} |
|
} |
|
</style>
|
|
|