mobile

src/components/Layout.tsx

@@ -1,25 +1,40 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
+import React, { useState, useEffect } from 'react';
+import { Link, useLocation, NavLink } from 'react-router-dom';
+import { Home, Info, Mail, ArrowUp } from 'lucide-react';
 
 const Layout = ({ children }: { children: React.ReactNode }) => {
+  const location = useLocation();
+  const [showScrollTop, setShowScrollTop] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setShowScrollTop(window.scrollY > 400);
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
   return (
     <div className="layout">
-      <header style={{ 
-        position: 'sticky', 
-        top: 0, 
-        zIndex: 100, 
-        background: 'rgba(248, 249, 250, 0.95)', 
-        backdropFilter: 'blur(10px)',
-        borderBottom: '1px solid var(--secondary-bg)'
-      }}>
-        <div className="container" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+      <header>
+        <div className="container">
           <Link to="/" style={{ display: 'flex', alignItems: 'center' }}>
             <img src="/assets/logo.png" alt="MB Grid Solutions" style={{ height: '60px' }} />
           </Link>
           <nav style={{ display: 'flex', gap: '2rem' }}>
-            <Link to="/" className="nav-link">Startseite</Link>
-            <Link to="/ueber-uns" className="nav-link">Über uns</Link>
-            <Link to="/kontakt" className="nav-link">Kontakt</Link>
+            <NavLink to="/" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}>
+              Startseite
+            </NavLink>
+            <NavLink to="/ueber-uns" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}>
+              Über uns
+            </NavLink>
+            <NavLink to="/kontakt" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}>
+              Kontakt
+            </NavLink>
           </nav>
         </div>
       </header>
@@ -28,6 +43,31 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
         {children}
       </main>
 
+      {showScrollTop && (
+        <button 
+          onClick={scrollToTop}
+          className="scroll-top-btn"
+          aria-label="Scroll to top"
+        >
+          <ArrowUp size={24} />
+        </button>
+      )}
+
+      <nav className="mobile-nav">
+        <NavLink to="/" className={({ isActive }) => `mobile-nav-link ${isActive ? 'active' : ''}`}>
+          <Home size={20} />
+          <span>Start</span>
+        </NavLink>
+        <NavLink to="/ueber-uns" className={({ isActive }) => `mobile-nav-link ${isActive ? 'active' : ''}`}>
+          <Info size={20} />
+          <span>Über uns</span>
+        </NavLink>
+        <NavLink to="/kontakt" className={({ isActive }) => `mobile-nav-link ${isActive ? 'active' : ''}`}>
+          <Mail size={20} />
+          <span>Kontakt</span>
+        </NavLink>
+      </nav>
+
       <footer style={{ borderTop: '1px solid var(--secondary-bg)', padding: '4rem 0', marginTop: '4rem', background: 'white' }}>
         <div className="container">
           <div className="grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', marginBottom: '3rem' }}>