Fix Navbar and Scroll stuff

01-frontend/src/App.css

@@ -2,6 +2,8 @@
 :root {
   --background-color: #fafafa;
   --text-color: #000000;
+  --navbar-height: 6vh;
+  --page-height: 94vh;
 }
 
 #root {
@@ -56,10 +58,6 @@ html, body {
   border-radius: 8px;
 }
 
-.navbar-offset {
-  height: 3rem;
-}
-
 .read-the-docs {
   opacity: 0.7;
 }

01-frontend/src/helper/navbar/NavBar.css

@@ -1,11 +1,14 @@
 /* Navbar styles */
+
 .navbar {
-    background-color: green; /* Material-UI Primary Color */
+    /*color in tsx*/
     box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
-    position: absolute;
+    position: fixed;
     top: 0;
     width: 100%;
     overflow-x: hidden;
+    z-index: 10000;
+    height: var(--navbar-height);
 }
 
 /* Logo styles */
@@ -68,4 +71,8 @@
     margin: 2;
     color: white;
     display: block;
+}
+
+.navbar-offset {
+    height: var(--navbar-height);
 }

01-frontend/src/helper/navbar/NavBar.tsx

@@ -97,7 +97,7 @@ export default function NavBar() {
         setItemNames(items.map((item) => item.name));
     }, [items]);
 
