Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Website: Nav bar optimization #1000

Merged
merged 13 commits into from
Jan 5, 2025
Merged

Website: Nav bar optimization #1000

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
304bd29
Fixing various screen views
ssandino Jan 4, 2025
3a537b5
Prettified Code!
ssandino Jan 4, 2025
9e8d9ce
Small fixes
ssandino Jan 4, 2025
d4be033
Merge remote-tracking branch 'origin/sandino/nav-wip' into sandino/na…
ssandino Jan 4, 2025
851bd0f
Test fix (as it doesn't show on local)
ssandino Jan 4, 2025
deb2f4d
Prettified Code!
ssandino Jan 4, 2025
3087157
Test fix (as it doesn't show on local)
ssandino Jan 4, 2025
7d7a0dc
Merge remote-tracking branch 'origin/sandino/nav-wip' into sandino/na…
ssandino Jan 4, 2025
1128753
Prettified Code!
ssandino Jan 4, 2025
ffc6117
Clean up
ssandino Jan 4, 2025
1ce8e35
Merge remote-tracking branch 'origin/sandino/nav-wip' into sandino/na…
ssandino Jan 4, 2025
93cab2f
Prettified Code!
ssandino Jan 4, 2025
c158311
Clean up
ssandino Jan 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion shared/locales/fr/website-common.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"twitter-image": "/assets/metadata/twitter/default.jpg"
},
"navigation": {
"our-promise": "Modèle à 100 %",
"our-promise": "Notre promesse",
"about-us": "Qui nous sommes",
"contact": "Contact",
"contributors": "Donateurs et donatrices",
Expand Down
68 changes: 36 additions & 32 deletions website/src/components/navbar/navbar-client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -276,13 +276,18 @@ const DesktopNavigation = ({ lang, region, languages, regions, currencies, navig
const transparency = navigation![2];

return (
<div className="hidden h-20 flex-row items-baseline justify-between gap-x-4 overflow-hidden px-8 py-6 transition-[height] duration-500 ease-in group-hover/navbar:h-96 md:flex lg:group-hover/navbar:h-64">
<div className="flex h-full flex-1 shrink-0 basis-1/4 flex-col">
<div className="hidden h-20 flex-row items-baseline justify-between gap-x-4 overflow-hidden px-8 py-6 transition-[height] duration-500 ease-in group-hover/navbar:h-60 md:flex">
<div className="relative inline-flex shrink-0 flex-col text-left">
<Link href={`/${lang}/${region}`}>
<SIAnimatedLogo className="mr-auto hidden h-6 lg:block" />
<SIIcon className="-mb-2.5 block h-9 lg:hidden" />
<div
className="block h-6 w-[230px] items-center justify-center md:hidden lg:block"
style={{ minWidth: '230px', minHeight: '24px' }}
>
<SIAnimatedLogo className="h-[24px] w-[230px]" />
</div>
<SIIcon className="-mb-2.5 block h-9 pr-20 lg:hidden" />
</Link>
<div className="mt-6 hidden h-full flex-col justify-start group-hover/navbar:flex group-active/navbar:flex">
<div className="absolute left-0 mt-[50px] hidden flex-col justify-start overflow-visible whitespace-nowrap group-hover/navbar:flex group-active/navbar:flex">
<NavbarLink href={`/${lang}/${region}/me`}>{translations.myProfile}</NavbarLink>
<div className="flex-inline mt-auto flex items-center space-x-2">
<DonateIcon className="h-4 w-4" />
Expand All @@ -292,37 +297,36 @@ const DesktopNavigation = ({ lang, region, languages, regions, currencies, navig
</div>
</div>
</div>
<div
className={classNames('flex max-w-[36rem] flex-1 basis-1/2 flex-row gap-x-2 overflow-visible', {
// center the navbar links
'lg:pl-12': lang === 'en',
'lg:pl-4': lang === 'de',
'lg:pl-8': lang === 'it',
})}
>
<div className="group/our-work flex-1">
<NavbarLink href={ourWork.href}>{ourWork.title}</NavbarLink>
<div className="mt-6 hidden flex-col opacity-0 group-hover/navbar:flex group-hover/our-work:opacity-100">
<div className="flex flex-row items-center justify-evenly gap-x-10 overflow-visible">
<div className="group/our-work relative flex flex-1 justify-end">
<NavbarLink className="whitespace-nowrap px-2" href={ourWork.href}>
{ourWork.title}
</NavbarLink>
<div className="absolute left-2 top-full mt-0 hidden flex-col overflow-visible whitespace-nowrap pt-2 opacity-0 group-hover/our-work:flex group-hover/our-work:opacity-100">
{ourWork.links?.map((link: any, index: number) => (
<NavbarLink key={index} href={link.href}>
{link.title}
</NavbarLink>
))}
</div>
</div>
<div className="group/about-us flex-1">
<NavbarLink href={aboutUs.href}>{aboutUs.title}</NavbarLink>
<div className="mt-6 hidden flex-col opacity-0 group-hover/navbar:flex group-hover/about-us:opacity-100">
<div className="group/about-us relative flex flex-1 justify-center">
<NavbarLink className="whitespace-nowrap px-2" href={aboutUs.href}>
{aboutUs.title}
</NavbarLink>
<div className="absolute left-2 top-full mt-0 hidden flex-col overflow-visible whitespace-nowrap pt-2 opacity-0 group-hover/navbar:flex group-hover/about-us:opacity-100">
{aboutUs.links?.map((link, index) => (
<NavbarLink key={index} href={link.href}>
{link.title}
</NavbarLink>
))}
</div>
</div>
<div className="group/transparency flex-1">
<NavbarLink href={transparency.href}>{transparency.title}</NavbarLink>
<div className="mt-6 hidden flex-col opacity-0 group-hover/navbar:flex group-hover/transparency:opacity-100">
<div className="group/transparency relative flex flex-1 justify-start">
<NavbarLink className="whitespace-nowrap px-2" href={transparency.href}>
{transparency.title}
</NavbarLink>
<div className="absolute left-2 top-full mt-0 hidden flex-col overflow-visible whitespace-nowrap pt-2 opacity-0 group-hover/navbar:flex group-hover/transparency:opacity-100">
{transparency.links?.map((link: any, index: number) => (
<NavbarLink key={index} href={link.href}>
{link.title}
Expand All @@ -331,30 +335,30 @@ const DesktopNavigation = ({ lang, region, languages, regions, currencies, navig
</div>
</div>
</div>
<div className="group/i18n flex h-full flex-1 shrink-0 basis-1/4 flex-col">
<div className="group/i18n relative flex flex-col overflow-visible whitespace-nowrap pl-[80px] lg:pl-[200px]">
<div className="flex flex-row items-baseline justify-end">
{(!isIntRegion || (isIntRegion && country)) && (
<Image
className="m-auto mx-2 rounded-full"
src={getFlagImageURL(isIntRegion ? country! : region)}
width={24}
height={24}
width={20}
height={20}
alt="Country flag"
priority
unoptimized
/>
)}{' '}
<Typography size="lg">{languages.find((l) => l.code === lang)?.translation}</Typography>
</div>
<div className="ml-auto mt-6 hidden h-full grid-cols-1 justify-items-start gap-2 text-left opacity-0 group-hover/navbar:grid group-hover/i18n:opacity-100 lg:grid-cols-[repeat(3,auto)] lg:justify-items-end lg:gap-8">
<div className="flex w-full flex-col items-end">
<div className="absolute right-0 top-full mt-0 hidden min-w-[160px] max-w-[170px] grid-cols-3 gap-x-6 pt-4 text-left opacity-0 group-hover/navbar:grid group-hover/i18n:opacity-100">
<div className="flex flex-col items-end pr-0 lg:pr-4">
{regions
.sort((a, b) => a.translation.localeCompare(b.translation))
.map((reg, index) => (
<Link
key={index}
href={`/${lang}/${reg.code}`}
className={classNames('hover:active:text-accent text-left text-lg hover:cursor-pointer', {
className={classNames('hover:active:text-accent hover:text-accent cursor-pointer text-left text-lg', {
'text-accent': reg.code === region,
})}
onClick={() => setRegion(reg.code)}
Expand All @@ -363,13 +367,13 @@ const DesktopNavigation = ({ lang, region, languages, regions, currencies, navig
</Link>
))}
</div>
<div className="flex w-full flex-col items-end">
<div className="flex flex-col items-center">
{languages
.sort((a, b) => a.translation.localeCompare(b.translation))
.map((l, index) => (
<Typography
key={index}
className={classNames('hover:active:text-accent text-left text-lg hover:cursor-pointer', {
className={classNames('hover:active:text-accent hover:text-accent cursor-pointer text-left text-lg', {
'text-accent': l.code === lang,
})}
onClick={() => setLanguage(l.code)}
Expand All @@ -378,14 +382,14 @@ const DesktopNavigation = ({ lang, region, languages, regions, currencies, navig
</Typography>
))}
</div>
<div className="flex w-full flex-col items-end">
<div className="flex flex-col items-end">
{currencies
.sort((a, b) => a.code.localeCompare(b.code))
.map((curr, index) => (
<Typography
key={index}
size="lg"
className={classNames('hover:active:text-accent text-left text-lg hover:cursor-pointer', {
className={classNames('hover:active:text-accent hover:text-accent cursor-pointer text-left text-lg', {
'text-accent': curr.code === currency,
})}
onClick={() => setCurrency(curr.code)}
Expand Down
8 changes: 4 additions & 4 deletions website/src/components/navbar/navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,10 +70,6 @@ async function Navbar({ lang, region }: DefaultParams) {
title: translator.t('navigation.recipient-selection'),
href: `/${lang}/${region}/transparency/recipient-selection`,
},
{
title: translator.t('navigation.faq'),
href: `/${lang}/${region}/faq`,
},
{
title: translator.t('navigation.evidence'),
href: `/${lang}/${region}/transparency/evidence`,
Expand All @@ -82,6 +78,10 @@ async function Navbar({ lang, region }: DefaultParams) {
title: translator.t('navigation.reporting'),
href: `/${lang}/${region}/transparency/reporting`,
},
{
title: translator.t('navigation.faq'),
href: `/${lang}/${region}/faq`,
},
],
},
]}
Expand Down
Loading