Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: header, navigation und _app.tsx

Browse Source
This commit is contained in:
ISA
2025-09-10 13:33:23 +02:00
parent 05b416855b
commit 95c884bc07
8 changed files with 19 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@@ -6,6 +6,6 @@ NEXT_PUBLIC_USE_MOCK_BACKEND_LOOP_START=false
NEXT_PUBLIC_EXPORT_STATIC=false NEXT_PUBLIC_EXPORT_STATIC=false
NEXT_PUBLIC_USE_CGI=false NEXT_PUBLIC_USE_CGI=false
# App-Versionsnummer # 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) NEXT_PUBLIC_CPL_MODE=json # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)

2
.env.production
View File

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

5
CHANGELOG.md
View File

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

2
components/header/Header.tsx
View File

@@ -145,7 +145,7 @@ function Header() {
}, []); }, []);
return ( 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 <div
className="absolute transform -translate-y-1/2 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: left-[8%] sm:left-[8%] md:left-[8%] lg:left-[8%] xl:left-[6%] 2xl:left-[2%] laptop:left-[4%] laptop:

4
components/navigation/Navigation.tsx
View File

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

4
package-lock.json generated
View File

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

2
package.json
View File

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

9
pages/_app.tsx
View File

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