From f68f29f13728e4bb996f1c5300def697f5ee8080 Mon Sep 17 00:00:00 2001
From: Nicolas Varone <varonenico@gmail.com>
Date: Tue, 3 Sep 2024 14:37:50 +0200
Subject: [PATCH] [apps/www] Improve header menu

---
 .../src/components/ui/atoms/icon/index.tsx    | 33 +---------
 .../ui/molecules/language-switcher/index.tsx  | 10 ++--
 .../ui/molecules/navigation-menu/index.tsx    | 60 +++++++++++++++----
 .../components/ui/organisms/footer/index.tsx  |  6 +-
 .../components/ui/organisms/header/index.tsx  |  2 +-
 apps/www/src/models/link.model.ts             |  5 +-
 apps/www/src/models/navigation-item.model.ts  |  1 +
 apps/www/src/utils/toolbox.tsx                | 47 +++++++++++----
 8 files changed, 100 insertions(+), 64 deletions(-)

diff --git a/apps/www/src/components/ui/atoms/icon/index.tsx b/apps/www/src/components/ui/atoms/icon/index.tsx
index 3ab5adab..841f2d45 100644
--- a/apps/www/src/components/ui/atoms/icon/index.tsx
+++ b/apps/www/src/components/ui/atoms/icon/index.tsx
@@ -587,7 +587,6 @@ import {
   XMarkIcon as XMarkIconSolid
 } from '@heroicons/react/24/solid'
 import {IconType} from '@/models/icon.model'
-import color from 'tailwindcss/colors'
 
 export type IconProps = IconType & React.ComponentPropsWithoutRef<'svg'>
 
