inital working version

2025-07-22 21:49:40 +02:00
parent bebb799784
commit 59d29dceaf
98 changed files with 8027 additions and 856 deletions
--- a/frontend/src/components/layout/Header.tsx
+++ b/frontend/src/components/layout/Header.tsx
@@ -0,0 +1,147 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import { useAuth } from '../../contexts/AuthContext';
+import { useTheme } from '../../lib/theme';
+import Button from '../ui/Button';
+
+export default function Header() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const { logout } = useAuth();
+  const { theme, toggleTheme } = useTheme();
+  const router = useRouter();
+
+  const handleLogout = () => {
+    logout();
+    router.push('/login');
+  };
+
+  return (
+    <header className="theme-card theme-shadow border-b theme-border sticky top-0 z-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center h-16">
+          {/* Logo and Brand */}
+          <Link href="/library" className="flex items-center space-x-3">
+            <Image
+              src={theme === 'dark' ? '/logo-dark-medium.png' : '/logo-medium.png'}
+              alt="StoryCove"
+              width={40}
+              height={40}
+              priority
+            />
+            <span className="text-xl font-bold theme-header hidden sm:block">
+              StoryCove
+            </span>
+          </Link>
+
+          {/* Desktop Navigation */}
+          <nav className="hidden md:flex items-center space-x-6">
+            <Link 
+              href="/library" 
+              className="theme-text hover:theme-accent transition-colors font-medium"
+            >
+              Library
+            </Link>
+            <Link 
+              href="/authors" 
+              className="theme-text hover:theme-accent transition-colors font-medium"
+            >
+              Authors
+            </Link>
+            <Link 
+              href="/add-story" 
+              className="theme-text hover:theme-accent transition-colors font-medium"
+            >
+              Add Story
+            </Link>
+          </nav>
+
+          {/* Right side actions */}
+          <div className="flex items-center space-x-4">
+            {/* Theme Toggle */}
+            <button
+              onClick={toggleTheme}
+              className="p-2 rounded-lg theme-text hover:theme-accent transition-colors"
+              aria-label="Toggle theme"
+            >
+              {theme === 'light' ? '🌙' : '☀️'}
+            </button>
+
+            {/* Settings */}
+            <Link
+              href="/settings"
+              className="p-2 rounded-lg theme-text hover:theme-accent transition-colors"
+              aria-label="Settings"
+            >
+              ⚙️
+            </Link>
+
+            {/* Logout */}
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleLogout}
+              className="hidden md:inline-flex"
+            >
+              Logout
+            </Button>
+
+            {/* Mobile menu button */}
+            <button
+              onClick={() => setIsMenuOpen(!isMenuOpen)}
+              className="md:hidden p-2 rounded-lg theme-text hover:theme-accent transition-colors"
+              aria-label="Toggle menu"
+            >
+              {isMenuOpen ? '✕' : '☰'}
+            </button>
+          </div>
+        </div>
+
+        {/* Mobile Navigation */}
+        {isMenuOpen && (
+          <div className="md:hidden border-t theme-border py-4">
+            <div className="flex flex-col space-y-3">
+              <Link 
+                href="/library" 
+                className="theme-text hover:theme-accent transition-colors font-medium px-2 py-1"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                Library
+              </Link>
+              <Link 
+                href="/authors" 
+                className="theme-text hover:theme-accent transition-colors font-medium px-2 py-1"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                Authors
+              </Link>
+              <Link 
+                href="/add-story" 
+                className="theme-text hover:theme-accent transition-colors font-medium px-2 py-1"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                Add Story
+              </Link>
+              <Link 
+                href="/settings" 
+                className="theme-text hover:theme-accent transition-colors font-medium px-2 py-1"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                Settings
+              </Link>
+              <button 
+                onClick={handleLogout}
+                className="theme-text hover:theme-accent transition-colors font-medium px-2 py-1 text-left"
+              >
+                Logout
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </header>
+  );
+}