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

feature(website): refined navbar #636

Merged
merged 8 commits into from
Nov 20, 2023
Merged

feature(website): refined navbar #636

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
dcb1429
Refined NavBar: Adjusted Logo Sizes and Optimized Whitespace & Text f…
ssandino Nov 16, 2023
b816955
Refined NavBar: Adjusted Logo Sizes and Optimized Whitespace & Text f…
ssandino Nov 16, 2023
6d93237
Prettified Code!
ssandino Nov 16, 2023
d6a7326
Refined NavBar: Adjusted Mobile View
ssandino Nov 16, 2023
721058c
Prettified Code!
ssandino Nov 16, 2023
169db09
Merge branch 'main' into sandino/navbar-styling
mkue Nov 19, 2023
40451b0
Refined NavBar: "My Profile" instead of "Login", back to theme colors
ssandino Nov 19, 2023
a5955ee
Prettified Code!
ssandino Nov 19, 2023
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/en/website-common.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"faq": "FAQ",
"finances": "Finances",
"how-it-works": "How It Works",
"my-profile": "My Profile",
ssandino marked this conversation as resolved.
Show resolved Hide resolved
"my-profile": "Login",
"our-work": "Our Work",
"our-work-description": "Learn what we do and stand for",
"contributors-description": "Learn about the people donating",
Expand Down
25 changes: 25 additions & 0 deletions website/src/components/logos/si-icon.tsx
View file
Open in desktop
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
Open in desktop
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="py-6 text-gray-800 hover:text-black">
ssandino marked this conversation as resolved.
Show resolved Hide resolved
<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-gray-800 hover:text-black">
{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-y divide-gray-100">
{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-gray-700 hover:text-black"
>
{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="mb-0 flex w-full flex-col divide-y divide-gray-200">
{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-y divide-gray-200 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