37 lines
1.3 KiB
React
37 lines
1.3 KiB
React
import React from 'react'
|
|
import { Link, useLocation } from 'react-router-dom'
|
|
import { Home, Newspaper, Mic, MessageSquare, Briefcase, User, Mail } from 'lucide-react'
|
|
import './BottomDock.css'
|
|
|
|
export default function BottomDock() {
|
|
const location = useLocation()
|
|
|
|
const items = [
|
|
{ label: 'Home', path: '/', icon: <Home size={20} /> },
|
|
{ label: 'Kniepunkt', path: '/kniepunkt', icon: <Newspaper size={20} /> },
|
|
{ label: 'Podcast', path: '/podcast', icon: <Mic size={20} /> },
|
|
{ label: 'Speaking', path: '/speaking', icon: <MessageSquare size={20} /> },
|
|
{ label: 'Beratung', path: '/consulting', icon: <Briefcase size={20} /> },
|
|
{ label: 'Über mich', path: '/ueber-mich', icon: <User size={20} /> },
|
|
{ label: 'Kontakt', path: '/kontakt', icon: <Mail size={20} /> },
|
|
]
|
|
|
|
return (
|
|
<div className="dock-container">
|
|
<nav className="dock">
|
|
{items.map((item) => {
|
|
const isActive = location.pathname === item.path
|
|
return (
|
|
<div className="dock-item-wrapper" key={item.path}>
|
|
<span className="dock-tooltip">{item.label}</span>
|
|
<Link to={item.path} className={`dock-item ${isActive ? 'active' : ''}`}>
|
|
{item.icon}
|
|
</Link>
|
|
</div>
|
|
)
|
|
})}
|
|
</nav>
|
|
</div>
|
|
)
|
|
}
|