jonny
/
MBO-Tech-IT-Webseite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add ThemeToggle to Header, apply light mode classes 

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
MBO-Tech-IT 2026-04-26 16:42:25 +02:00
parent 99d0a09953
commit 7f8160596c
1 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
components/Header.tsx
View File

@ -3,6 +3,7 @@
import { useState, useEffect } from "react";
import Link from "next/link";
import Logo from "./Logo";
import ThemeToggle from "./ThemeToggle";
const navLinks = [
{ label: "Services", href: "/#services" },
@ -27,7 +28,7 @@ export default function Header() {
<header
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
scrolled
? "bg-[#111925]/95 backdrop-blur-md border-b border-gray-800"
? "bg-white/95 dark:bg-[#111925]/95 backdrop-blur-md border-b border-slate-200 dark:border-gray-800"
: "bg-transparent"
}`}
>
@ -37,7 +38,7 @@ export default function Header() {
<Link href="/" className="flex items-center gap-3 group">
<Logo className="h-8 w-auto" />
<div className="flex flex-col leading-tight">
<span className="font-black text-white text-base tracking-wider uppercase">
<span className="font-black text-slate-900 dark:text-white text-base tracking-wider uppercase">
MBO-<span className="text-gradient">TECH-IT</span>
</span>
<span className="text-[9px] font-semibold tracking-[0.2em] text-orange-400/70 uppercase hidden sm:block">
@ -52,7 +53,7 @@ export default function Header() {
<Link
key={link.href}
href={link.href}
className="text-slate-400 hover:text-blue-400 transition-colors text-sm font-medium"
className="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors text-sm font-medium"
>
{link.label}
</Link>
@ -63,11 +64,12 @@ export default function Header() {
>
Jetzt anfragen
</Link>
<ThemeToggle />
</nav>
{/* Mobile Menu Button */}
<button
className="md:hidden text-slate-400 hover:text-white transition-colors"
className="md:hidden text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors"
onClick={() => setMenuOpen(!menuOpen)}
aria-label="Menu"
>
@ -84,13 +86,13 @@ export default function Header() {
{/* Mobile Menu */}
{menuOpen && (
<div className="md:hidden bg-[#111925]/98 backdrop-blur-md border-t border-gray-800">
<div className="md:hidden bg-white/98 dark:bg-[#111925]/98 backdrop-blur-md border-t border-slate-200 dark:border-gray-800">
<nav className="px-4 py-4 flex flex-col gap-4">
{navLinks.map((link) => (
<Link
key={link.href}
href={link.href}
className="text-slate-400 hover:text-blue-400 transition-colors text-sm font-medium py-1"
className="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors text-sm font-medium py-1"
onClick={() => setMenuOpen(false)}
>
{link.label}
@ -103,6 +105,9 @@ export default function Header() {
>
Jetzt anfragen
</Link>
<div className="flex justify-end pt-1">
<ThemeToggle />
</div>
</nav>
</div>
)}