adding animations

IslemMedjahdi · Jan 4, 2023 · af7df3d · af7df3d
1 parent 9c70d9b
commit af7df3d
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 35 deletions.
diff --git a/src/components/layout/header/Header.tsx b/src/components/layout/header/Header.tsx
@@ -1,6 +1,5 @@
 import Image from "next/image";
 import Link from "next/link";
-import { ICONS } from "../../../constants/icons";
 import { IMAGES } from "../../../constants/images";
 import { INFO } from "../../../constants/info";
 import { NAV } from "../../../constants/nav";
@@ -9,34 +8,33 @@ import ProfileMenu from "./ProfileMenu";
 
 const Header = () => {
   return (
-    <header className="flex items-center justify-between gap-x-4 border-b py-4 px-4">
-      <div className="flex items-center gap-x-4">
-        <button className="p-1 hover:bg-gray-50">
-          <ICONS.MENU className="text-xl" />
-        </button>
-        <Link
-          href={ROUTES.HOME.path}
-          className="flex cursor-pointer flex-wrap items-baseline gap-2"
-        >
-          <Image src={IMAGES.Logo} alt="logo" width={50} height={50} />
-          <h1 className="hidden whitespace-nowrap font-serif text-xl font-bold text-white md:flex md:text-gray-900">
-            {INFO.Title}
-          </h1>
-        </Link>
-      </div>
-      <div className="flex items-center gap-x-4">
-        <nav className="hidden items-center gap-x-4 md:flex ">
-          {NAV.map((item, index) => (
-            <Link
-              key={index}
-              className="text-base font-semibold"
-              href={item.path}
-            >
-              {item.name}
-            </Link>
-          ))}
-        </nav>
-        <ProfileMenu />
+    <header className="flex justify-center border-b">
+      <div className="container flex items-center justify-between gap-x-4  py-4 px-4">
+        <div className="flex items-center gap-x-4">
+          <Link
+            href={ROUTES.HOME.path}
+            className="flex cursor-pointer flex-wrap items-baseline gap-2"
+          >
+            <Image src={IMAGES.Logo} alt="logo" width={50} height={50} />
+            <h1 className="hidden whitespace-nowrap font-serif text-xl font-bold text-white md:flex md:text-gray-900">
+              {INFO.Title}
+            </h1>
+          </Link>
+        </div>
+        <div className="flex items-center gap-x-4">
+          <nav className="hidden items-center gap-x-4 md:flex ">
+            {NAV.map((item, index) => (
+              <Link
+                key={index}
+                className="relative text-base font-semibold after:absolute after:top-full after:left-0  after:h-1 after:w-full after:origin-left after:skew-y-1 after:scale-x-0 after:bg-blue-primary after:transition after:duration-300 hover:after:scale-x-100"
+                href={item.path}
+              >
+                {item.name}
+              </Link>
+            ))}
+          </nav>
+          <ProfileMenu />
+        </div>
       </div>
     </header>
   );

diff --git a/src/components/layout/header/ProfileMenu.tsx b/src/components/layout/header/ProfileMenu.tsx
@@ -13,7 +13,7 @@ const ProfileMenu = () => {
     return <></>;
   }
   const ProfileImage = () => (
-    <div className="rounded-full bg-blue-primary p-2 text-sm font-medium text-white">
+    <div className="flex h-10 w-10 items-center justify-center rounded-full bg-blue-primary text-sm font-medium text-white">
       {currentUser.prenom[0]} {currentUser.nom[0]}
     </div>
   );
@@ -33,15 +33,22 @@ const ProfileMenu = () => {
           leaveFrom="transform opacity-100 scale-100"
           leaveTo="transform opacity-0 scale-95"
         >
-          <Menu.Items className="absolute  right-0 mt-6 w-56 origin-top-right divide-y divide-gray-100 rounded bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+          <Menu.Items className="absolute right-0 mt-6 min-w-[14rem] origin-top-right divide-y divide-gray-100 rounded bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
             <Menu.Item>
               <Link
                 href={ROUTES.HOME.path}
-                className="flex flex-wrap items-center gap-x-2 px-3 py-2 text-sm font-medium hover:bg-gray-50 "
+                className="flex items-center gap-x-2 px-3 py-2 text-sm font-medium hover:bg-gray-50 "
               >
-                <ProfileImage />
-                <p>
-                  {currentUser.prenom} {currentUser.nom}
+                <div>
+                  <ProfileImage />
+                </div>
+                <p className="h-5 overflow-hidden">
+                  <span className="capitalize">
+                    {currentUser.prenom.toLowerCase()}
+                  </span>{" "}
+                  <span className="capitalize">
+                    {currentUser.nom.toLowerCase()}
+                  </span>
                 </p>
               </Link>
             </Menu.Item>