340 lines
14 KiB
TypeScript
340 lines
14 KiB
TypeScript
'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)
|
|
const [openDropdown, setOpenDropdown] = useState<string | null>(null)
|
|
|
|
const toggleDropdown = (dropdown: string) => {
|
|
setOpenDropdown(openDropdown === dropdown ? null : dropdown)
|
|
}
|
|
|
|
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">
|
|
Startseite
|
|
</Link>
|
|
|
|
{/* Quereinsteiger Dropdown */}
|
|
<div
|
|
className="nav-dropdown"
|
|
onMouseEnter={() => setOpenDropdown('quereinsteiger')}
|
|
onMouseLeave={() => setOpenDropdown(null)}
|
|
>
|
|
<button className="nav-link nav-dropdown-toggle">
|
|
Quereinsteiger
|
|
</button>
|
|
<AnimatePresence>
|
|
{openDropdown === 'quereinsteiger' && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -10 }}
|
|
className="nav-dropdown-menu"
|
|
>
|
|
<Link href="/quereinsteiger/lernpfad-finder" className="nav-dropdown-link">
|
|
Lernpfadfinder
|
|
</Link>
|
|
<Link href="/unternehmen/tools/it-checkliste" className="nav-dropdown-link">
|
|
Checkliste
|
|
</Link>
|
|
<Link href="/quereinsteiger/coming-soon" className="nav-dropdown-link">
|
|
Coming soon
|
|
</Link>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
|
|
{/* Unternehmen Dropdown */}
|
|
<div
|
|
className="nav-dropdown"
|
|
onMouseEnter={() => setOpenDropdown('unternehmen')}
|
|
onMouseLeave={() => setOpenDropdown(null)}
|
|
>
|
|
<button className="nav-link nav-dropdown-toggle">
|
|
Unternehmen
|
|
</button>
|
|
<AnimatePresence>
|
|
{openDropdown === 'unternehmen' && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -10 }}
|
|
className="nav-dropdown-menu"
|
|
>
|
|
<Link href="/unternehmen/it-infrastrukturanalyse" className="nav-dropdown-link">
|
|
IT-Analyse
|
|
</Link>
|
|
<Link href="/unternehmen/schulungsthemen" className="nav-dropdown-link">
|
|
Mitarbeiter-Schulungen
|
|
</Link>
|
|
<Link href="/unternehmen/tools/schulungsbedarf" className="nav-dropdown-link">
|
|
Bedarfsrechner
|
|
</Link>
|
|
<Link href="/unternehmen/coming-soon" className="nav-dropdown-link">
|
|
Coming soon
|
|
</Link>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
|
|
<Link href="/quereinsteiger/kurse" className="nav-link">
|
|
Kurskatalog
|
|
</Link>
|
|
|
|
<a href="https://wiki.doing-it.de" target="_blank" rel="noopener noreferrer" className="nav-link">
|
|
Wiki
|
|
</a>
|
|
|
|
{/* Projekte Dropdown */}
|
|
<div
|
|
className="nav-dropdown"
|
|
onMouseEnter={() => setOpenDropdown('projekte')}
|
|
onMouseLeave={() => setOpenDropdown(null)}
|
|
>
|
|
<button className="nav-link nav-dropdown-toggle">
|
|
Projekte
|
|
</button>
|
|
<AnimatePresence>
|
|
{openDropdown === 'projekte' && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -10 }}
|
|
className="nav-dropdown-menu"
|
|
>
|
|
<Link href="/projekte/youtube-website" className="nav-dropdown-link">
|
|
YouTube Website
|
|
</Link>
|
|
<Link href="/projekte/coming-soon" className="nav-dropdown-link">
|
|
Coming soon
|
|
</Link>
|
|
<Link href="/projekte/coming-soon-2" className="nav-dropdown-link">
|
|
Coming soon
|
|
</Link>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
|
|
{/* Socials Dropdown */}
|
|
<div
|
|
className="nav-dropdown"
|
|
onMouseEnter={() => setOpenDropdown('socials')}
|
|
onMouseLeave={() => setOpenDropdown(null)}
|
|
>
|
|
<button className="nav-link nav-dropdown-toggle">
|
|
Socials
|
|
</button>
|
|
<AnimatePresence>
|
|
{openDropdown === 'socials' && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -10 }}
|
|
className="nav-dropdown-menu"
|
|
>
|
|
<a href="https://www.instagram.com/doing_it_de" target="_blank" rel="noopener noreferrer" className="nav-dropdown-link">
|
|
Instagram
|
|
</a>
|
|
<a href="https://www.youtube.com/@doing-IT-de" target="_blank" rel="noopener noreferrer" className="nav-dropdown-link">
|
|
YouTube
|
|
</a>
|
|
<a href="https://www.tiktok.com/@doing_it_de" target="_blank" rel="noopener noreferrer" className="nav-dropdown-link">
|
|
TikTok
|
|
</a>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
|
|
{/* Kontakt Dropdown */}
|
|
<div
|
|
className="nav-dropdown"
|
|
onMouseEnter={() => setOpenDropdown('kontakt')}
|
|
onMouseLeave={() => setOpenDropdown(null)}
|
|
>
|
|
<button className="nav-link nav-dropdown-toggle">
|
|
Kontakt
|
|
</button>
|
|
<AnimatePresence>
|
|
{openDropdown === 'kontakt' && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -10 }}
|
|
className="nav-dropdown-menu"
|
|
>
|
|
<Link href="/kontakt" className="nav-dropdown-link">
|
|
Kontakt
|
|
</Link>
|
|
<Link href="/ueber-uns" className="nav-dropdown-link">
|
|
Über uns
|
|
</Link>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
</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)}>
|
|
Startseite
|
|
</Link>
|
|
|
|
<div className="nav-mobile-dropdown">
|
|
<button
|
|
className="nav-mobile-link nav-mobile-dropdown-toggle"
|
|
onClick={() => toggleDropdown('quereinsteiger-mobile')}
|
|
>
|
|
Quereinsteiger {openDropdown === 'quereinsteiger-mobile' ? '▼' : '▶'}
|
|
</button>
|
|
{openDropdown === 'quereinsteiger-mobile' && (
|
|
<div className="nav-mobile-dropdown-menu">
|
|
<Link href="/quereinsteiger/lernpfad-finder" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
|
Lernpfadfinder
|
|
</Link>
|
|
<Link href="/unternehmen/tools/it-checkliste" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
|
Checkliste
|
|
</Link>
|
|
<Link href="/quereinsteiger/coming-soon" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
|
Coming soon
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="nav-mobile-dropdown">
|
|
<button
|
|
className="nav-mobile-link nav-mobile-dropdown-toggle"
|
|
onClick={() => toggleDropdown('unternehmen-mobile')}
|
|
>
|
|
Unternehmen {openDropdown === 'unternehmen-mobile' ? '▼' : '▶'}
|
|
</button>
|
|
{openDropdown === 'unternehmen-mobile' && (
|
|
<div className="nav-mobile-dropdown-menu">
|
|
<Link href="/unternehmen/it-infrastrukturanalyse" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
|
IT-Analyse
|
|
</Link>
|
|
<Link href="/unternehmen/schulungsthemen" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
|
Mitarbeiter-Schulungen
|
|
</Link>
|
|
<Link href="/unternehmen/tools/schulungsbedarf" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
|
Bedarfsrechner
|
|
</Link>
|
|
<Link href="/unternehmen/coming-soon" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
|
Coming soon
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<Link href="/quereinsteiger/kurse" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
|
|
Kurskatalog
|
|
</Link>
|
|
|
|
<a href="https://wiki.doing-it.de" target="_blank" rel="noopener noreferrer" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
|
|
Wiki
|
|
</a>
|
|
|
|
<div className="nav-mobile-dropdown">
|
|
<button
|
|
className="nav-mobile-link nav-mobile-dropdown-toggle"
|
|
onClick={() => toggleDropdown('projekte-mobile')}
|
|
>
|
|
Projekte {openDropdown === 'projekte-mobile' ? '▼' : '▶'}
|
|
</button>
|
|
{openDropdown === 'projekte-mobile' && (
|
|
<div className="nav-mobile-dropdown-menu">
|
|
<Link href="/projekte/youtube-website" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
|
YouTube Website
|
|
</Link>
|
|
<Link href="/projekte/coming-soon" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
|
Coming soon
|
|
</Link>
|
|
<Link href="/projekte/coming-soon-2" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
|
Coming soon
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="nav-mobile-dropdown">
|
|
<button
|
|
className="nav-mobile-link nav-mobile-dropdown-toggle"
|
|
onClick={() => toggleDropdown('socials-mobile')}
|
|
>
|
|
Socials {openDropdown === 'socials-mobile' ? '▼' : '▶'}
|
|
</button>
|
|
{openDropdown === 'socials-mobile' && (
|
|
<div className="nav-mobile-dropdown-menu">
|
|
<a href="https://www.instagram.com/doing_it_de" target="_blank" rel="noopener noreferrer" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
|
Instagram
|
|
</a>
|
|
<a href="https://www.youtube.com/@doing-IT-de" target="_blank" rel="noopener noreferrer" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
|
YouTube
|
|
</a>
|
|
<a href="https://www.tiktok.com/@doing_it_de" target="_blank" rel="noopener noreferrer" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
|
TikTok
|
|
</a>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="nav-mobile-dropdown">
|
|
<button
|
|
className="nav-mobile-link nav-mobile-dropdown-toggle"
|
|
onClick={() => toggleDropdown('kontakt-mobile')}
|
|
>
|
|
Kontakt {openDropdown === 'kontakt-mobile' ? '▼' : '▶'}
|
|
</button>
|
|
{openDropdown === 'kontakt-mobile' && (
|
|
<div className="nav-mobile-dropdown-menu">
|
|
<Link href="/kontakt" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
|
Kontakt
|
|
</Link>
|
|
<Link href="/ueber-uns" className="nav-mobile-link nav-mobile-sublink" onClick={() => setIsOpen(false)}>
|
|
Über uns
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</nav>
|
|
)
|
|
}
|