Skip to content

Commit

Permalink
Fixing various screen views
Browse files Browse the repository at this point in the history
  • Loading branch information
@ssandino
ssandino committed Jan 4, 2025
1 parent cbd15aa commit 304bd29
Show file tree
Hide file tree
Showing 3 changed files with 43 additions and 39 deletions.
2 changes: 1 addition & 1 deletion shared/locales/fr/website-common.json
View file
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
72 changes: 38 additions & 34 deletions website/src/components/navbar/navbar-client.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -276,53 +276,57 @@ 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-64 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=" h-6 w-[230px] items-center justify-center block 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-12 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">
<div className="flex-inline mt-auto flex items-center space-x-2 ">
<DonateIcon className="h-4 w-4" />
<NavbarLink href={`/${lang}/${region}/donate/individual`} className="text-accent">
{translations.donate}
</NavbarLink>
</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 mt-10 hidden flex-col overflow-visible whitespace-nowrap 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 mt-10 hidden flex-col overflow-visible whitespace-nowrap 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 mt-10 hidden flex-col overflow-visible whitespace-nowrap 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="flex flex-row items-baseline justify-end">
<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 mt-10 hidden min-w-[160px] max-w-[170px] grid-cols-3 gap-x-6 text-left opacity-0 group-hover/navbar:grid group-hover/i18n:opacity-100">
<div className="flex flex-col items-end lg:pr-4 pr-0">
{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 text-left text-lg cursor-pointer', {
'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 text-left text-lg cursor-pointer', {
'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 text-left text-lg cursor-pointer', {
'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
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

0 comments on commit 304bd29

Please sign in to comment.