Skip to content

Commit

Permalink
feature(website): refined navbar (#636)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ssandino
ssandino authored Nov 20, 2023
1 parent c4c5ed2 commit dad1e75
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 32 deletions.
25 changes: 25 additions & 0 deletions website/src/components/logos/si-icon.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import classNames from 'classnames';
import { HTMLAttributes } from 'react';

export function SIIcon({ className, ...props }: HTMLAttributes<SVGElement>) {
return (
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlSpace="preserve"
fill="currentColor"
aria-hidden={true}
aria-labelledby="si-icon"
viewBox="0 0 816 815.8"
className={classNames('text-si-yellow', className)}
{...props}
>
<title id="si-icon">Social Income Icon</title>
<g>
<path id="Pfad_185" className="st0" d="M714.1,663.9h102v-512h-102V663.9z" />
<path id="Pfad_186" className="st0" d="M366.4,631.9l92.8,43.3l216.3-463.8l-92.8-43.3L366.4,631.9z" />
<path id="Pfad_187" className="st0" d="M0,596.7l65.8,78.4l392-329l-65.7-78.3L0,596.7z" />
</g>
</svg>
);
}
88 changes: 56 additions & 32 deletions website/src/components/navbar/navbar-client.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@

import { DefaultParams } from '@/app/[lang]/[region]';
import { I18nDialog } from '@/components/i18n-dialog';
import { SIIcon } from '@/components/logos/si-icon';
import { SILogo } from '@/components/logos/si-logo';
import { WebsiteCurrency } from '@/i18n';
import { UserCircleIcon } from '@heroicons/react/24/outline';
import { Bars3Icon, GlobeEuropeAfricaIcon, LanguageIcon, XMarkIcon } from '@heroicons/react/24/solid';
import { Bars3Icon, ChevronDownIcon, GlobeEuropeAfricaIcon, LanguageIcon, XMarkIcon } from '@heroicons/react/24/solid';
import { LanguageCode } from '@socialincome/shared/src/types/language';
import {
Accordion,
Expand Down Expand Up @@ -78,23 +79,26 @@ export function NavbarClient(
currency: translations.currency,
}}
>
<Button variant="ghost" className="flex max-w-md space-x-2">
<LanguageIcon className="h-4 w-4" />
<GlobeEuropeAfricaIcon className="h-4 w-4" />
<Button variant="ghost" className="flex max-w-md space-x-2 py-6">
<LanguageIcon className="h-6 w-6" />
<GlobeEuropeAfricaIcon className="h-6 w-6" />
</Button>
</I18nDialog>
);

