feat: Navigation dar und light mode

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

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}