-    const handleSearch = (event: React.SyntheticEvent, value: string | null) => {
+    const handleSearch = (_: React.SyntheticEvent, value: string | null) => {
 
         if (!value) {
             // Wenn der Suchwert leer ist, navigiere zur Homepage ohne Suchparameter
@@ -110,7 +110,7 @@ export default function NavBar() {
 
     return (
         <>
-        <AppBar position="static" color="primary" elevation={4}>
+        <AppBar className="navbar" color="primary" elevation={4}>
             <Toolbar
                 disableGutters
                 sx={{
@@ -243,6 +243,7 @@ export default function NavBar() {
             loginData={loginData}
             setLoginData={setLoginData}
         />
+            <div className="navbar-offset"/>
             </>
     );
 }

01-frontend/src/pages/Account.tsx

@@ -70,7 +70,7 @@ export default function Account() {
     };
 
     return (
-        <Box className="page-background" sx={{ minHeight: "100vh", justifyContent: "flex-start", pt: 4 }}>
+        <Box className="page-background page-background-center" sx={{ minHeight: "100vh", justifyContent: "flex-start", pt: 4 }}>
             <Paper elevation={3} sx={{ p: 4, maxWidth: 500, width: "100%", mx: "auto" }}>
                 <Typography variant="h4" gutterBottom>
                     {t('myAccount')}

01-frontend/src/pages/AdminPanel.tsx

@@ -57,18 +57,16 @@ export default function AdminPanel() {
 
     return (
         <Box className="page-container" sx={{ color: theme.palette.text.primary }}>
-
-            <Box sx={{ display: "flex", gap: 4, mt: 4 }}>
+            <div
+                className="home-page-background"
+                style={{
+                    color: theme.palette.text.primary,
+                    backgroundColor: theme.palette.background.paper
+                }}
+            >
                 {/* Sidebar */}
                 <Box
-                    sx={{
-                        width: "100%",
-                        maxWidth: 280,
-                        bgcolor: theme.palette.background.paper,
-                        border: `1px solid ${theme.palette.divider}`,
-                        borderRadius: 2,
-                        boxShadow: 1,
-                    }}
+                    className="sidebar"
                 >
                     <nav aria-label="main admin menu">
                         <List>
@@ -97,8 +95,8 @@ export default function AdminPanel() {
                 </Box>
 
                 {/* Content */}
-                <Box sx={{ flexGrow: 1 }}>{renderContent()}</Box>
-            </Box>
+                <Box className="page-background" pt={4}>{renderContent()}</Box>
+            </div>
         </Box>
     );
 }

01-frontend/src/pages/Home.tsx

@@ -188,7 +188,7 @@ export default function Home() {
             className="home-page-background"
             style={{ backgroundColor: theme.palette.homepage }}
         >
-            <div className="filter-container">
+            <div className="sidebar sidebar-filter">
                 <FilterItem
                     filterName={t("category")}
                     filterItems={categoriesFilter}
@@ -209,7 +209,7 @@ export default function Home() {
                     onChange={handleRatingChange}
                 />
             </div>
-            <div className="page-background" ref={containerRef}>
+            <div className="page-background page-background-center" ref={containerRef}>
                 <Box className="cardgrid">
                     {visibleItems.length === 0 ? (
                         <Alert variant="filled" severity="warning" className="no-results">{t('noItemsFound')}</Alert>

01-frontend/src/pages/Orders.tsx

@@ -8,7 +8,7 @@ const mockOrders: OrderType[] = [
     {
         id: "1001",
         date: "2025-05-20",
-        status: "active",
+        status: "IN_PROGRESS",
         items: [
             { name: "Tomatensamen", quantity: 2, price: 3.99 },
             { name: "Blumenerde", quantity: 1, price: 7.49 }
@@ -19,7 +19,7 @@ const mockOrders: OrderType[] = [
     {
         id: "1000",
         date: "2025-05-10",
-        status: "inactive",
+        status: "ISSUES",
         items: [
             { name: "Gießkanne", quantity: 1, price: 12.99 }
         ],
@@ -35,8 +35,8 @@ export default function Orders() {
     const [tab, setTab] = useState(0);
     const [selectedOrder, setSelectedOrder] = useState<OrderType | null>(null);
 
-    const activeOrders = mockOrders.filter(o => o.status === "active");
-    const inactiveOrders = mockOrders.filter(o => o.status === "inactive");
+    const activeOrders = mockOrders.filter(o => o.status === "IN_PROGRESS");
+    const inactiveOrders = mockOrders.filter(o => o.status === "ISSUES");
 
     const handleTabChange = (_: React.SyntheticEvent, newValue: number) => setTab(newValue);
 
@@ -47,7 +47,7 @@ export default function Orders() {
     };
 
     return (
-        <Box className="page-background" sx={{ minHeight: "100vh", pt: 4 }}>
+        <Box className="page-background page-background-center" sx={{ minHeight: "100vh", pt: 4 }}>
             <Paper elevation={3} sx={{ p: 4, maxWidth: 700, width: "100%", mx: "auto" }}>
                 <Typography variant="h4" gutterBottom>
                     {t('myOrders')}
@@ -91,7 +91,7 @@ export default function Orders() {
 
                 <Dialog open={!!selectedOrder} onClose={() => setSelectedOrder(null)} maxWidth="sm" fullWidth>
                     <DialogTitle>
-                        {`${selectedOrder?.status === "active" ? t('activeOrder') : t('previousOrder')} #${selectedOrder?.id}`}
+                        {`${selectedOrder?.status === "IN_PROGRESS" ? t('activeOrder') : t('previousOrder')} #${selectedOrder?.id}`}
                     </DialogTitle>
                     <DialogContent dividers>
                         {selectedOrder && (
@@ -115,7 +115,7 @@ export default function Orders() {
                         )}
                     </DialogContent>
                     <DialogActions>
-                        {selectedOrder?.status === "active" && (
+                        {selectedOrder?.status === "IN_PROGRESS" && (
                             <Button color="error" onClick={() => handleCancelOrder(selectedOrder.id)}>
                                 {t('cancelOrder')}
                             </Button>

01-frontend/src/pages/pages.css

@@ -54,12 +54,9 @@
 
 .page-background {
     background-color: var(--background-color);
-    height: 100vh;
-    min-height: 600px;
+    min-height: var(--page-height);
     display: flex;
     flex-direction: column;
-    align-items: center;
-    justify-content: space-between;
     overflow: auto;
     padding: 20px 0;
     box-sizing: border-box;
@@ -67,6 +64,11 @@
     color: var(--text-color);
 }
 
+.page-background-center {
+    align-items: center;
+    justify-content: space-between;
+}
+
 .page-background.page-background--no-space-between {
     justify-content: flex-start !important;
 }
@@ -132,12 +134,16 @@
     color: var(--text-color);
 }
 
-.filter-container {
+.sidebar {
     width: fit-content;
     display: grid;
-    margin: 20px 30px;
     place-self: start;
     white-space: nowrap;
+    margin-top: 2vh;
+}
+
+.sidebar-filter {
+    margin: 30px
 }
 
 .loader-container {