From 32ffc003480d25edc27df0ced1cf410a744dd4e6 Mon Sep 17 00:00:00 2001
From: Daniel Fjeldstad <45217974+w3bdesign@users.noreply.github.com>
Date: Fri, 28 Jun 2024 03:13:18 +0200
Subject: [PATCH 1/2] Update Header.component.tsx

---
 src/components/Layout/Header.component.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/Layout/Header.component.tsx b/src/components/Layout/Header.component.tsx
index 3f233954..01c02559 100644
--- a/src/components/Layout/Header.component.tsx
+++ b/src/components/Layout/Header.component.tsx
@@ -19,13 +19,12 @@ const Header = () => {
   const pathname = usePathname();
 
   return (
-    <header className="z-[999] relative">
+    <header className="z-[999] relative w-full overflow-x-hidden">
       <MotionDiv
-        className="w-full max-w-[390px] md:max-w-[36rem] bg-slate-800 bg-opacity-80 fixed top-0 left-1/2 h-[4.5rem] shadow rounded-none shadow-lg shadow-black/[0.03] backdrop-blur-[0.5rem] sm:top-6 sm:h-[3.25rem] md:w-[36rem] sm:rounded-full mr-6 md:mr-0"
-        initial={{ y: -100, x: "-50%", opacity: 0 }}
+        className="w-screen max-w-full bg-slate-800 bg-opacity-80 fixed top-0 left-0 h-[4.5rem] shadow rounded-none shadow-lg shadow-black/[0.03] backdrop-blur-[0.5rem] sm:top-6 sm:h-[3.25rem] sm:w-[36rem] sm:left-1/2 sm:-translate-x-1/2 sm:rounded-full"
+        initial={{ y: -100, opacity: 0 }}
         animate={{
           y: 0,
-          x: "-50%",
           opacity: 1,
           transition: {
             y: { duration: 0.6, ease: "easeOut" },
@@ -33,7 +32,7 @@ const Header = () => {
           },
         }}
       />
-      <nav className="flex fixed top-[0.65rem] left-1/2 h-12 -translate-x-1/2 py-2 sm:top-[1.7rem] sm:h-[initial] sm:py-0 w-full max-w-[370px] justify-end md:justify-between items-center">
+      <nav className="flex fixed top-[0.65rem] left-0 h-12 py-2 sm:top-[1.7rem] sm:h-[initial] sm:py-0 w-full justify-end md:justify-between items-center px-4 sm:px-0 sm:left-1/2 sm:-translate-x-1/2 sm:max-w-[36rem]">
         <MotionUl
           className="hidden md:flex md:w-[22rem] flex-wrap items-center justify-center gap-y-1 text-[0.9rem] font-medium text-slate-200 sm:w-[initial] sm:flex-nowrap sm:gap-5"
           variants={{
@@ -87,7 +86,11 @@ const Header = () => {
             </MotionLi>
           ))}
         </MotionUl>
-        <div id="hamburger-div" data-cy="hamburger-div" className="md:hidden">
+        <div
+          id="hamburger-div"
+          data-cy="hamburger-div"
+          className="md:hidden w-full flex justify-end"
+        >
           <MobileMenu links={LINKS} />
         </div>
       </nav>

From 6cbf8f791e4d41adcedcafc8971968c5b21f87b3 Mon Sep 17 00:00:00 2001
From: Daniel Fjeldstad <45217974+w3bdesign@users.noreply.github.com>
Date: Fri, 28 Jun 2024 03:18:36 +0200
Subject: [PATCH 2/2] Delay

---
 src/components/Layout/MobileMenu.component.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Layout/MobileMenu.component.tsx b/src/components/Layout/MobileMenu.component.tsx
index 67e1cf78..8a169e86 100644
--- a/src/components/Layout/MobileMenu.component.tsx
+++ b/src/components/Layout/MobileMenu.component.tsx
@@ -93,7 +93,7 @@ const MobileMenu = ({ links }: IMobileMenuProps) => {
         type: "spring",
         stiffness: 300,
         damping: 24,
-        delay: i * 0.05,
+        delay: i * 0.15,
       },
     }),
   };