@@ -1180,35 +1179,5 @@ const icons = {
 
 export default function Icon({name, type, ...props}: IconProps) {
   const Comp = icons[`${name}${type === 'solid' ? 'Solid' : 'Outline'}` as keyof typeof icons]
-  return type === 'outline' ? (
-    <svg
-      viewBox='0 0 24 24'
-      {...props}
-    >
-      <defs>
-        <linearGradient
-          id='gradient'
-          x1='0%'
-          y1='0%'
-          x2='0%'
-          y2='100%'
-        >
-          <stop
-            offset='0%'
-            stopColor={color.sky[300]}
-          />
-          <stop
-            offset='100%'
-            stopColor={color.purple[300]}
-          />
-        </linearGradient>
-      </defs>
-      <Comp
-        {...props}
-        className={`[&>path]:stroke-[url(#gradient)] ${props.className}`}
-      />
-    </svg>
-  ) : (
-    <Comp {...props} />
-  )
+  return <Comp {...props} />
 }
diff --git a/apps/www/src/components/ui/molecules/language-switcher/index.tsx b/apps/www/src/components/ui/molecules/language-switcher/index.tsx
index 9df0d1da..22fac978 100644
--- a/apps/www/src/components/ui/molecules/language-switcher/index.tsx
+++ b/apps/www/src/components/ui/molecules/language-switcher/index.tsx
@@ -42,7 +42,7 @@ export default function LanguageSwitcher({mobileMenuOpen}: LanguageSwitcherProps
           key={locale}
           tone='secondary'
           variant='link'
-          className='p-0 text-base text-gray-400 uppercase data-[state=active]:text-white hover:text-slate-50'
+          className='p-0 text-base text-slate-400 uppercase data-[state=active]:text-slate-50 hover:text-slate-50'
           data-active={pathMatcher(locale)}
         >
           <Link
@@ -64,8 +64,9 @@ export default function LanguageSwitcher({mobileMenuOpen}: LanguageSwitcherProps
           <Button
             asChild
             tone='primary'
-            variant='link'
-            className='text-slate-50 !px-0 !py-0 text-sm font-medium'
+            variant='default'
+            className='px-5 text-slate-50 text-sm font-medium bg-transparent hover:text-slate-50 \
+            hover:bg-slate-800'
           >
             <NavigationMenuTrigger className='uppercase gap-1'>{locale}</NavigationMenuTrigger>
           </Button>
@@ -80,7 +81,8 @@ export default function LanguageSwitcher({mobileMenuOpen}: LanguageSwitcherProps
                     asChild
                     tone='secondary'
                     variant='link'
-                    className='p-0 text-sm text-gray-400 uppercase data-[state=active]:text-white hover:text-slate-50'
+                    className='p-0 text-sm text-gray-400 uppercase data-[state=active]:text-slate-50 \
+                    hover:text-slate-50'
                     data-active={pathMatcher(localeItem)}
                   >
                     <Link
diff --git a/apps/www/src/components/ui/molecules/navigation-menu/index.tsx b/apps/www/src/components/ui/molecules/navigation-menu/index.tsx
index e6c9d3dc..d11779c5 100644
--- a/apps/www/src/components/ui/molecules/navigation-menu/index.tsx
+++ b/apps/www/src/components/ui/molecules/navigation-menu/index.tsx
@@ -11,7 +11,9 @@ import {
   NavigationMenuTrigger
 } from '@/components/primitives/navigation-menu'
 import {cn} from '@/utils/toolbox'
+import {usePathname} from 'next/navigation'
 import Button from '@/components/ui/atoms/button'
+import Icon from '../../atoms/icon'
 import Link from 'next/link'
 
 export type NavigationMenuProps = {
@@ -25,8 +27,15 @@ export default function NavigationMenu({
   orientation = 'horizontal',
   onLinkClick
 }: NavigationMenuProps) {
+  const pathname = usePathname()
+
+  const pathMatcher = (path: string) => {
+    const isActive = pathname.includes(path)
+    return isActive
+  }
+
   return orientation === 'horizontal' ? (
-    <NavigationMenuContainer className='gap-x-16'>
+    <NavigationMenuContainer>
       {navigationItems.map((navigationItem, index) =>
         navigationItem.links && navigationItem.links.length > 1 ? (
           <NavigationMenuList key={index}>
@@ -34,16 +43,17 @@ export default function NavigationMenu({
               <Button
                 asChild
                 tone='primary'
-                variant='link'
-                className='text-slate-50 !px-0 !py-0 text-sm font-medium'
+                variant='default'
+                className='pl-5 pr-[18px] text-slate-50 text-sm font-medium bg-transparent hover:text-slate-50 \
+                hover:bg-slate-800'
               >
                 <NavigationMenuTrigger className='gap-1'>{navigationItem.title}</NavigationMenuTrigger>
               </Button>
               <NavigationMenuContent
-                className='px-6 py-5 bg-gradient-to-t from-slate-800 to-slate-900 border \
+                className='left-[2px] p-6 bg-gradient-to-t from-slate-800 to-slate-900 border \
                 border-slate-800'
               >
-                <ul className='space-y-3 w-52'>
+                <ul className={cn(navigationItem.dropdownWidth, 'space-y-4')}>
                   {navigationItem.links &&
                     navigationItem.links.map((link, index) => (
                       <ListItem
@@ -51,7 +61,16 @@ export default function NavigationMenu({
                         href={link.link}
                         className='text-slate-400 text-sm leading-[18px] font-medium hover:text-slate-50'
                       >
-                        {link.title}
+                        {link.icon && (
+                          <div>
+                            <Icon
+                              {...link.icon}
+                              className='w-5 h-5 mr-[14px]'
+                              strokeWidth={1.5}
+                            />
+                          </div>
+                        )}
+                        <div>{link.title}</div>
                       </ListItem>
                     ))}
                 </ul>
@@ -73,10 +92,10 @@ export default function NavigationMenu({
     </NavigationMenuContainer>
   ) : (
     <>
-      <div className='flex-col space-y-6'>
+      <div className='flex-col space-y-10'>
         {navigationItems.map((navigationItem, index) => (
           <div key={index}>
-            <p className='text-sm font-medium text-slate-50'>{navigationItem.title}</p>
+            <p className='text-base font-medium text-slate-50'>{navigationItem.title}</p>
             <ul
               className={cn(
                 !navigationItem.links || navigationItem.links.length === 0 ? 'mt-0' : 'mt-4',
@@ -90,13 +109,25 @@ export default function NavigationMenu({
                     asChild
                     tone='primary'
                     variant='link'
-                    className='text-sm font-medium text-slate-400 hover:text-slate-50'
+                    className={cn(
+                      pathMatcher(link.link) ? '!text-slate-50' : '',
+                      'text-sm font-medium text-slate-400 hover:text-slate-50'
+                    )}
                   >
                     <Link
                       href={link.link}
                       onClick={onLinkClick}
                     >
-                      {link.title}
+                      {link.icon && (
+                        <div>
+                          <Icon
+                            {...link.icon}
+                            className='w-5 h-5 mr-[14px]'
+                            strokeWidth={1.5}
+                          />
+                        </div>
+                      )}
+                      <div>{link.title}</div>
                     </Link>
                   </Button>
                 ))}
@@ -110,6 +141,13 @@ export default function NavigationMenu({
 
 export const ListItem = React.forwardRef<React.ElementRef<'a'>, React.ComponentPropsWithoutRef<'a'>>(
   ({className, title, children, href}, ref) => {
+    const pathname = usePathname()
+
+    const pathMatcher = (path: string) => {
+      const isActive = pathname.includes(path)
+      return isActive
+    }
+
     return (
       <li>
         <NavigationMenuLink
@@ -121,7 +159,7 @@ export const ListItem = React.forwardRef<React.ElementRef<'a'>, React.ComponentP
             tone='primary'
             variant='link'
             align='start'
-            className={className}
+            className={cn(className, pathMatcher(href || '') ? 'text-slate-50' : '')}
           >
             <Link href={href || ''}>
               {title}
diff --git a/apps/www/src/components/ui/organisms/footer/index.tsx b/apps/www/src/components/ui/organisms/footer/index.tsx
index acf11461..7685fa7c 100644
--- a/apps/www/src/components/ui/organisms/footer/index.tsx
+++ b/apps/www/src/components/ui/organisms/footer/index.tsx
@@ -25,12 +25,12 @@ export default function Footer(props: FooterProps) {
     {
       title: 'X',
       link: 'https://x.com/56kcloud',
-      icon: X
+      socialIcon: X
     },
     {
       title: 'Linkedin',
       link: 'https://www.linkedin.com/company/56kcloud',
-      icon: Linkedin
+      socialIcon: Linkedin
     }
   ]
 
@@ -63,7 +63,7 @@ export default function Footer(props: FooterProps) {
                       target='_blank'
                     >
                       <span className='sr-only'>{item.title}</span>
-                      <item.icon
+                      <item.socialIcon
                         className='w-5 h-5 text-sky-500'
                         aria-hidden='true'
                       />
diff --git a/apps/www/src/components/ui/organisms/header/index.tsx b/apps/www/src/components/ui/organisms/header/index.tsx
index 3c91ab6b..d44ed779 100644
--- a/apps/www/src/components/ui/organisms/header/index.tsx
+++ b/apps/www/src/components/ui/organisms/header/index.tsx
@@ -46,7 +46,7 @@ export default function Header({dictionary}: HeaderProps) {
             />
           </button>
         </div>
-        <div className='hidden lg:flex lg:justify-between lg:gap-x-16'>
+        <div className='hidden lg:flex lg:justify-between'>
           <div className='flex items-center gap-x-8'>
             <NavigationMenu
               navigationItems={navigation}
diff --git a/apps/www/src/models/link.model.ts b/apps/www/src/models/link.model.ts
index 8b24c5de..76175406 100644
--- a/apps/www/src/models/link.model.ts
+++ b/apps/www/src/models/link.model.ts
@@ -1,12 +1,13 @@
-import {IconProps} from './icon.model'
+import {IconProps, IconType} from './icon.model'
 
 export type LinkProps = {
   link: string
   links?: never
   title: string
+  icon?: IconType
 }
 
 export type SocialLinks = {
   // eslint-disable-next-line no-unused-vars
-  icon: (props: IconProps) => JSX.Element
+  socialIcon: (props: IconProps) => JSX.Element
 } & LinkProps
diff --git a/apps/www/src/models/navigation-item.model.ts b/apps/www/src/models/navigation-item.model.ts
index cedef11a..94704531 100644
--- a/apps/www/src/models/navigation-item.model.ts
+++ b/apps/www/src/models/navigation-item.model.ts
@@ -4,6 +4,7 @@ export type NavigationItemWithDropdown = {
   title: string
   link?: never
   links?: Array<LinkProps>
+  dropdownWidth?: string
 }
 
 export type NavigationItem = NavigationItemWithDropdown | LinkProps
diff --git a/apps/www/src/utils/toolbox.tsx b/apps/www/src/utils/toolbox.tsx
index 3428a3f5..f11afd1f 100644
--- a/apps/www/src/utils/toolbox.tsx
+++ b/apps/www/src/utils/toolbox.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import {ClassValue, clsx} from 'clsx'
+import {CloudArrowDownIcon} from '@heroicons/react/24/outline'
 import {Dictionary} from '@/models/dictionary.model'
 import {HsformsPayload, HsformsPayloadItem, contactUsFormData} from '@/models/contact-us-form-data.model'
 import {NavigationItem} from '@/models/navigation-item.model'
@@ -165,25 +166,49 @@ export function getNavigationLinks(dico: Dictionary): Array<NavigationItem> {
     {
       title: dico.services,
       links: [
-        {title: dico.cloudMigrationAndModernization, link: '/services/cloud-migration-and-modernization'},
-        {title: dico.cloudNativeApplicationDevelopment, link: '/services/cloud-native-application-development'},
-        {title: dico.consultingAndTraining, link: '/services/consulting-and-training'}
-      ]
+        {
+          title: dico.cloudMigrationAndModernization,
+          link: '/services/cloud-migration-and-modernization',
+          icon: {name: 'CloudIcon', type: 'outline'}
+        },
+        {
+          title: dico.cloudNativeApplicationDevelopment,
+          link: '/services/cloud-native-application-development',
+          icon: {name: 'WrenchIcon', type: 'outline'}
+        },
+
+        {
+          title: dico.consultingAndTraining,
+          link: '/services/consulting-and-training',
+          icon: {name: 'AcademicCapIcon', type: 'outline'}
+        }
+      ],
+      dropdownWidth: 'w-[272px]'
     },
     {
       title: dico.solutions,
       links: [
-        {title: dico.platformEngineering, link: '/solutions/platform-engineering'},
-        {title: dico.edgeIoT, link: '/solutions/edge-iot'},
-        {title: dico.generativeAI, link: '/solutions/generative-ai'}
-      ]
+        {
+          title: dico.platformEngineering,
+          link: '/solutions/platform-engineering',
+          icon: {name: 'RocketLaunchIcon', type: 'outline'}
+        },
+        {title: dico.edgeIoT, link: '/solutions/edge-iot', icon: {name: 'CpuChipIcon', type: 'outline'}},
+        {
+          title: dico.generativeAI,
+          link: '/solutions/generative-ai',
+          icon: {name: 'ChatBubbleLeftEllipsisIcon', type: 'outline'}
+        }
+      ],
+      dropdownWidth: 'w-64'
     },
     {
       title: dico.company,
       links: [
-        {title: dico.aboutUs, link: '/about-us'},
-        {title: dico.blog, link: '/blog'}
-      ]
+        {title: dico.aboutUs, link: '/about-us', icon: {name: 'BuildingOfficeIcon', type: 'outline'}},
+        {title: dico.blog, link: '/blog', icon: {name: 'BookOpenIcon', type: 'outline'}}
+      ],
+      dropdownWidth: 'w-40'
     }
   ]
 }