Fixed css of navbar and variable itemcard postion

01-frontend/src/App.css

@@ -36,4 +36,8 @@
 
 .read-the-docs {
   color: #888;
+}
+
+.navbar-offset {
+  height: 3rem;
 }

01-frontend/src/App.tsx

@@ -14,6 +14,7 @@ export default function App() {
     <BasketProvider>
       <BrowserRouter>
         <NavBar />
+        <div className='navbar-offset' />
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="*" element={<NoPage />} />

01-frontend/src/helper/NavBar.css

@@ -2,6 +2,9 @@
 .navbar {
     background-color: #1976d2; /* Material-UI Primary Color */
     box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+    position: absolute;
+    top: 0;
+    height: 3rem;
 }
 
 /* Logo styles */
@@ -61,7 +64,7 @@
 
 /* Button styles */
 .navbar-button {
-    my: 2;
+    margin: 2;
     color: white;
     display: block;
 }

01-frontend/src/helper/NavBar.tsx

@@ -170,7 +170,7 @@ export default function NavBar() {
                             textDecoration: 'none',
                         }}
                     >
-                        LOGO
+                        DPS
                     </Typography>
                     <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
                         {pages.map((page) => (

01-frontend/src/pages/Home.tsx

@@ -1,7 +1,7 @@
 import { Box, Pagination } from "@mui/material";
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
-import ItemCard from "../helper/ItemCard";
 import Item from "../components/Item";
+import ItemCard from "../helper/ItemCard";
 import "./pages.css"; // Import der CSS-Datei
 
 export default function Home() {
@@ -131,44 +131,42 @@ export default function Home() {
 
     const [currentPage, setCurrentPage] = useState(1); // Zustand für die aktuelle Seite
     const [itemsPerPage, setItemsPerPage] = useState(9); // Dynamische Anzahl der Items pro Seite
+    const [visibleItems, setVisibleItems] = useState<Item[]>([]); // Zustand für die sichtbaren Items
 
-    // Berechnung der angezeigten Items basierend auf der aktuellen Seite
-    const indexOfLastItem = currentPage * itemsPerPage;
-    const indexOfFirstItem = indexOfLastItem - itemsPerPage;
-    const currentItems = items.slice(indexOfFirstItem, indexOfLastItem);
 
     // Handler für die Pagination
     const handlePageChange = (event: React.ChangeEvent<unknown>, page: number) => {
         setCurrentPage(page);
     };
 
+    // Aktualisiere die Anzahl der Karten bei Größenänderung
+    useEffect(() => {
+        const updateItems = () => {
+            const newItemsPerPage = calculateItemsPerPage();
+            setItemsPerPage(newItemsPerPage);
+            const startIndex = (currentPage - 1) * newItemsPerPage;
+            setVisibleItems(items.slice(startIndex, startIndex + newItemsPerPage));
+        };
+    
+        updateItems(); // Initialer Aufruf
+        window.addEventListener("resize", updateItems); // Event-Listener hinzufügen
+        return () => window.removeEventListener("resize", updateItems); // Event-Listener entfernen
+    }, [currentPage]);
+
     // Dynamische Berechnung der Anzahl der Items pro Seite basierend auf der Fensterbreite
     const calculateItemsPerPage = () => {
-        const width = window.innerWidth;
+        const cardHeight = 250; // Höhe einer Karte (inkl. Margin/Padding)
-        const columns = Math.floor(width / 300); // Jede Spalte ist ca. 300px breit
+    const paginationHeight = 50; // Höhe der Pagination
-        const rows = Math.floor(window.innerHeight / 400); // Jede Zeile ist ca. 400px hoch
+    const availableHeight = window.innerHeight - paginationHeight - 60; // Verfügbare Höhe (inkl. Padding)
-        return columns * rows;
+    const itemsPerRow = Math.floor(window.innerWidth / 220); // Karten pro Zeile (220px Breite inkl. Margin)
+    const rows = Math.floor(availableHeight / cardHeight); // Maximale Anzahl an vollständigen Reihen
+    return itemsPerRow * rows;
     };
 
-    useEffect(() => {
-        const updateItemsPerPage = () => {
-            setItemsPerPage(calculateItemsPerPage());
-        };
-
-        // Initiale Berechnung und Event-Listener hinzufügen
-        updateItemsPerPage();
-        window.addEventListener("resize", updateItemsPerPage);
-
-        // Event-Listener entfernen, wenn die Komponente unmountet wird
-        return () => {
-            window.removeEventListener("resize", updateItemsPerPage);
-        };
-    }, []);
-
     return (
         <div className="page-background">
             <Box className="cardgrid">
-                {currentItems.map((item) => (
+                {visibleItems.map((item) => (
                     <ItemCard key={item.id} item={item} />
                 ))}
             </Box>

01-frontend/src/pages/pages.css

@@ -43,14 +43,15 @@
 }
 
 .cardgrid {
-    display: grid;
+  display: grid;
-    gap: 2%;
+  gap: 2%;
-    width: 90%;
+  width: 90%;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Dynamische Spalten */
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Dynamische Spalten */
-    padding: 16px;
+  padding: 16px;
-    margin-top: auto;
+  margin: 0 auto;
-    max-height: calc(100vh - 200px); /* Dynamische Höhe, abhängig von anderen Inhalten */
+  max-height: calc(100vh - 300px); /* Dynamische Höhe, abhängig von der Pagination */
-    margin: 0 auto;
+  box-sizing: border-box; /* Stellt sicher, dass Padding in die Breite einbezogen wird */
+  
 }
 
 .page-background {
@@ -60,7 +61,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
+    justify-content: space-between;
     overflow: hidden;
     padding: 20px 0; /* Abstand oben und unten */
     box-sizing: border-box; /* Stellt sicher, dass Padding in die Höhe einbezogen wird */
@@ -69,5 +70,6 @@
 .pagination {
     display: flex;
     justify-content: center;
-    margin-top: 5%;
+    /*margin-top: 5%;*/
+    flex-shrink: 0;
 }