Skip to content

Commit

Permalink
Prettified Code!
Browse files Browse the repository at this point in the history
  • Loading branch information
@ssandino @actions-user
ssandino authored and actions-user committed Nov 16, 2023
1 parent d6a7326 commit 721058c
Showing 1 changed file with 31 additions and 20 deletions.
51 changes: 31 additions & 20 deletions website/src/components/navbar/navbar-client.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@

import { DefaultParams } from '@/app/[lang]/[region]';
import { I18nDialog } from '@/components/i18n-dialog';
import { SILogo } from '@/components/logos/si-logo';
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, ChevronDownIcon } 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 @@ -87,18 +87,18 @@ export function NavbarClient(
);

return (
<nav className="min-h-navbar flex flex-col justify-start pt-4 py-8">
<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 md:px-5"
>
<div className="flex flex-row items-center justify-between md:grid-cols-4 px-5 md:px-0">
<div className="flex flex-row items-center justify-between px-5 md:grid-cols-4 md:px-0">
<Link href={`/${lang}/${region}`}>
{/* Large Screen Logo */}
<SILogo className="hidden lg:block h-6" />
<SILogo className="hidden h-6 lg:block" />
{/* Small Screen Icon */}
<SIIcon className="block lg:hidden h-11" />
<SIIcon className="block h-11 lg:hidden" />
</Link>
{/*Desktop menu*/}
{showNavigation && (
Expand All @@ -108,7 +108,7 @@ export function NavbarClient(
<div key={index}>
{_.isEmpty(section.links) && section.href ? (
<Link href={section.href} key={index}>
<Button variant="ghost" className="text-gray-800 hover:text-black py-6">
<Button variant="ghost" className="py-6 text-gray-800 hover:text-black">
<Typography size="xl" weight="medium">
{section.title}
</Typography>
Expand All @@ -121,17 +121,20 @@ export function NavbarClient(
<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" />
)}
{(section.links?.length ?? 0) > 0 && <ChevronDownIcon className="h-4 w-4" />}
</Button>
</HoverCardTrigger>
<HoverCardContent asChild alignOffset={20} className="bg-popover w-56 p-0">
<ul className="divide-y divide-gray-100">
<ul className="divide-y divide-gray-100">
{section.links?.map((link, index) => (
<li key={index} className="pl-10 py-2 hover:bg-accent">
<li key={index} className="hover:bg-accent py-2 pl-10">
<Link href={link.href}>
<Typography size="xl" weight="medium" lineHeight="loose" className="text-gray-700 hover:text-black">
<Typography
size="xl"
weight="medium"
lineHeight="loose"
className="text-gray-700 hover:text-black"
>
{link.title}
</Typography>
</Link>
Expand Down Expand Up @@ -174,21 +177,29 @@ export function NavbarClient(

{/*Mobile menu*/}
<CollapsibleContent className="border-b md:hidden">
<Accordion type="single" collapsible className="divide-y divide-gray-200 mb-0 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 ? (
// Entire section is a link with hover effect
<Link href={section.href} className="flex flex-1 items-center justify-between py-4 text-lg font-medium px-5 md:px-0 hover:bg-accent">
<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>
) : (
// Accordion section
<AccordionItem value={`value-${index}`} className="divide-y divide-gray-200 border-none text-lg font-medium">
<AccordionTrigger className=" pt-4 pr-8 pl-5 md:pl-0 hover:bg-accent hover:no-underline">{section.title}</AccordionTrigger>
<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} className="px-10 md:px-0 text-lg pt-2 hover:bg-accent">
<Link href={link.href} className="block mt-2">
<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>
Expand All @@ -198,7 +209,7 @@ export function NavbarClient(
</div>
))}
<Link href={`/${lang}/${region}/me`} className="block">
<div className="flex flex-1 items-center justify-between px-5 md:px-0 py-4 text-lg font-medium hover:bg-accent">
<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>
Expand Down

0 comments on commit 721058c

Please sign in to comment.