Fixed home header

app/components/HeaderTab.js

@@ -1,7 +1,16 @@
-export default function HeaderTab({ children, className = "", ...props }) {
+export default function HeaderTab({
+  children,
+  className = "",
+  stretch = false,
+  ...props
+}) {
+  const stretchClasses = stretch
+    ? "flex-1 sm:mr-[var(--spacing-scale-008)] md:mr-[185px] lg:mr-[var(--spacing-scale-024)] xl:mr-[var(--spacing-scale-032)]"
+    : "";
+
   return (
     <div
-      className={`HeaderTab header-breakpoint-transition relative bg-[var(--color-surface-default-brand-primary)] rounded-t-[32px] sm:rounded-t-[32px] md:rounded-t-[32px] lg:rounded-t-[32px] xl:rounded-t-[32px] pl-[var(--spacing-measures-spacing-012)] h-[40px] sm:h-[52px] md:h-[52px] lg:h-[52px] xl:h-[64px] sm:pr-[var(--spacing-scale-006)] md:pl-[var(--spacing-scale-024)] lg:pl-[var(--spacing-scale-024)] xl:pl-[var(--spacing-scale-032)] md:pr-[var(--spacing-scale-012)] lg:pr-[var(--spacing-scale-048)] xl:pr-[var(--spacing-scale-120)] md:gap-[var(--spacing-scale-032)] ${className}`}
+      className={`HeaderTab header-breakpoint-transition relative bg-[var(--color-surface-default-brand-primary)] rounded-t-[32px] sm:rounded-t-[32px] md:rounded-t-[32px] lg:rounded-t-[32px] xl:rounded-t-[32px] pl-[var(--spacing-measures-spacing-012)] h-[40px] sm:h-[52px] md:h-[52px] lg:h-[52px] xl:h-[64px] sm:pr-[var(--spacing-scale-006)] md:pl-[var(--spacing-scale-024)] lg:pl-[var(--spacing-scale-024)] xl:pl-[var(--spacing-scale-032)] md:pr-[var(--spacing-scale-012)] lg:pr-[var(--spacing-scale-048)] xl:pr-[var(--spacing-scale-120)] md:gap-[var(--spacing-scale-032)] ${stretchClasses} ${className}`}
       {...props}
     >
       {children}

app/components/HomeHeader.js

@@ -149,7 +149,7 @@ export default function HomeHeader() {
         role="navigation"
         aria-label="Main navigation"
       >
-        <HeaderTab className="flex items-center justify-between lg:gap-[var(--spacing-scale-120)] self-end">
+        <HeaderTab className="flex items-center self-end" stretch={true}>
           {/* Logo - Consistent left positioning within HeaderTab */}
           <div>
             {logoConfig.map((config, index) => (
@@ -159,38 +159,39 @@ export default function HomeHeader() {
             ))}
           </div>
 
-          {/* Navigation Links - Consistent center positioning within HeaderTab */}
+          {/* XSmall menu bar - positioned next to logo */}
-          <div className="flex items-center">
+          <div className="block sm:hidden -me-[2px]">
-            <div className="block sm:hidden -me-[2px]">
+            <MenuBar size="default">
-              <MenuBar size="default">
+              {renderNavigationItems("xsmall")}
-                {renderNavigationItems("xsmall")}
+              {renderLoginButton("xsmall")}
-                {renderLoginButton("xsmall")}
+            </MenuBar>
-              </MenuBar>
-            </div>
-
-            <div className="hidden sm:block md:hidden sm:ml-[var(--spacing-scale-002)]">
-              <MenuBar size="default">
-                {renderNavigationItems("xsmall")}
-                {renderLoginButton("xsmall")}
-              </MenuBar>
-            </div>
-
-            <div className="hidden md:block lg:hidden md:-ml-[var(--spacing-scale-012)]">
-              <MenuBar size="medium">{renderNavigationItems("homeMd")}</MenuBar>
-            </div>
-
-            <div className="hidden lg:block xl:hidden">
-              <MenuBar size="large">{renderNavigationItems("large")}</MenuBar>
-            </div>
-
-            <div className="hidden xl:block xl:ml-[var(--spacing-scale-032)]">
-              <MenuBar size="large">
-                {renderNavigationItems("homeXlarge")}
-              </MenuBar>
-            </div>
           </div>
         </HeaderTab>
 
+        {/* Navigation Links - Centered in header for SM and up */}
+        <div className="absolute left-1/2 transform -translate-x-1/2 hidden sm:block">
+          <div className="hidden sm:block md:hidden">
+            <MenuBar size="default">
+              {renderNavigationItems("xsmall")}
+              {renderLoginButton("xsmall")}
+            </MenuBar>
+          </div>
+
+          <div className="hidden md:block lg:hidden">
+            <MenuBar size="medium">{renderNavigationItems("homeMd")}</MenuBar>
+          </div>
+
+          <div className="hidden lg:block xl:hidden">
+            <MenuBar size="large">{renderNavigationItems("large")}</MenuBar>
+          </div>
+
+          <div className="hidden xl:block">
+            <MenuBar size="large">
+              {renderNavigationItems("homeXlarge")}
+            </MenuBar>
+          </div>
+        </div>
+
         {/* Authentication Elements - Consistent right alignment outside HeaderTab */}
         <div className="flex items-center">
           {/* XSmall and Small breakpoints - create rule button outside HeaderTab */}