Merge pull request #66 from fossnsbm/development

style: Hamburger menu
fossnsbm · May 14, 2024 · bd49be5 · bd49be5
2 parents 49c368a + 4671803
commit bd49be5
Showing 1 changed file with 13 additions and 19 deletions.
diff --git a/src/components/layout/nav-hamburger.tsx b/src/components/layout/nav-hamburger.tsx
@@ -12,34 +12,29 @@ export default function NavigationMenuHamburger() {
   };
   const [activeLink, setActiveLink] = useState<number | null>(null);
   return (
-    <div className="flex flex-col items-end justify-center z-50 py-16 px-5">
+    <div className="flex flex-col items-end justify-center z-50 py-16">
       <button onClick={handleClick}>
         {/* Hamburger icon */}
         <span
-          className={`bg-gray-900 block transition-all duration-300 ease-out h-1 w-6  ${
-            isOpen ? "rotate-45 translate-y-1.5" : "-translate-y-0.5"
-          }`}
+          className={`bg-gray-900 block transition-all duration-300 ease-out h-1 w-6  ${isOpen ? "rotate-45 translate-y-1.5" : "-translate-y-0.5"
+            }`}
         ></span>
         <span
-          className={`bg-gray-900 block h-1 w-6  my-0.5 ${
-            isOpen ? "opacity-0" : "opacity-100"
-          }`}
+          className={`bg-gray-900 block h-1 w-6  my-0.5 ${isOpen ? "opacity-0" : "opacity-100"
+            }`}
         ></span>
         <span
-          className={`bg-gray-900 block transition-all duration-300 ease-out h-1 w-6  ${
-            isOpen ? "-rotate-45 -translate-y-1.5" : "translate-y-0.5"
-          }`}
+          className={`bg-gray-900 block transition-all duration-300 ease-out h-1 w-6  ${isOpen ? "-rotate-45 -translate-y-1.5" : "translate-y-0.5"
+            }`}
         ></span>
       </button>
       <div
-        className={`absolute right-0 mt-64 w-48 rounded-md shadow-lg bg-gray-0 z-50 ring- p-5 justify-center items-center transition-all duration-200 ease-in-out gap-5 ${
-          isOpen ? "opacity-100 visible" : "opacity-0 invisible"
-        }`}
+        className={`absolute right-0 mt-64 w-48 rounded-md bg-sky-100 shadow-lg bg-gray-0 z-50 ring- p-5 justify-center items-center transition-all duration-200 ease-in-out gap-5 ${isOpen ? "opacity-100 visible" : "opacity-0 invisible"
+          }`}
       >
         <div
-          className={`py-1 transition-all duration-200 ease-in-out ${
-            isOpen ? "opacity-100 delay-100" : "opacity-0 delay-0"
-          }`}
+          className={`py-1 transition-all duration-200 ease-in-out ${isOpen ? "opacity-100 delay-100" : "opacity-0 delay-0"
+            }`}
           role="menu"
           aria-orientation="vertical"
           aria-labelledby="options-menu"
@@ -48,9 +43,8 @@ export default function NavigationMenuHamburger() {
             <Link href={item.link} key={item.id}>
               <div
                 onClick={() => setActiveLink(item.id)}
-                className={`block px-6 py-2 text-xl text-sky-900 ${
-                  item.id === activeLink ? "underline" : ""
-                }`}
+                className={`block px-6 py-2 text-xl text-sky-900 ${item.id === activeLink ? "underline" : ""
+                  }`}
               >
                 {item.title}
               </div>