Fix Page Transition and Mobile Version.
This commit is contained in:
+60
-30
@@ -1,14 +1,13 @@
|
||||
// components/Layout.tsx
|
||||
import { useEffect, useState, ReactNode } from "react";
|
||||
import { useEffect, useState, ReactNode, useCallback } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { Menu, X, Home, User, Briefcase, BookOpen, Phone, LayoutDashboard } from "lucide-react";
|
||||
import { supabase } from "../utils/supabaseClient";
|
||||
import { ContactInfo } from "../components/ContactInfo";
|
||||
import { NavLink } from "../components/NavLink";
|
||||
import { ContactInfo } from "./ContactInfo";
|
||||
import { NavLink } from "./NavLink";
|
||||
import LanguageSwitcher from "./LanguageSwitcher";
|
||||
import { Link } from "react-router-dom";
|
||||
import Footer from "./Footer";
|
||||
import { Link, useLocation } from "react-router-dom";
|
||||
|
||||
interface LayoutProps {
|
||||
children: ReactNode;
|
||||
@@ -19,6 +18,38 @@ const Layout = ({ children }: LayoutProps) => {
|
||||
const [isAdmin, setIsAdmin] = useState(false);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
const location = useLocation();
|
||||
|
||||
// Memoized toggle function
|
||||
const toggleMenu = useCallback((force?: boolean) => {
|
||||
setIsOpen(prev => typeof force === 'boolean' ? force : !prev);
|
||||
}, []);
|
||||
|
||||
// Route change handler
|
||||
useEffect(() => {
|
||||
toggleMenu(false);
|
||||
}, [location.pathname, toggleMenu]);
|
||||
|
||||
// Scroll lock effect
|
||||
useEffect(() => {
|
||||
const body = document.body;
|
||||
if (isOpen) {
|
||||
const scrollY = window.scrollY;
|
||||
body.style.position = 'fixed';
|
||||
body.style.top = `-${scrollY}px`;
|
||||
body.style.width = '100%';
|
||||
body.style.overflow = 'hidden';
|
||||
} else {
|
||||
const scrollY = body.style.top;
|
||||
body.style.position = '';
|
||||
body.style.top = '';
|
||||
body.style.width = '';
|
||||
body.style.overflow = '';
|
||||
if (scrollY) {
|
||||
window.scrollTo(0, parseInt(scrollY || '0') * -1);
|
||||
}
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
const checkAdmin = async () => {
|
||||
@@ -71,7 +102,7 @@ const Layout = ({ children }: LayoutProps) => {
|
||||
<div className="min-h-screen bg-zinc-900 flex flex-col">
|
||||
<nav
|
||||
className={`
|
||||
fixed w-full z-50 transition-all duration-300
|
||||
fixed w-full z-[80] transition-all duration-300
|
||||
${scrolled
|
||||
? "bg-zinc-900/80 backdrop-blur supports-[backdrop-filter]:bg-zinc-900/80"
|
||||
: "bg-transparent"
|
||||
@@ -91,7 +122,6 @@ const Layout = ({ children }: LayoutProps) => {
|
||||
transition={{ type: "spring", stiffness: 400, damping: 10 }}
|
||||
/>
|
||||
</Link>
|
||||
|
||||
<div className="hidden md:flex items-center gap-2">
|
||||
{navigationLinks.map(({ path, label, icon }) => (
|
||||
<NavLink key={path} to={path} icon={icon} label={label} className="text-sm" />
|
||||
@@ -100,10 +130,9 @@ const Layout = ({ children }: LayoutProps) => {
|
||||
<LanguageSwitcher />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<motion.button
|
||||
className="md:hidden p-2 rounded-lg text-zinc-400 hover:text-white hover:bg-zinc-800/50 transition-colors"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="md:hidden relative z-[85] p-2 rounded-lg text-zinc-400 hover:text-white hover:bg-zinc-800/50 transition-colors"
|
||||
onClick={() => toggleMenu()}
|
||||
aria-expanded={isOpen}
|
||||
aria-controls="mobile-menu"
|
||||
aria-label={isOpen ? "Close menu" : "Open menu"}
|
||||
@@ -122,31 +151,33 @@ const Layout = ({ children }: LayoutProps) => {
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="fixed inset-0 bg-black/50 md:hidden"
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="fixed inset-0 bg-black/50 md:hidden z-[75]"
|
||||
onClick={() => toggleMenu(false)}
|
||||
/>
|
||||
<motion.div
|
||||
initial={{ x: "100%" }}
|
||||
animate={{ x: 0 }}
|
||||
exit={{ x: "100%" }}
|
||||
transition={{ type: "spring", stiffness: 300, damping: 30 }}
|
||||
className="fixed right-0 top-16 h-[calc(100vh-4rem)] w-80 bg-zinc-900 shadow-xl md:hidden overflow-y-auto border-l border-zinc-800"
|
||||
className="fixed right-0 top-0 h-full w-80 bg-zinc-900 shadow-xl md:hidden overflow-y-auto border-l border-zinc-800 z-[75]"
|
||||
>
|
||||
<div className="flex flex-col h-full">
|
||||
<ContactInfo />
|
||||
<div className="flex-1 py-4 px-4">
|
||||
{navigationLinks.map(({ path, label, icon }) => (
|
||||
<NavLink
|
||||
key={path}
|
||||
to={path}
|
||||
icon={icon}
|
||||
label={label}
|
||||
onClick={() => setIsOpen(false)}
|
||||
className="flex items-center w-full mb-1"
|
||||
/>
|
||||
))}
|
||||
<div className="flex flex-col h-full pt-16">
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<ContactInfo />
|
||||
<div className="py-4 px-4">
|
||||
{navigationLinks.map(({ path, label, icon }) => (
|
||||
<NavLink
|
||||
key={path}
|
||||
to={path}
|
||||
icon={icon}
|
||||
label={label}
|
||||
onClick={() => toggleMenu(false)}
|
||||
className="flex items-center w-full mb-1"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t border-zinc-800 p-6">
|
||||
<div className="border-t border-zinc-800 p-6 mt-auto">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-zinc-500">Sprache ändern</span>
|
||||
<LanguageSwitcher />
|
||||
@@ -158,10 +189,9 @@ const Layout = ({ children }: LayoutProps) => {
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</nav>
|
||||
<main className="flex-1 pt-16">{children}</main>
|
||||
<Footer />
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
export default Layout;
|
||||
Reference in New Issue
Block a user