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

feat: Navigation dar und light mode

Browse Source
This commit is contained in:
ISA
2025-08-18 14:24:16 +02:00
parent 8097246049
commit 710d780a3a
8 changed files with 42 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
components/header/Header.tsx
View File

@@ -1,5 +1,6 @@
"use client"; // components/Header.jsx
import React, { useState, useEffect } from "react";
import { Icon } from "@iconify/react";
import Image from "next/image";
import { useRouter } from "next/router";
import "bootstrap-icons/font/bootstrap-icons.css";
@@ -56,8 +57,21 @@ function Header() {
}, [deviceName, dispatch]);
//----------------------------------------------------------------
// Dark/Light Mode Toggle
const [isDark, setIsDark] = useState(false);
useEffect(() => {
if (typeof window !== "undefined") {
const html = document.documentElement;
if (isDark) {
html.classList.add("dark");
} else {
html.classList.remove("dark");
}
}
}, [isDark]);
return (
<header className="bg-gray-300 flex justify-between items-center w-full h-[13vh] laptop:h-[10vh] relative text-black ">
<header className="bg-gray-300 dark:bg-gray-800 flex justify-between items-center w-full h-[13vh] laptop:h-[10vh] relative text-black dark:text-white ">
<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:
@@ -98,16 +112,20 @@ function Header() {
</div>
<div className="p-4 w-full lg:w-full flex flex-row gap-4 justify-between">
<div className="flex items-center justify-end w-full">
{/* Admin-Login */}
{/*
<div className="flex items-center justify-end w-full gap-4">
{/* Dark/Light Mode Toggle */}
<button
onClick={handleSettingsClick}
className="text-3xl text-black mr-0"
aria-label={isDark ? "Light Mode" : "Dark Mode"}
onClick={() => setIsDark((d) => !d)}
className="rounded-full p-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition"
title={isDark ? "Light Mode" : "Dark Mode"}
>
<i className="bi bi-gear"></i>
{isDark ? (
<Icon icon="mdi:weather-night" className="text-xl text-yellow-300" />
) : (
<Icon icon="mdi:white-balance-sunny" className="text-xl text-yellow-500" />
)}
</button>
*/}
</div>
{/* Logout-Button - nur anzeigen wenn Admin eingeloggt ist */}

10
components/navigation/Navigation.tsx
View File

@@ -36,23 +36,23 @@ const Navigation: React.FC<NavigationProps> = ({ className }) => {
];
return (
<aside>
<aside className="bg-white dark:bg-gray-900 h-full">
<nav className={`h-full flex-shrink-0 mt-16 ${className || "w-48"}`}>
{menuItems.map((item) => (
<div key={item.name}>
{item.disabled ? (
<div className="block px-4 py-2 mb-4 font-bold whitespace-nowrap text-gray-400 cursor-not-allowed text-[1rem] sm:text-[1rem] md:text-[1rem] lg:text-[1rem] xl:text-sm 2xl:text-lg">
<div className="block px-4 py-2 mb-4 font-bold whitespace-nowrap text-gray-400 dark:text-gray-600 cursor-not-allowed text-[1rem] sm:text-[1rem] md:text-[1rem] lg:text-[1rem] xl:text-sm 2xl:text-lg">
{item.name}
</div>
) : (
<Link
href={formatPath(item.path)}
prefetch={false}
onClick={() => setActiveLink(item.path)} // Sofortige visuelle Rückmeldung
onClick={() => setActiveLink(item.path)}
className={`block px-4 py-2 mb-4 font-bold whitespace-nowrap transition duration-300 text-[1rem] sm:text-[1rem] md:text-[1rem] lg:text-[1rem] xl:text-sm 2xl:text-lg ${
activeLink.startsWith(item.path)
? "bg-sky-500 text-white rounded-r-full xl:mr-4 xl:w-full"
: "text-black hover:bg-gray-200 rounded-r-full"
? "bg-sky-500 text-white rounded-r-full xl:mr-4 xl:w-full dark:bg-sky-600 dark:text-white"
: "text-black hover:bg-gray-200 rounded-r-full dark:text-gray-200 dark:hover:bg-gray-800"
}`}
>
{item.name}