Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 admin
|
c7a09c6a1f |
@@ -0,0 +1,179 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { usePathname } from 'next/navigation';
|
||||
|
||||
const leftItems = [
|
||||
{ href: '/feed', label: 'Feed', icon: '🏠' },
|
||||
{ href: '/explore', label: 'Entdecken', icon: '🔍' },
|
||||
];
|
||||
|
||||
const rightItems = [
|
||||
{ href: '/pets', label: 'Tiere', icon: '🐾' },
|
||||
{ href: '/profile', label: 'Profil', icon: '👤' },
|
||||
];
|
||||
|
||||
function NavItem({
|
||||
item,
|
||||
pathname,
|
||||
}: {
|
||||
item: { href: string; label: string; icon: string };
|
||||
pathname: string;
|
||||
}) {
|
||||
const isActive =
|
||||
item.href === '/feed'
|
||||
? pathname === '/feed'
|
||||
: pathname.startsWith(item.href);
|
||||
|
||||
return (
|
||||
<Link
|
||||
href={item.href}
|
||||
style={{
|
||||
textDecoration: 'none',
|
||||
color: isActive ? '#000' : '#777',
|
||||
fontSize: '0.7rem',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
gap: '2px',
|
||||
transition: 'transform 0.15s ease, color 0.15s ease',
|
||||
}}
|
||||
onMouseDown={(e) => {
|
||||
(e.currentTarget as HTMLElement).style.transform = 'scale(0.9)';
|
||||
}}
|
||||
onMouseUp={(e) => {
|
||||
(e.currentTarget as HTMLElement).style.transform = 'scale(1)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
(e.currentTarget as HTMLElement).style.transform = 'scale(1)';
|
||||
}}
|
||||
|
||||
>
|
||||
<span style={{ fontSize: '1.1rem' }}>{item.icon}</span>
|
||||
{item.label}
|
||||
{isActive && (
|
||||
<span
|
||||
style={{
|
||||
marginTop: '2px',
|
||||
width: '6px',
|
||||
height: '2px',
|
||||
borderRadius: '2px',
|
||||
backgroundColor: '#2E7D32',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
export default function BottomNav() {
|
||||
const [isLoggedIn, setIsLoggedIn] = useState(false);
|
||||
const pathname = usePathname();
|
||||
|
||||
useEffect(() => {
|
||||
const hasAuthCookie = document.cookie
|
||||
.split('; ')
|
||||
.some((c) => c.startsWith('onlypets-auth=true'));
|
||||
|
||||
setIsLoggedIn(hasAuthCookie);
|
||||
}, []);
|
||||
|
||||
if (!isLoggedIn) return null;
|
||||
|
||||
return (
|
||||
<nav
|
||||
style={{
|
||||
position: 'fixed',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: '70px',
|
||||
borderTop: '1px solid #eee',
|
||||
backgroundColor: '#fff',
|
||||
zIndex: 100,
|
||||
}}
|
||||
>
|
||||
{/* Linke Seite */}
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
height: '70px',
|
||||
width: '50%',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-evenly',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
{leftItems.map((item) => (
|
||||
<NavItem key={item.href} item={item} pathname={pathname} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Rechte Seite */}
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
height: '70px',
|
||||
width: '50%',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-evenly',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
{rightItems.map((item) => (
|
||||
<NavItem key={item.href} item={item} pathname={pathname} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Zentrierter Post-Button */}
|
||||
<Link
|
||||
href="/post/new"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%) translateY(-18px)',
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '56px',
|
||||
height: '56px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: '#2E7D32',
|
||||
color: 'white',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '1.3rem',
|
||||
boxShadow: '0 6px 16px rgba(0,0,0,0.25)',
|
||||
transition: 'transform 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
transform: 'translateY(0) scale(1)', // 🔑 Ausgangszustand
|
||||
}}
|
||||
onClick={(e) => {
|
||||
const el = e.currentTarget as HTMLElement;
|
||||
|
||||
// Jump
|
||||
el.style.transform = 'translateY(-8px) scale(0.95)';
|
||||
|
||||
// Rückkehr
|
||||
setTimeout(() => {
|
||||
el.style.transform = 'translateY(0) scale(1)';
|
||||
}, 180);
|
||||
}}
|
||||
>
|
||||
➕
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
|
||||
</nav>
|
||||
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
export default function Navbar() {
|
||||
const [isLoggedIn, setIsLoggedIn] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const hasAuthCookie = document.cookie
|
||||
.split('; ')
|
||||
.some((c) => c.startsWith('onlypets-auth=true'));
|
||||
|
||||
setIsLoggedIn(hasAuthCookie);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<nav
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: '1.5rem',
|
||||
padding: '1rem',
|
||||
borderBottom: '1px solid #eee',
|
||||
}}
|
||||
>
|
||||
{/* 🌱 GAST-NAVIGATION */}
|
||||
{!isLoggedIn && (
|
||||
<>
|
||||
<Link href="/">Home</Link>
|
||||
<Link href="/login">Login</Link>
|
||||
<Link href="/register">Registrierung</Link>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 🐾 USER-NAVIGATION */}
|
||||
{isLoggedIn && (
|
||||
<>
|
||||
<Link href="/feed">Feed</Link>
|
||||
<Link href="/explore">Entdecken</Link>
|
||||
<Link href="/pets">Meine Tiere</Link>
|
||||
<Link href="/post/new">Posten</Link>
|
||||
<Link href="/profile">Profil</Link>
|
||||
</>
|
||||
)}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -1,3 +1,472 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useState } from 'react';
|
||||
|
||||
type ExplorePet = {
|
||||
id: number;
|
||||
name: string;
|
||||
type: 'Hund' | 'Katze';
|
||||
};
|
||||
|
||||
type ExplorePost = {
|
||||
id: number;
|
||||
petId: number;
|
||||
petName: string;
|
||||
petType: 'Hund' | 'Katze';
|
||||
authorName: string;
|
||||
createdAt: string;
|
||||
text: string;
|
||||
likesCount: number;
|
||||
commentsCount: number;
|
||||
};
|
||||
|
||||
const trendingPets: ExplorePet[] = [
|
||||
{ id: 1, name: 'Luna', type: 'Katze' },
|
||||
{ id: 2, name: 'Bello', type: 'Hund' },
|
||||
{ id: 3, name: 'Milo', type: 'Katze' },
|
||||
{ id: 4, name: 'Rocky', type: 'Hund' },
|
||||
{ id: 5, name: 'Nala', type: 'Katze' },
|
||||
{ id: 6, name: 'Leo', type: 'Hund' },
|
||||
];
|
||||
|
||||
const latestPosts: ExplorePost[] = [
|
||||
{
|
||||
id: 101,
|
||||
petId: 1,
|
||||
petName: 'Luna',
|
||||
petType: 'Katze',
|
||||
authorName: 'Anna',
|
||||
createdAt: 'vor 2 Stunden',
|
||||
text: 'Luna chillt auf dem Sofa und beobachtet alles ganz genau.',
|
||||
likesCount: 12,
|
||||
commentsCount: 3,
|
||||
},
|
||||
{
|
||||
id: 102,
|
||||
petId: 2,
|
||||
petName: 'Bello',
|
||||
petType: 'Hund',
|
||||
authorName: 'Markus',
|
||||
createdAt: 'heute',
|
||||
text: 'Bello hat sein neues Lieblingsspielzeug gefunden.',
|
||||
likesCount: 25,
|
||||
commentsCount: 8,
|
||||
},
|
||||
{
|
||||
id: 103,
|
||||
petId: 3,
|
||||
petName: 'Milo',
|
||||
petType: 'Katze',
|
||||
authorName: 'Sophie',
|
||||
createdAt: 'gestern',
|
||||
text: 'Milo hat wieder einen Karton erobert.',
|
||||
likesCount: 7,
|
||||
commentsCount: 1,
|
||||
},
|
||||
{
|
||||
id: 104,
|
||||
petId: 4,
|
||||
petName: 'Rocky',
|
||||
petType: 'Hund',
|
||||
authorName: 'Timo',
|
||||
createdAt: 'gestern',
|
||||
text: 'Rocky war im Wald unterwegs. 10/10 würde wieder rennen.',
|
||||
likesCount: 19,
|
||||
commentsCount: 4,
|
||||
},
|
||||
];
|
||||
|
||||
export default function ExplorePage() {
|
||||
return <h1>Entdecken</h1>;
|
||||
const [activeFilter, setActiveFilter] = useState<
|
||||
'ALLE' | 'HUND' | 'KATZE'
|
||||
>('ALLE');
|
||||
|
||||
const [previewPost, setPreviewPost] = useState<ExplorePost | null>(null);
|
||||
const [openComments, setOpenComments] = useState(false);
|
||||
|
||||
// Swipe-Down Handling fürs Modal
|
||||
const startY = useRef<number | null>(null);
|
||||
|
||||
const filteredPosts = latestPosts.filter((p) => {
|
||||
if (activeFilter === 'HUND') return p.petType === 'Hund';
|
||||
if (activeFilter === 'KATZE') return p.petType === 'Katze';
|
||||
return true;
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* ================= HEADER / FILTER ================= */}
|
||||
<section
|
||||
style={{
|
||||
padding: '1rem',
|
||||
display: 'grid',
|
||||
gap: '1rem',
|
||||
maxWidth: '720px',
|
||||
margin: '0 auto',
|
||||
}}
|
||||
>
|
||||
<header>
|
||||
<h1 style={{ marginBottom: '0.3rem' }}>Entdecken</h1>
|
||||
<p style={{ margin: 0, color: '#666' }}>
|
||||
Neue Tiere, Trends & besondere Momente
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div style={{ display: 'flex', gap: '0.5rem' }}>
|
||||
{[
|
||||
{ key: 'ALLE', label: 'Alle' },
|
||||
{ key: 'HUND', label: 'Hunde' },
|
||||
{ key: 'KATZE', label: 'Katzen' },
|
||||
].map((f) => {
|
||||
const active = activeFilter === f.key;
|
||||
return (
|
||||
<button
|
||||
key={f.key}
|
||||
onClick={() =>
|
||||
setActiveFilter(f.key as 'ALLE' | 'HUND' | 'KATZE')
|
||||
}
|
||||
style={{
|
||||
padding: '0.45rem 0.9rem',
|
||||
borderRadius: '999px',
|
||||
border: active ? 'none' : '1px solid #ccc',
|
||||
backgroundColor: active ? '#2E7D32' : 'white',
|
||||
color: active ? 'white' : 'inherit',
|
||||
fontSize: '0.75rem',
|
||||
fontWeight: active ? 600 : 400,
|
||||
cursor: 'pointer',
|
||||
transform: active ? 'scale(1.05)' : 'scale(1)',
|
||||
transition:
|
||||
'background-color 0.2s ease, transform 0.15s ease',
|
||||
}}
|
||||
>
|
||||
{f.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ================= BELIEBTE TIERE ================= */}
|
||||
<section style={{ paddingLeft: '1rem', marginBottom: '1.5rem' }}>
|
||||
<strong style={{ display: 'block', marginBottom: '0.6rem' }}>
|
||||
Beliebte Tiere
|
||||
</strong>
|
||||
|
||||
<div
|
||||
className="hide-scrollbar"
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: '0.8rem',
|
||||
overflowX: 'auto',
|
||||
WebkitOverflowScrolling: 'touch',
|
||||
}}
|
||||
>
|
||||
{trendingPets.map((pet) => (
|
||||
<div key={pet.id} style={{ width: '84px', flex: '0 0 auto' }}>
|
||||
<div
|
||||
style={{
|
||||
width: '84px',
|
||||
height: '84px',
|
||||
borderRadius: '18px',
|
||||
backgroundColor: '#f2f2f2',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '1.4rem',
|
||||
}}
|
||||
>
|
||||
🐾
|
||||
</div>
|
||||
<div style={{ marginTop: '0.4rem', fontSize: '0.72rem' }}>
|
||||
<strong>{pet.name}</strong>
|
||||
<div style={{ color: '#777' }}>{pet.type}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ================= POSTS ================= */}
|
||||
<section
|
||||
style={{
|
||||
padding: '0 1rem 1rem',
|
||||
maxWidth: '720px',
|
||||
margin: '0 auto',
|
||||
}}
|
||||
>
|
||||
<strong style={{ display: 'block', marginBottom: '0.6rem' }}>
|
||||
Neueste Beiträge
|
||||
</strong>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.9rem' }}>
|
||||
{filteredPosts.map((post) => (
|
||||
<article
|
||||
key={post.id}
|
||||
style={{
|
||||
border: '1px solid #eee',
|
||||
borderRadius: '18px',
|
||||
overflow: 'hidden',
|
||||
backgroundColor: 'white',
|
||||
}}
|
||||
>
|
||||
{/* ✅ Nur dieser Bereich öffnet das Modal */}
|
||||
<div
|
||||
onClick={() => setPreviewPost(post)}
|
||||
style={{ cursor: 'pointer' }}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '100%',
|
||||
aspectRatio: '3 / 2',
|
||||
backgroundColor: '#eaeaea',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div style={{ padding: '0.8rem', display: 'grid', gap: '0.35rem' }}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
gap: '0.6rem',
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<strong>{post.petName}</strong>{' '}
|
||||
<span style={{ color: '#777', fontSize: '0.8rem' }}>
|
||||
· {post.petType} · {post.authorName}
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
style={{
|
||||
color: '#777',
|
||||
fontSize: '0.8rem',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
{post.createdAt}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p style={{ margin: 0, fontSize: '0.9rem' }}>{post.text}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ✅ Interaktionszeile (öffnet KEIN Modal) */}
|
||||
<div
|
||||
style={{
|
||||
padding: '0 0.8rem 0.8rem',
|
||||
display: 'flex',
|
||||
gap: '1rem',
|
||||
fontSize: '0.85rem',
|
||||
color: '#555',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
|
||||
const el = e.currentTarget;
|
||||
el.style.animation = 'heart-pop 0.3s ease';
|
||||
el.addEventListener(
|
||||
'animationend',
|
||||
() => {
|
||||
el.style.animation = '';
|
||||
},
|
||||
{ once: true }
|
||||
);
|
||||
|
||||
console.log('LIKE CLICK', post.id);
|
||||
}}
|
||||
style={{
|
||||
border: 'none',
|
||||
background: 'transparent',
|
||||
padding: 0,
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
gap: '0.35rem',
|
||||
alignItems: 'center',
|
||||
color: 'inherit',
|
||||
}}
|
||||
>
|
||||
<span aria-hidden>❤️</span>
|
||||
<span>{post.likesCount}</span>
|
||||
</button>
|
||||
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
|
||||
// Animation
|
||||
const el = e.currentTarget;
|
||||
el.style.animation = 'comment-wiggle 0.25s ease';
|
||||
el.addEventListener(
|
||||
'animationend',
|
||||
() => {
|
||||
el.style.animation = '';
|
||||
},
|
||||
{ once: true }
|
||||
);
|
||||
|
||||
// 👉 LOGIK
|
||||
setOpenComments(true);
|
||||
setPreviewPost(post);
|
||||
}}
|
||||
style={{
|
||||
border: 'none',
|
||||
background: 'transparent',
|
||||
padding: 0,
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
gap: '0.35rem',
|
||||
alignItems: 'center',
|
||||
color: 'inherit',
|
||||
}}
|
||||
>
|
||||
<span aria-hidden>💬</span>
|
||||
<span>{post.commentsCount}</span>
|
||||
</button>
|
||||
|
||||
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ================= PREVIEW MODAL ================= */}
|
||||
{previewPost && (
|
||||
<div
|
||||
onClick={() => setPreviewPost(null)}
|
||||
style={{
|
||||
position: 'fixed',
|
||||
inset: 0,
|
||||
backgroundColor: 'rgba(0,0,0,0.4)',
|
||||
zIndex: 50,
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'flex-end',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onTouchStart={(e) => (startY.current = e.touches[0].clientY)}
|
||||
onTouchEnd={(e) => {
|
||||
if (
|
||||
startY.current &&
|
||||
e.changedTouches[0].clientY - startY.current > 80
|
||||
) {
|
||||
setPreviewPost(null);
|
||||
setOpenComments(false);
|
||||
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
backgroundColor: 'white',
|
||||
width: '100%',
|
||||
maxWidth: '720px',
|
||||
borderTopLeftRadius: '22px',
|
||||
borderTopRightRadius: '22px',
|
||||
padding: '1rem',
|
||||
animation: 'slideUp 0.25s ease',
|
||||
paddingBottom: '5rem',
|
||||
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '36px',
|
||||
height: '4px',
|
||||
borderRadius: '999px',
|
||||
backgroundColor: '#ccc',
|
||||
margin: '0 auto 0.8rem',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{
|
||||
width: '100%',
|
||||
aspectRatio: '3 / 2',
|
||||
backgroundColor: '#eaeaea',
|
||||
borderRadius: '14px',
|
||||
marginBottom: '0.8rem',
|
||||
}}
|
||||
/>
|
||||
|
||||
<strong>{previewPost.petName}</strong>{' '}
|
||||
<span style={{ color: '#777', fontSize: '0.85rem' }}>
|
||||
· {previewPost.petType} · {previewPost.authorName}
|
||||
</span>
|
||||
|
||||
<p style={{ marginTop: '0.6rem' }}>{previewPost.text}</p>
|
||||
{openComments && (
|
||||
<div
|
||||
style={{
|
||||
marginTop: '1rem',
|
||||
paddingTop: '0.8rem',
|
||||
borderTop: '1px solid #eee',
|
||||
}}
|
||||
>
|
||||
<strong style={{ fontSize: '0.9rem' }}>Kommentare</strong>
|
||||
|
||||
<div
|
||||
style={{
|
||||
marginTop: '0.6rem',
|
||||
fontSize: '0.85rem',
|
||||
color: '#666',
|
||||
}}
|
||||
>
|
||||
Noch keine Kommentare.
|
||||
</div>
|
||||
|
||||
<input
|
||||
placeholder="Kommentar schreiben…"
|
||||
style={{
|
||||
marginTop: '0.6rem',
|
||||
width: '100%',
|
||||
padding: '0.6rem 0.8rem',
|
||||
borderRadius: '999px',
|
||||
border: '1px solid #ccc',
|
||||
fontSize: '0.85rem',
|
||||
}}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginTop: '1rem',
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: '0.9rem', color: '#555', display: 'flex', gap: '1rem' }}>
|
||||
<span>❤️ {previewPost.likesCount}</span>
|
||||
<span>💬 {previewPost.commentsCount}</span>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href={`/post/${previewPost.id}`}
|
||||
style={{
|
||||
padding: '0.5rem 0.9rem',
|
||||
borderRadius: '999px',
|
||||
backgroundColor: '#2E7D32',
|
||||
color: 'white',
|
||||
textDecoration: 'none',
|
||||
fontSize: '0.85rem',
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
Zum Beitrag
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -46,4 +46,54 @@ body {
|
||||
.navbar a.active {
|
||||
background-color: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
/* Hide horizontal scrollbar but keep scroll */
|
||||
.hide-scrollbar {
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE / Edge */
|
||||
}
|
||||
|
||||
.hide-scrollbar::-webkit-scrollbar {
|
||||
display: none; /* Chrome / Safari */
|
||||
}
|
||||
@keyframes skeleton {
|
||||
0% { background-position: 100% 0; }
|
||||
100% { background-position: 0 0; }
|
||||
}
|
||||
@keyframes heart-pop {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
40% {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
70% {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes comment-wiggle {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
30% {
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
60% {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+10
-6
@@ -1,5 +1,7 @@
|
||||
import './globals.css';
|
||||
import Navigation from './components/Navigation';
|
||||
/*import Navigation from './components/Navigation';*/
|
||||
import BottomNav from './components/BottomNav/BottomNav';
|
||||
|
||||
|
||||
export const metadata = {
|
||||
title: 'OnlyPets',
|
||||
@@ -14,11 +16,13 @@ export default function RootLayout({
|
||||
return (
|
||||
<html lang="de">
|
||||
<body>
|
||||
<Navigation />
|
||||
<main style={{ padding: '2rem' }}>
|
||||
{children}
|
||||
</main>
|
||||
</body>
|
||||
<div style={{ paddingBottom: '80px' }}>
|
||||
{children}
|
||||
</div>
|
||||
|
||||
<BottomNav />
|
||||
</body>
|
||||
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
import { NextResponse } from 'next/server';
|
||||
import type { NextRequest } from 'next/server';
|
||||
|
||||
export function middleware(request: NextRequest) {
|
||||
const { pathname } = request.nextUrl;
|
||||
|
||||
// 🔐 Simulierter Login-Check
|
||||
// später: Cookie / Session / JWT
|
||||
const isLoggedIn = request.cookies.get('onlypets-auth')?.value === 'true';
|
||||
|
||||
// 🚪 Gast auf Startseite lassen
|
||||
if (!isLoggedIn && pathname === '/') {
|
||||
return NextResponse.next();
|
||||
}
|
||||
|
||||
// 🏠 Eingeloggt? Startseite überspringen → Feed
|
||||
if (isLoggedIn && pathname === '/') {
|
||||
return NextResponse.redirect(new URL('/feed', request.url));
|
||||
}
|
||||
|
||||
// 🔒 Geschützte Seiten
|
||||
const protectedRoutes = [
|
||||
'/feed',
|
||||
'/post',
|
||||
'/pets',
|
||||
'/explore', // 🔍 Entdecken / Neue Beiträge
|
||||
'/profile', // 👤 Eigenes Profil
|
||||
'/user', // 👥 fremde Profile (z. B. /user/123)
|
||||
];
|
||||
|
||||
|
||||
if (!isLoggedIn && protectedRoutes.some((route) => pathname.startsWith(route))) {
|
||||
return NextResponse.redirect(new URL('/login', request.url));
|
||||
}
|
||||
|
||||
// 🔄 Login-Seite für eingeloggte User blocken
|
||||
if (isLoggedIn && pathname === '/login') {
|
||||
return NextResponse.redirect(new URL('/feed', request.url));
|
||||
}
|
||||
|
||||
return NextResponse.next();
|
||||
}
|
||||
Reference in New Issue
Block a user