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