From 721058c31c30624b60f5b8d859a00dd51f1df064 Mon Sep 17 00:00:00 2001
From: ssandino <ssandino@users.noreply.github.com>
Date: Thu, 16 Nov 2023 21:39:01 +0000
Subject: [PATCH] Prettified Code!

---
 .../src/components/navbar/navbar-client.tsx   | 51 +++++++++++--------
 1 file changed, 31 insertions(+), 20 deletions(-)

diff --git a/website/src/components/navbar/navbar-client.tsx b/website/src/components/navbar/navbar-client.tsx
index b24da9911..c7a5253cc 100644
--- a/website/src/components/navbar/navbar-client.tsx
+++ b/website/src/components/navbar/navbar-client.tsx
@@ -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,
@@ -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 && (
@@ -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>
@@ -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>
@@ -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>
@@ -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>