Marc/riboneo-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
meisterbusiness
2026-02-24 21:21:39 +01:00
parent 67a58bea3a
commit 132945f4c6
236 changed files with 14774 additions and 5865 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
components/Navbar.tsx Normal file
View File

@@ -0,0 +1,178 @@
import React, { useState } from 'react';
import { Page } from '../types';
import { Session } from '@supabase/supabase-js';
import { supabase } from '../supabaseClient';
interface NavbarProps {
currentPage: Page;
setPage: (page: Page) => void;
session: Session | null;
}
const Navbar: React.FC<NavbarProps> = ({ currentPage, setPage, session }) => {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const navLinks = [
{ label: 'Home', value: Page.HOME },
{ label: 'Das Buch', value: Page.BOOK },
{ label: 'Retreat', value: Page.RETREAT },
{ label: 'Blog', value: Page.BLOG },
{ label: 'Kontakt', value: Page.CONTACT },
];
return (
<nav className="fixed w-full z-50 top-0 glass-effect border-b border-slate-200/50 dark:border-white/10 transition-all duration-300">
<div className="max-w-7xl mx-auto px-6 h-24 flex items-center justify-between">
<div
className="flex items-center gap-4 cursor-pointer"
onClick={() => setPage(Page.HOME)}
>
<img
alt="Riboneo Logo"
className="h-10 w-auto object-contain transition-all dark:hidden block"
src="/logo-black.png"
/>
<img
alt="Riboneo Logo"
className="h-10 w-auto object-contain transition-all hidden dark:block"
src="/logo-white.png"
/>
<div className="flex flex-col -space-y-1">
<span className="font-display text-2xl tracking-[0.2em] uppercase font-medium text-slate-900 dark:text-white">Riboneo</span>
<span className="text-[10px] tracking-[0.4em] uppercase font-light text-slate-500 dark:text-slate-400">By Roberto de Marco</span>
</div>
</div>
<div className="hidden md:flex items-center gap-6">
<div className="flex gap-6 mr-4">
{navLinks.map((link) => (
<button
key={link.value}
onClick={() => setPage(link.value)}
className={`text-xs tracking-widest uppercase font-medium hover:text-primary transition-colors ${currentPage === link.value ? 'text-primary font-bold' : 'text-slate-600 dark:text-slate-300'
}`}
>
{link.label}
</button>
))}
</div>
<div className="flex items-center gap-4 pl-6 border-l border-slate-200 dark:border-white/10">
{!session ? (
<>
<button
onClick={() => setPage(Page.LOGIN)}
className="text-xs tracking-widest uppercase font-bold text-slate-900 dark:text-white hover:text-primary transition-colors"
>
Einloggen
</button>
<button
onClick={() => setPage(Page.REGISTER)}
className="px-5 py-2 bg-primary text-white text-xs tracking-widest uppercase font-bold rounded-full hover:bg-opacity-90 transition-all shadow-lg shadow-primary/20"
>
Anmelden
</button>
</>
) : (
<div className="flex items-center gap-4">
<span
onClick={() => setPage(Page.DASHBOARD)}
className="text-xs tracking-widest uppercase font-bold text-slate-900 dark:text-white hover:text-primary cursor-pointer transition-colors"
>
Hallo, {session.user.user_metadata.first_name || 'User'}
</span>
<button
onClick={async () => {
await supabase.auth.signOut();
setPage(Page.HOME);
}}
className="px-5 py-2 bg-secondary/20 text-primary text-xs tracking-widest uppercase font-bold rounded-full hover:bg-secondary/30 transition-all"
>
Ausloggen
</button>
</div>
)}
<button
className="p-2 ml-2 rounded-full hover:bg-slate-100 dark:hover:bg-white/10 transition-all"
onClick={() => document.documentElement.classList.toggle('dark')}
>
<span className="material-symbols-outlined block dark:hidden text-slate-600">dark_mode</span>
<span className="material-symbols-outlined hidden dark:block text-yellow-400">light_mode</span>
</button>
</div>
</div>
<button
className="md:hidden p-2"
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
>
<span className="material-symbols-outlined">menu</span>
</button>
</div>
{/* Mobile Menu */}
{mobileMenuOpen && (
<div className="md:hidden absolute top-24 left-0 w-full bg-white dark:bg-background-dark border-b border-slate-200 dark:border-slate-800 p-6 flex flex-col space-y-4 shadow-xl">
{navLinks.map((link) => (
<button
key={link.value}
onClick={() => {
setPage(link.value);
setMobileMenuOpen(false);
}}
className="text-sm tracking-widest uppercase font-medium hover:text-primary text-left py-2 text-slate-900 dark:text-white"
>
{link.label}
</button>
))}
{!session ? (
<>
<button
onClick={() => {
setPage(Page.LOGIN);
setMobileMenuOpen(false);
}}
className="text-sm tracking-widest uppercase font-medium hover:text-primary text-left py-2 text-slate-900 dark:text-white"
>
Einloggen
</button>
<button
onClick={() => {
setPage(Page.REGISTER);
setMobileMenuOpen(false);
}}
className="text-sm tracking-widest uppercase font-bold text-primary text-left py-2"
>
Konto erstellen
</button>
</>
) : (
<>
<button
onClick={() => {
setPage(Page.DASHBOARD);
setMobileMenuOpen(false);
}}
className="text-sm tracking-widest uppercase font-medium hover:text-primary text-left py-2 text-slate-900 dark:text-white"
>
Hallo, {session.user.user_metadata.first_name || 'User'} (Dashboard)
</button>
<button
onClick={async () => {
await supabase.auth.signOut();
setPage(Page.HOME);
setMobileMenuOpen(false);
}}
className="text-sm tracking-widest uppercase font-bold text-primary text-left py-2"
>
Ausloggen
</button>
</>
)}
</div>
)}
</nav>
);
};
export default Navbar;