import { useEffect } from "react";
import Header from "../components/Header";
import Navigation from "../components/Navigation";
import Footer from "../components/Footer";
import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
  // Client-seitige Logik kann hier hinzugefügt werden
  useEffect(() => {
    if (typeof window !== "undefined") {
      console.log("Client-side logic can run here.");
    }
  }, []);

  return (
    <div className="bg-gray-100 flex flex-col min-h-screen overflow-hidden">
      <Header />
      <div className="flex flex-grow w-full">
        {" "}
        {/* Flexbox-Container für Navigation und Content */}
        <Navigation className="w-1/5" />{" "}
        {/* Navigation nimmt 20% der Breite ein */}
        <main className="flex-1 p-4">
          {" "}
          {/* Der Content nimmt den restlichen Platz ein */}
          <Component {...pageProps} />
        </main>
      </div>
      <Footer />
    </div>
  );
}

export default MyApp;