return (
<nav className="min-h-navbar flex flex-col justify-start pt-4">
<nav className="min-h-navbar flex flex-col justify-start py-8 pt-4">
<Collapsible
open={isOpen}
onOpenChange={setIsOpen}
className="mx-auto flex w-screen max-w-6xl flex-col space-y-4 px-3 md:px-5"
className="mx-auto flex w-screen max-w-6xl flex-col space-y-4 md:px-5"
>
<div className="flex flex-row items-center justify-between md:grid-cols-4">
<div className="flex flex-row items-center justify-between px-5 md:grid-cols-4 md:px-0">
<Link href={`/${lang}/${region}`}>
<SILogo className="h-6" />
{/* Large Screen Logo */}
<SILogo className="hidden h-6 lg:block" />
{/* Small Screen Icon */}
<SIIcon className="block h-11 lg:hidden" />
</Link>
{/*Desktop menu*/}
{showNavigation && (
Expand All @@ -104,27 +108,33 @@ export function NavbarClient(
<div key={index}>
{_.isEmpty(section.links) && section.href ? (
<Link href={section.href} key={index}>
<Button variant="ghost">
<Typography size="md" weight="medium">
<Button variant="ghost" className="text-secondary-foreground py-6">
<Typography size="xl" weight="medium">
{section.title}
</Typography>
</Button>
</Link>
) : (
<HoverCard key={index} openDelay={0} closeDelay={200}>
<HoverCardTrigger asChild>
<Button variant="ghost">
<Typography size="md" weight="medium">
<Button variant="ghost" className="flex items-center space-x-2 py-6">
<Typography size="xl" weight="medium" className="text-secondary-foreground">
{section.title}
</Typography>
{(section.links?.length ?? 0) > 0 && <ChevronDownIcon className="h-4 w-4" />}
</Button>
</HoverCardTrigger>
<HoverCardContent asChild alignOffset={20} className="bg-popover w-72">
<ul>
<HoverCardContent asChild alignOffset={20} className="bg-popover w-56 p-0">
<ul className="divide-muted divide-y">
{section.links?.map((link, index) => (
<li key={index} className="hover:bg-accent rounded p-2">
<li key={index} className="hover:bg-accent py-2 pl-10">
<Link href={link.href}>
<Typography size="md" weight="medium" lineHeight="loose">
<Typography
size="xl"
weight="medium"
lineHeight="loose"
className="text-secondary-foreground"
>
{link.title}
</Typography>
</Link>
Expand All @@ -143,8 +153,8 @@ export function NavbarClient(
{i18nDialog}
{showNavigation && (
<Link href={`/${lang}/${region}/me`}>
<Button variant="ghost" className="cursor-pointer">
<UserCircleIcon className="h-5 w-5" />
<Button variant="ghost" className="cursor-pointer py-6">
<UserCircleIcon className="h-6 w-6" />
</Button>
</Link>
)}
Expand All @@ -153,11 +163,11 @@ export function NavbarClient(
{i18nDialog}
{showNavigation && (
<CollapsibleTrigger asChild>
<Button variant="ghost" size="icon" className="w-9 p-0">
<Button variant="ghost" size="icon" className="w-11 py-6">
{isOpen ? (
<XMarkIcon className="block h-5 w-5" aria-hidden="true" />
<XMarkIcon className="block h-6 w-6" aria-hidden="true" />
) : (
<Bars3Icon className="block h-5 w-5" aria-hidden="true" />
<Bars3Icon className="block h-6 w-6" aria-hidden="true" />
)}
</Button>
</CollapsibleTrigger>
Expand All @@ -167,28 +177,42 @@ export function NavbarClient(

{/*Mobile menu*/}
<CollapsibleContent className="border-b md:hidden">
<Accordion type="single" collapsible className="border-border mb-4 flex w-full flex-col">
<Accordion type="single" collapsible className="divide-border mb-0 flex w-full flex-col divide-y">
{navigation.map((section, index) => (
<div key={index}>
{_.isEmpty(section.links) && section.href ? (
<div className="flex flex-1 items-center justify-between py-1.5 font-medium">
<Link href={section.href}>{section.title}</Link>
</div>
// Entire section is a link with hover effect
<Link
href={section.href}
className="hover:bg-accent flex flex-1 items-center justify-between px-5 py-4 text-lg font-medium md:px-0"
>
<span>{section.title}</span>
</Link>
) : (
<AccordionItem value={`value-${index}`} className="hover:underline-none border-none">
<AccordionTrigger className="py-1.5">{section.title}</AccordionTrigger>
// Accordion section
<AccordionItem
value={`value-${index}`}
className="divide-border divide-y border-none text-lg font-medium"
>
<AccordionTrigger className=" hover:bg-accent pl-5 pr-8 pt-4 hover:no-underline md:pl-0">
{section.title}
</AccordionTrigger>
{section.links?.map((link, index2) => (
<AccordionContent key={index2}>
<Link href={link.href}>{link.title}</Link>
<AccordionContent key={index2} className="hover:bg-accent px-10 pt-2 text-lg md:px-0">
<Link href={link.href} className="mt-2 block">
{link.title}
</Link>
</AccordionContent>
))}
</AccordionItem>
)}
</div>
))}
<div className="flex flex-1 items-center justify-between py-1.5 font-medium">
<Link href={`/${lang}/${region}/me`}>{translations.myProfile}</Link>
</div>
<Link href={`/${lang}/${region}/me`} className="block">
<div className="hover:bg-accent flex flex-1 items-center justify-between px-5 py-4 text-lg font-medium md:px-0">
{translations.myProfile}
</div>
</Link>
</Accordion>
</CollapsibleContent>
</Collapsible>
Expand Down

0 comments on commit dad1e75

Please sign in to comment.