88 lines
2.8 KiB
TypeScript
Executable File
88 lines
2.8 KiB
TypeScript
Executable File
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import Link from 'next/link'
|
|
import { motion, AnimatePresence } from 'framer-motion'
|
|
|
|
export default function Navigation() {
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
|
|
return (
|
|
<nav className="nav">
|
|
<div className="nav-container">
|
|
<Link href="/" className="nav-logo">
|
|
doing-it
|
|
</Link>
|
|
|
|
{/* Desktop Menu */}
|
|
<div className="nav-menu">
|
|
<Link href="/" className="nav-link">
|
|
Home
|
|
</Link>
|
|
<Link href="/unternehmen" className="nav-link">
|
|
Für Unternehmen
|
|
</Link>
|
|
<Link href="/quereinsteiger" className="nav-link">
|
|
Für Quereinsteiger
|
|
</Link>
|
|
<Link href="/ueber-uns" className="nav-link">
|
|
Über uns
|
|
</Link>
|
|
<Link href="/wiki" className="nav-link">
|
|
Wiki
|
|
</Link>
|
|
<Link href="/kontakt" className="nav-link">
|
|
Kontakt
|
|
</Link>
|
|
<a href="https://www.linkedin.com/company/doing-it" target="_blank" rel="noopener noreferrer" className="nav-link" style={{ fontSize: '18px' }}>
|
|
<span aria-label="LinkedIn">🔗</span>
|
|
</a>
|
|
</div>
|
|
|
|
{/* Mobile Menu Button */}
|
|
<button
|
|
className="nav-toggle"
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
aria-label="Menu"
|
|
>
|
|
<span className={isOpen ? 'open' : ''}></span>
|
|
<span className={isOpen ? 'open' : ''}></span>
|
|
<span className={isOpen ? 'open' : ''}></span>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Mobile Menu */}
|
|
<AnimatePresence>
|
|
{isOpen && (
|
|
<motion.div
|
|
initial={{ opacity: 0, height: 0 }}
|
|
animate={{ opacity: 1, height: 'auto' }}
|
|
exit={{ opacity: 0, height: 0 }}
|
|
className="nav-mobile"
|
|
>
|
|
<Link href="/" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
|
|
Home
|
|
</Link>
|
|
<Link href="/unternehmen" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
|
|
Für Unternehmen
|
|
</Link>
|
|
<Link href="/quereinsteiger" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
|
|
Für Quereinsteiger
|
|
</Link>
|
|
<Link href="/ueber-uns" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
|
|
Über uns
|
|
</Link>
|
|
<Link href="/wiki" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
|
|
Wiki
|
|
</Link>
|
|
<Link href="/kontakt" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
|
|
Kontakt
|
|
</Link>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</nav>
|
|
)
|
|
}
|
|
|