+
+ {/* Hamburger für kleine Screens */}
+
+ {/* Links für große Screens */}
+
{navItems.map((item) => {
const isActive =
!isTripDetail && location.pathname.startsWith(item.to);
@@ -88,14 +64,14 @@ function Navigation() {
key={item.to}
to={item.to}
className={
- "px-4 py-3 border-b font-medium transition " +
+ "px-4 py-2 rounded-lg font-semibold transition-all duration-150 " +
(isActive
- ? "bg-blue-600 text-white shadow"
- : "text-blue-700 hover:bg-blue-100 hover:text-blue-900")
+ ? "bg-fuchsia-700 text-white shadow-lg"
+ : "text-white hover:bg-fuchsia-100 hover:text-fuchsia-900")
}
style={{
- boxShadow: isActive ? "0 2px 8px 0 rgba(37,99,235,0.08)" : undefined,
- border: isActive ? "2px solid #2563eb" : undefined,
+ boxShadow: isActive ? "0 2px 12px 0 rgba(168,85,247,0.12)" : undefined,
+ border: isActive ? "2px solid #a855f7" : "2px solid transparent",
}}
onClick={() => setMenuOpen(false)}
>
@@ -104,6 +80,36 @@ function Navigation() {
);
})}
+
+ {/* Dropdown für kleine Screens */}
+ {menuOpen && (
+