From b2eb899793743ab249a1bb7382b0dd75cdc632f1 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Thu, 23 Jan 2025 07:29:41 +0100
Subject: [PATCH] =?UTF-8?q?fix(layout):=20Anpassung=20des=20Layouts=20f?=
 =?UTF-8?q?=C3=BCr=20Laptop-Aufl=C3=B6sung=20(1348x635)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Header und Footer mit festen Höhen (13vh und 8vh) versehen.
- Inhaltsbereich dynamisch skaliert mit calc(100vh - Header - Footer).
- Navigation für volle Höhe des Inhalts angepasst.
- Alle Elemente ohne Scrollen auf Laptop-Auflösung sichtbar gemacht.
---
 components/Footer.jsx     | 2 +-
 components/Header.jsx     | 2 +-
 components/Navigation.jsx | 2 +-
 pages/_app.js             | 4 ++--
 pages/dashboard.js        | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/Footer.jsx b/components/Footer.jsx
index cbda914..a8432de 100644
--- a/components/Footer.jsx
+++ b/components/Footer.jsx
@@ -52,7 +52,7 @@ function Footer() {
   }, [showSlider]);
 
   return (
-    <footer className="relative bg-gray-300 p-4 xl:p-2 2xl:p-4 overflow-hidden text-black">
+    <footer className="relative bg-gray-300 p-4 xl:p-2 2xl:p-4 overflow-hidden text-black laptop:h-[7vh] ">
       <div className="container mx-auto flex justify-between">
         <div className="flex flex-row space-x-2">
           <Icon
diff --git a/components/Header.jsx b/components/Header.jsx
index 3a2e818..e2a43d6 100644
--- a/components/Header.jsx
+++ b/components/Header.jsx
@@ -49,7 +49,7 @@ function Header() {
   }, [isAdminLoggedIn]);
 
   return (
-    <header className="bg-gray-300 flex justify-between items-center w-full h-[12vh] sm:h-[11vh] md:h-[12vh] lg:h-[13vh] xl:h-[12vh] relative text-black mb-16 sm:mb-1 md:mb-1 lg:mb-1 xl:mb-1 2xl:mb-12">
+    <header className="bg-gray-300 flex justify-between items-center w-full h-[13vh] relative text-black ">
       <div
         className="absolute transform -translate-y-1/2 
                 left-[8%] sm:left-[8%] md:left-[8%] lg:left-[8%] xl:left-[6%]
diff --git a/components/Navigation.jsx b/components/Navigation.jsx
index 8fca11f..f76d412 100644
--- a/components/Navigation.jsx
+++ b/components/Navigation.jsx
@@ -26,7 +26,7 @@ function Navigation() {
 
   return (
     <aside>
-      <nav className="w-48 sm:w-12 md:w-28 lg:w-32 xl:w-40 2xl:w-64 flex-shrink-0 mt-32 overflow-hidden">
+      <nav className="w-48 h-full flex-shrink-0 mt-16">
         {menuItems.map((item) => (
           <Link href={formatPath(item.path)} key={item.name}>
             <div
diff --git a/pages/_app.js b/pages/_app.js
index 0438d5c..b54ca34 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -38,11 +38,11 @@ function MyApp({ Component, pageProps }) {
 
   return (
     <Provider store={store}>
-      <div className="bg-gray-100 flex flex-col min-h-screen overflow-hidden">
+      <div className="flex flex-col min-h-screen">
         <Header />
         <div className="flex flex-grow w-full">
           <Navigation className="w-1/5" />
-          <main className="w-full">
+          <main className="w-full flex-grow">
             {sessionExpired && (
               <div className="bg-red-500 text-white p-4 text-center">
                 Ihre Sitzung ist abgelaufen oder die Verbindung ist
diff --git a/pages/dashboard.js b/pages/dashboard.js
index 0fca4a9..24eb0e2 100644
--- a/pages/dashboard.js
+++ b/pages/dashboard.js
@@ -100,7 +100,7 @@ function Dashboard() {
   };
 
   return (
-    <div className="flex flex-col gap-4 p-4 2xl:h-full xl:h-full laptop:h-[80%] overflow-auto">
+    <div className="flex flex-col gap-4 p-4 h-[calc(100vh-13vh-8vh)]">
       <div className="flex justify-between items-center w-full lg:w-2/3">
         <div className="flex justify-between gap-1  ">
           <Icon