style: header, navigation und _app.tsx

.env.development

@@ -6,6 +6,6 @@ NEXT_PUBLIC_USE_MOCK_BACKEND_LOOP_START=false
 NEXT_PUBLIC_EXPORT_STATIC=false
 NEXT_PUBLIC_USE_CGI=false
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.901
+NEXT_PUBLIC_APP_VERSION=1.6.902
 NEXT_PUBLIC_CPL_MODE=json   # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)
 

.env.production

@@ -5,5 +5,5 @@ NEXT_PUBLIC_CPL_API_PATH=/CPL
 NEXT_PUBLIC_EXPORT_STATIC=true
 NEXT_PUBLIC_USE_CGI=true
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.901
+NEXT_PUBLIC_APP_VERSION=1.6.902
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [1.6.902] – 2025-09-10
+
+- style: Header wie Footer Hintergrundfarbe
+
+---
 ## [1.6.901] – 2025-09-10
 
 - style: Header wie Footer Hintergrunffarbe

components/header/Header.tsx

@@ -145,7 +145,7 @@ function Header() {
   }, []);
 
   return (
-    <header className="bg-[var(--color-surface-alt)] dark:bg-[var(--color-surface-alt)] flex justify-between items-center w-full h-[13vh] laptop:h-[10vh] relative text-[var(--color-fg)] shadow-sm border-b border-base theme-transition">
+    <header className="bg-[var(--color-surface-alt)] dark:bg-[var(--color-surface-alt)] flex justify-between items-center w-full h-[13vh] laptop:h-[10vh] relative text-[var(--color-fg)]  border-b border-base theme-transition">
       <div
         className="absolute transform -translate-y-1/2 
                 left-[8%] sm:left-[8%] md:left-[8%] lg:left-[8%] xl:left-[6%] 2xl:left-[2%] laptop:left-[4%] laptop:

components/navigation/Navigation.tsx

@@ -36,8 +36,8 @@ const Navigation: React.FC<NavigationProps> = ({ className }) => {
   ];
 
   return (
-    <aside className="h-full bg-[var(--color-surface)] dark:bg-[var(--color-surface)] border-r border-[var(--color-border)]">
-      <nav className={`h-full flex-shrink-0 mt-16 ${className || "w-48"}`}>
+    <aside className="h-full bg-[var(--color-surface)] dark:bg-[var(--color-surface)] ">
+      <nav className={`h-full flex-shrink-0 mt-24 ${className || "w-48"}`}>
         {menuItems.map((item) => (
           <div key={item.name}>
             {item.disabled ? (

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.901",
+  "version": "1.6.902",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cpl-v4",
-      "version": "1.6.901",
+      "version": "1.6.902",
       "dependencies": {
         "@emotion/react": "^11.13.0",
         "@emotion/styled": "^11.13.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.901",
+  "version": "1.6.902",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3000",

pages/_app.tsx

@@ -47,7 +47,10 @@ function MyApp({ Component, pageProps }: AppProps) {
   const [theme, setTheme] = useState(muiTheme);
   useEffect(() => {
     const observer = new MutationObserver(() => setTheme(buildTheme()));
-    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
     return () => observer.disconnect();
   }, []);
   return (
@@ -160,8 +163,8 @@ function AppContent({
     <div className="flex flex-col h-screen overflow-hidden bg-[var(--color-background)] text-[var(--color-fg)]">
       <Header />
       <div className="flex flex-grow w-full">
-        <Navigation className="w-56" />
-        <main className="w-full flex-grow bg-[var(--color-surface)] dark:bg-[var(--color-surface)] border-l border-[var(--color-border)]">
+        <Navigation className="w-56 mr-8" />
+        <main className="w-full flex-grow bg-[var(--color-surface)] dark:bg-[var(--color-surface)] border border-base rounded-lg m-1 p-1 overflow-auto relative">
           {sessionExpired && (
             <div className="bg-red-500 text-white p-4 text-center">
               ❌ Ihre Sitzung ist abgelaufen oder die Verbindung ist