v1 production
This commit is contained in:
308
components/Navigation.tsx
Executable file → Normal file
308
components/Navigation.tsx
Executable file → Normal file
@@ -6,6 +6,11 @@ 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">
|
||||
@@ -17,26 +22,171 @@ export default function Navigation() {
|
||||
{/* Desktop Menu */}
|
||||
<div className="nav-menu">
|
||||
<Link href="/" className="nav-link">
|
||||
Home
|
||||
Startseite
|
||||
</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
|
||||
|
||||
{/* 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>
|
||||
<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>
|
||||
|
||||
{/* 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 */}
|
||||
@@ -61,27 +211,129 @@ export default function Navigation() {
|
||||
className="nav-mobile"
|
||||
>
|
||||
<Link href="/" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
|
||||
Home
|
||||
Startseite
|
||||
</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
|
||||
|
||||
<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>
|
||||
<Link href="/kontakt" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
|
||||
Kontakt
|
||||
</Link>
|
||||
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user