aewing
42ff3e8f33
Build & Deploy / Test & Lint (push) Has been cancelled
Build & Deploy / Security Scan (push) Has been cancelled
Code Quality / Code Quality Checks (push) Has been cancelled
Code Quality / Dependency Vulnerabilities (push) Has been cancelled
Code Quality / Performance Testing (push) Has been cancelled
Build & Deploy / Build Docker Images (push) Has been cancelled
Build & Deploy / Deploy to Kubernetes (push) Has been cancelled
100 lines
2.5 KiB
Svelte
100 lines
2.5 KiB
Svelte
<script lang="ts">
|
|
/**
|
|
* COMPONENT: Navigation
|
|
*
|
|
* PURPOSE: Main navigation header
|
|
* FEATURES:
|
|
* - Display user name
|
|
* - Sign out button
|
|
* - Logo/branding
|
|
* - Navigation links
|
|
*/
|
|
|
|
import { user, clearAuth } from '../stores/auth';
|
|
import { clearNotifications } from '../stores/ui';
|
|
import { clearJobs } from '../stores/jobs';
|
|
|
|
/**
|
|
* Handle sign out
|
|
*/
|
|
function handleSignOut() {
|
|
try {
|
|
// Clear auth state
|
|
clearAuth();
|
|
|
|
// Clear other stores
|
|
clearNotifications();
|
|
clearJobs();
|
|
|
|
// Redirect to signin using hash-based routing
|
|
window.location.hash = '/signin';
|
|
} catch (error) {
|
|
console.error('[Navigation] Sign out error:', error);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Get user initials for avatar
|
|
*/
|
|
function getInitials(displayName: string | undefined): string {
|
|
if (!displayName) return '?';
|
|
return displayName
|
|
.split(' ')
|
|
.map((n) => n[0])
|
|
.join('')
|
|
.toUpperCase()
|
|
.slice(0, 2);
|
|
}
|
|
</script>
|
|
|
|
<!-- Navigation Header -->
|
|
<nav class="bg-white shadow-sm border-b border-gray-200">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center h-16">
|
|
<!-- Left: Logo/Title -->
|
|
<div class="flex items-center">
|
|
<h1 class="text-2xl font-bold text-blue-600">Job Info</h1>
|
|
</div>
|
|
|
|
<!-- Center: Navigation Links (placeholder for future) -->
|
|
<div class="hidden md:flex items-center space-x-8">
|
|
<a href="/" class="text-gray-600 hover:text-gray-900 transition-colors">
|
|
Home
|
|
</a>
|
|
<a href="/#" class="text-gray-600 hover:text-gray-900 transition-colors">
|
|
Saved Jobs
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Right: User Menu -->
|
|
<div class="flex items-center gap-4">
|
|
<!-- User Avatar and Name -->
|
|
<div class="flex items-center gap-3">
|
|
<!-- Avatar -->
|
|
<div class="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center text-sm font-medium">
|
|
{getInitials($user?.displayName)}
|
|
</div>
|
|
|
|
<!-- User Name (hidden on mobile) -->
|
|
<div class="hidden sm:block">
|
|
<p class="text-sm font-medium text-gray-900">{$user?.displayName || 'User'}</p>
|
|
<p class="text-xs text-gray-500">{$user?.mail}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sign Out Button -->
|
|
<button
|
|
on:click={handleSignOut}
|
|
class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors"
|
|
>
|
|
Sign Out
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<style>
|
|
/* No additional styles needed - using TailwindCSS */
|
|
</style>
|