Menu UI new styling

app/[locale]/tag-data.json

@@ -1 +1 @@
-{"en":{"markdown":1,"code":1,"features":2,"next-js":7,"math":1,"ols":1,"github":1,"guide":6,"tailwind":4,"i18n":1,"hello":1,"holiday":1,"canada":1,"images":1,"feature":2,"writings":1,"book":1,"reflection":1,"multi-author":1},"fr":{"markdown":1,"code":1,"fonctionnalites":4,"next-js":7,"math":1,"ols":1,"github":1,"guide":6,"tailwind":4,"i18n":1,"salut":1,"vacance":1,"canada":1,"images":1,"ecriture":1,"livre":1,"reflexion":1,"multi-auteurs":1}}
+{"en":{"next-js":7,"tailwind":4,"guide":6,"features":2,"i18n":1,"feature":2,"multi-author":1,"hello":1,"math":1,"ols":1,"github":1,"writings":1,"book":1,"reflection":1,"holiday":1,"canada":1,"images":1,"markdown":1,"code":1},"fr":{"next-js":7,"tailwind":4,"guide":6,"fonctionnalites":4,"i18n":1,"multi-auteurs":1,"salut":1,"math":1,"ols":1,"github":1,"ecriture":1,"livre":1,"reflexion":1,"vacance":1,"canada":1,"images":1,"markdown":1,"code":1}}

components/AuthorsMenu.tsx

@@ -10,6 +10,7 @@ import { useOuterClick } from './util/useOuterClick'
 import { useParams, usePathname } from 'next/navigation'
 import { LocaleTypes } from 'app/[locale]/i18n/settings'
 import { useTranslation } from 'app/[locale]/i18n/client'
+import { motion } from 'framer-motion'
 
 type AuthorsMenuProps = {
   className: string
@@ -43,23 +44,36 @@ const AuthorsMenu = ({ className }: AuthorsMenuProps) => {
   const menubarRef = useRef<HTMLDivElement>(null)
   useOuterClick(menubarRef, closeMenu)
 
+const isSelected = authors.some((author) => author.slug.includes(lastSection)) && filterSections
+
   return (
     <>
       {siteMetadata.multiauthors && (
         <div ref={menubarRef} className={className}>
           <Menu as="div" className="relative inline-block text-left font-medium leading-5">
             <div
-              className={
-                authors.some((author) => author.slug.includes(lastSection)) && filterSections
-                  ? 'text-primary-500 dark:text-primary-500'
-                  : ''
-              }
+
             >
               <Menu.Button
                 className="flex transform-gpu items-center space-x-1 transition-transform duration-300"
                 onClick={toggleMenu}
               >
-                {t('about')}
+                <div  className={`hidden font-medium ${
+                    isSelected ? 'text-white'
+                    : 'text-gray-500 hover:text-gray-900 dark:hover:text-gray-100'
+                  } relative rounded-md px-2 py-1 font-medium transition-colors sm:block`}
+                >
+                  <span className="relative z-10">
+                  {t('about')}
+                  </span>
+                  {isSelected && (
+                    <motion.span
+                      layoutId="tab"
+                      transition={{ type: 'spring', duration: 0.4 }}
+                      className="absolute inset-0 z-0 rounded-md bg-heading-500"
+                    ></motion.span>
+                  )}
+                </div>
               </Menu.Button>
             </div>
             <Transition
@@ -129,9 +143,20 @@ const AuthorsMenu = ({ className }: AuthorsMenuProps) => {
                 <Link
                   href={`/${locale}/about/${slug}`}
                   key={name}
-                  className={`${authors.some((author) => author.slug.includes(lastSection)) && filterSections ? 'text-primary-500 dark:text-primary-500' : ''}relative inline-block text-left font-medium leading-5`}
+                  className={`${isSelected ? 'text-white'
+                  : 'text-gray-500 hover:text-gray-900 dark:hover:text-gray-100'
+                } relative rounded-md px-2 py-1 font-medium transition-colors sm:block`}
                 >
+                  <span className="relative z-10">
                   {t('about')}
+                  </span>
+                  {isSelected && (
+                    <motion.span
+                      layoutId="tab"
+                      transition={{ type: 'spring', duration: 0.4 }}
+                      className="absolute inset-0 z-0 rounded-md bg-heading-500"
+                    ></motion.span>
+                  )}
                 </Link>
               )
             }

components/Header.tsx

@@ -12,6 +12,8 @@ import LangSwitch from './langswitch'
 import SearchButton from './search/SearchButton'
 import { useTranslation } from 'app/[locale]/i18n/client'
 import type { LocaleTypes } from 'app/[locale]/i18n/settings'
+import { useState } from 'react'
+import { motion } from 'framer-motion'
 
 const Header = () => {
   const locale = useParams()?.locale as LocaleTypes
@@ -49,10 +51,18 @@ const Header = () => {
                   key={link.title}
                   href={`/${locale}${link.href}`}
                   className={`hidden font-medium ${
-                    isSelected ? 'text-primary-500' : 'text-gray-900 dark:text-gray-100'
-                  }  sm:block`}
+                    isSelected ? 'text-white'
+                    : 'text-gray-500 hover:text-gray-900 dark:hover:text-gray-100'
+                  } relative rounded-md px-2 py-1 font-medium transition-colors sm:block`}
                 >
-                  {t(`${link.title.toLowerCase()}`)}
+                  <span className="relative z-10">{t(`${link.title.toLowerCase()}`)}</span>
+                  {isSelected && (
+                    <motion.span
+                      layoutId="tab"
+                      transition={{ type: 'spring', duration: 0.4 }}
+                      className="absolute inset-0 z-0 rounded-md bg-heading-500"
+                    ></motion.span>
+                  )}
                 </Link>
               )
             })}