tknuth/Greenlens
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

TTikotok V4

Browse Source
This commit is contained in:
knuthtimo-lab
2026-07-10 11:29:04 +02:00
parent 1a9548cf25
commit 5c48def4e1
60 changed files with 6097 additions and 1319 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
greenlns-landing/components/Navbar.tsx
View File

@@ -1,23 +1,17 @@
'use client'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { useEffect, useState } from 'react'
import { useLang } from '@/context/LangContext'
import type { Lang } from '@/lib/i18n'
'use client'
const LANGS: { code: Lang; label: string; flag: string }[] = [
{ code: 'de', label: 'DE', flag: 'DE' },
{ code: 'en', label: 'EN', flag: 'EN' },
{ code: 'es', label: 'ES', flag: 'ES' },
]
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { useEffect, useState } from 'react'
import { useLang } from '@/context/LangContext'
import LanguageSwitcher from '@/components/LanguageSwitcher'
export default function Navbar() {
const [scrolled, setScrolled] = useState(false)
const [menuOpen, setMenuOpen] = useState(false)
const pathname = usePathname()
const { lang, setLang, t } = useLang()
const homeHref = (hash: string) => (pathname === '/' ? hash : `/${hash}`)
export default function Navbar() {
const [scrolled, setScrolled] = useState(false)
const [menuOpen, setMenuOpen] = useState(false)
const pathname = usePathname()
const { t } = useLang()
const homeHref = (hash: string) => (pathname === '/' ? hash : `/${hash}`)
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 40)
@@ -32,43 +26,18 @@ export default function Navbar() {
GREENLENS
</Link>
<div className={`nav-links${menuOpen ? ' nav-links--open' : ''}`}>
<a href={homeHref('#features')} onClick={() => setMenuOpen(false)}>{t.nav.features}</a>
<a href={homeHref('#intelligence')} onClick={() => setMenuOpen(false)}>{t.nav.tech}</a>
<a href={homeHref('#faq')} onClick={() => setMenuOpen(false)}>FAQ</a>
<a href={homeHref('#how')} onClick={() => setMenuOpen(false)}>{t.nav.how}</a>
<Link href="/support" onClick={() => setMenuOpen(false)}>Support</Link>
<a href={homeHref('#cta')} onClick={() => setMenuOpen(false)}>{t.nav.download}</a>
<div className={`nav-links${menuOpen ? ' nav-links--open' : ''}`}>
<a href={homeHref('#features')} onClick={() => setMenuOpen(false)}>{t.nav.features}</a>
<a href={homeHref('#intelligence')} onClick={() => setMenuOpen(false)}>{t.nav.tech}</a>
<a href={homeHref('#faq')} onClick={() => setMenuOpen(false)}>FAQ</a>
<a href={homeHref('#how')} onClick={() => setMenuOpen(false)}>{t.nav.how}</a>
<Link href="/support" onClick={() => setMenuOpen(false)}>Support</Link>
<a href={homeHref('#cta')} onClick={() => setMenuOpen(false)}>{t.nav.download}</a>
<div className="lang-switcher" role="group" aria-label="Language selector">
{LANGS.map((l) => (
<button
key={l.code}
className={`lang-btn${lang === l.code ? ' lang-btn--active' : ''}`}
onClick={() => {
setLang(l.code)
setMenuOpen(false)
if (l.code === 'de' && pathname !== '/') {
window.location.href = '/'
}
if (l.code === 'es' && !pathname.startsWith('/es')) {
window.location.href = '/es'
}
if (l.code === 'en' && (pathname.startsWith('/de') || pathname.startsWith('/es'))) {
window.location.href = '/'
}
}}
aria-label={`Switch to ${l.label}`}
aria-pressed={lang === l.code}
>
<span>{l.flag}</span>
<span>{l.label}</span>
</button>
))}
</div>
<LanguageSwitcher />
<a href={homeHref('#cta')} className="nav-cta" onClick={() => setMenuOpen(false)}>{t.nav.cta}</a>
</div>
<a href={homeHref('#cta')} className="nav-cta" onClick={() => setMenuOpen(false)}>{t.nav.cta}</a>
</div>
<button
className="nav-hamburger"
@@ -96,39 +65,6 @@ export default function Navbar() {
gap: 1rem;
border-top: 1px solid rgba(244,241,232,0.08);
}
.lang-switcher {
display: flex;
align-items: center;
gap: 2px;
background: rgba(244,241,232,0.07);
border: 1px solid rgba(244,241,232,0.12);
border-radius: 999px;
padding: 3px;
}
.lang-btn {
display: flex;
align-items: center;
gap: 4px;
background: transparent;
border: none;
color: rgba(244,241,232,0.6);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.04em;
padding: 4px 10px;
border-radius: 999px;
cursor: pointer;
transition: background 0.2s, color 0.2s;
white-space: nowrap;
}
.lang-btn:hover {
color: rgba(244,241,232,0.9);
background: rgba(244,241,232,0.1);
}
.lang-btn--active {
background: rgba(244,241,232,0.15);
color: #fff;
}
`}</style>
</nav>
)