Skip to content

Commit 55b7607

Browse files
ssandinossandino
authored
Website: Nav bar optimization (#1000)
1 parent b575cd0 commit 55b7607

File tree

3 files changed

+41
-37
lines changed

3 files changed

+41
-37
lines changed

‎shared/locales/fr/website-common.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"twitter-image": "/assets/metadata/twitter/default.jpg"
99
},
1010
"navigation": {
11-
"our-promise": "Modèle à 100 %",
11+
"our-promise": "Notre promesse",
1212
"about-us": "Qui nous sommes",
1313
"contact": "Contact",
1414
"contributors": "Donateurs et donatrices",

‎website/src/components/navbar/navbar-client.tsx‎

Lines changed: 36 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -276,13 +276,18 @@ const DesktopNavigation = ({ lang, region, languages, regions, currencies, navig
276276
const transparency = navigation![2];
277277

278278
return (
279-
<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">
280-
<div className="flex h-full flex-1 shrink-0 basis-1/4 flex-col">
279+
<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">
280+
<div className="relative inline-flex shrink-0 flex-col text-left">
281281
<Link href={`/${lang}/${region}`}>
282-
<SIAnimatedLogo className="mr-auto hidden h-6 lg:block" />
283-
<SIIcon className="-mb-2.5 block h-9 lg:hidden" />
282+
<div
283+
className="block h-6 w-[230px] items-center justify-center md:hidden lg:block"
284+
style={{ minWidth: '230px', minHeight: '24px' }}
285+
>
286+
<SIAnimatedLogo className="h-[24px] w-[230px]" />
287+
</div>
288+
<SIIcon className="-mb-2.5 block h-9 pr-20 lg:hidden" />
284289
</Link>
285-
<div className="mt-6 hidden h-full flex-col justify-start group-hover/navbar:flex group-active/navbar:flex">
290+
<div className="absolute left-0 mt-[50px] hidden flex-col justify-start overflow-visible whitespace-nowrap group-hover/navbar:flex group-active/navbar:flex">
286291
<NavbarLink href={`/${lang}/${region}/me`}>{translations.myProfile}</NavbarLink>
287292
<div className="flex-inline mt-auto flex items-center space-x-2">
288293
<DonateIcon className="h-4 w-4" />
@@ -292,37 +297,36 @@ const DesktopNavigation = ({ lang, region, languages, regions, currencies, navig
292297
</div>
293298
</div>
294299
</div>
295-
<div
296-
className={classNames('flex max-w-[36rem] flex-1 basis-1/2 flex-row gap-x-2 overflow-visible', {
297-
// center the navbar links
298-
'lg:pl-12': lang === 'en',
299-
'lg:pl-4': lang === 'de',
300-
'lg:pl-8': lang === 'it',
301-
})}
302-
>
303-
<div className="group/our-work flex-1">
304-
<NavbarLink href={ourWork.href}>{ourWork.title}</NavbarLink>
305-
<div className="mt-6 hidden flex-col opacity-0 group-hover/navbar:flex group-hover/our-work:opacity-100">
300+
<div className="flex flex-row items-center justify-evenly gap-x-10 overflow-visible">
301+
<div className="group/our-work relative flex flex-1 justify-end">
302+
<NavbarLink className="whitespace-nowrap px-2" href={ourWork.href}>
303+
{ourWork.title}
304+
</NavbarLink>
305+
<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">
306306
{ourWork.links?.map((link: any, index: number) => (
307307
<NavbarLink key={index} href={link.href}>
308308
{link.title}
309309
</NavbarLink>
310310
))}
311311
</div>
312312
</div>
313-
<div className="group/about-us flex-1">
314-
<NavbarLink href={aboutUs.href}>{aboutUs.title}</NavbarLink>
315-
<div className="mt-6 hidden flex-col opacity-0 group-hover/navbar:flex group-hover/about-us:opacity-100">
313+
<div className="group/about-us relative flex flex-1 justify-center">
314+
<NavbarLink className="whitespace-nowrap px-2" href={aboutUs.href}>
315+
{aboutUs.title}
316+
</NavbarLink>
317+
<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">
316318
{aboutUs.links?.map((link, index) => (
317319
<NavbarLink key={index} href={link.href}>
318320
{link.title}
319321
</NavbarLink>
320322
))}
321323
</div>
322324
</div>
323-
<div className="group/transparency flex-1">
324-
<NavbarLink href={transparency.href}>{transparency.title}</NavbarLink>
325-
<div className="mt-6 hidden flex-col opacity-0 group-hover/navbar:flex group-hover/transparency:opacity-100">
325+
<div className="group/transparency relative flex flex-1 justify-start">
326+
<NavbarLink className="whitespace-nowrap px-2" href={transparency.href}>
327+
{transparency.title}
328+
</NavbarLink>
329+
<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">
326330
{transparency.links?.map((link: any, index: number) => (
327331
<NavbarLink key={index} href={link.href}>
328332
{link.title}
@@ -331,30 +335,30 @@ const DesktopNavigation = ({ lang, region, languages, regions, currencies, navig
331335
</div>
332336
</div>
333337
</div>
334-
<div className="group/i18n flex h-full flex-1 shrink-0 basis-1/4 flex-col">
338+
<div className="group/i18n relative flex flex-col overflow-visible whitespace-nowrap pl-[80px] lg:pl-[200px]">
335339
<div className="flex flex-row items-baseline justify-end">
336340
{(!isIntRegion || (isIntRegion && country)) && (
337341
<Image
338342
className="m-auto mx-2 rounded-full"
339343
src={getFlagImageURL(isIntRegion ? country! : region)}
340-
width={24}
341-
height={24}
344+
width={20}
345+
height={20}
342346
alt="Country flag"
343347
priority
344348
unoptimized
345349
/>
346350
)}{' '}
347351
<Typography size="lg">{languages.find((l) => l.code === lang)?.translation}</Typography>
348352
</div>
349-
<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">
350-
<div className="flex w-full flex-col items-end">
353+
<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">
354+
<div className="flex flex-col items-end pr-0 lg:pr-4">
351355
{regions
352356
.sort((a, b) => a.translation.localeCompare(b.translation))
353357
.map((reg, index) => (
354358
<Link
355359
key={index}
356360
href={`/${lang}/${reg.code}`}
357-
className={classNames('hover:active:text-accent text-left text-lg hover:cursor-pointer', {
361+
className={classNames('hover:active:text-accent hover:text-accent cursor-pointer text-left text-lg', {
358362
'text-accent': reg.code === region,
359363
})}
360364
onClick={() => setRegion(reg.code)}
@@ -363,13 +367,13 @@ const DesktopNavigation = ({ lang, region, languages, regions, currencies, navig
363367
</Link>
364368
))}
365369
</div>
366-
<div className="flex w-full flex-col items-end">
370+
<div className="flex flex-col items-center">
367371
{languages
368372
.sort((a, b) => a.translation.localeCompare(b.translation))
369373
.map((l, index) => (
370374
<Typography
371375
key={index}
372-
className={classNames('hover:active:text-accent text-left text-lg hover:cursor-pointer', {
376+
className={classNames('hover:active:text-accent hover:text-accent cursor-pointer text-left text-lg', {
373377
'text-accent': l.code === lang,
374378
})}
375379
onClick={() => setLanguage(l.code)}
@@ -378,14 +382,14 @@ const DesktopNavigation = ({ lang, region, languages, regions, currencies, navig
378382
</Typography>
379383
))}
380384
</div>
381-
<div className="flex w-full flex-col items-end">
385+
<div className="flex flex-col items-end">
382386
{currencies
383387
.sort((a, b) => a.code.localeCompare(b.code))
384388
.map((curr, index) => (
385389
<Typography
386390
key={index}
387391
size="lg"
388-
className={classNames('hover:active:text-accent text-left text-lg hover:cursor-pointer', {
392+
className={classNames('hover:active:text-accent hover:text-accent cursor-pointer text-left text-lg', {
389393
'text-accent': curr.code === currency,
390394
})}
391395
onClick={() => setCurrency(curr.code)}

‎website/src/components/navbar/navbar.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -70,10 +70,6 @@ async function Navbar({ lang, region }: DefaultParams) {
7070
title: translator.t('navigation.recipient-selection'),
7171
href: `/${lang}/${region}/transparency/recipient-selection`,
7272
},
73-
{
74-
title: translator.t('navigation.faq'),
75-
href: `/${lang}/${region}/faq`,
76-
},
7773
{
7874
title: translator.t('navigation.evidence'),
7975
href: `/${lang}/${region}/transparency/evidence`,
@@ -82,6 +78,10 @@ async function Navbar({ lang, region }: DefaultParams) {
8278
title: translator.t('navigation.reporting'),
8379
href: `/${lang}/${region}/transparency/reporting`,
8480
},
81+
{
82+
title: translator.t('navigation.faq'),
83+
href: `/${lang}/${region}/faq`,
84+
},
8585
],
8686
},
8787
]}

0 commit comments

Comments
 (0)