Implemented md breakpoint

app/components/Header.js

@@ -1,5 +1,6 @@
 import Logo from "./Logo";
-import NavigationItem from "./NavigationItem";
+import MenuBar from "./MenuBar";
+import MenuBarItem from "./MenuBarItem";
 import Button from "./Button";
 import AvatarContainer from "./AvatarContainer";
 import Avatar from "./Avatar";
@@ -7,50 +8,111 @@ import Avatar from "./Avatar";
 export default function Header() {
   return (
     <header className="bg-[var(--color-surface-default-primary)] w-full border-b border-[var(--border-color-default-tertiary)]">
-      <div
+      <div className="flex items-center justify-between mx-auto max-w-[1920px] h-[40px] px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-008)] lg:px-[var(--spacing-measures-spacing-120,120px)] lg:py-[var(--spacing-measures-spacing-016,16px)]">
-        className="flex items-center justify-between mx-auto max-w-[1920px]
-          h-[40px]
-          px-[var(--spacing-measures-spacing-016)]
-          py-[var(--spacing-measures-spacing-008)]
-          lg:px-[var(--spacing-measures-spacing-120,120px)]
-          lg:py-[var(--spacing-measures-spacing-016,16px)]"
-      >
-        {/* Logo */}
         <div>
           <div className="block sm:hidden">
             <Logo size="header" showText={false} />
           </div>
-          <div className="hidden sm:block">
+          <div className="hidden sm:block md:hidden">
             <Logo size="header" showText={true} />
           </div>
+          <div className="hidden md:block">
+            <Logo size="headerMd" showText={true} />
+          </div>
         </div>
 
-        {/* Navigation */}
         <div className="flex items-center">
-          <nav className="flex items-center space-x-[var(--spacing-scale-002)]">
+          <div className="block md:hidden">
-            <NavigationItem href="#" size="xsmall">
+            <MenuBar className="gap-[var(--spacing-scale-001)]">
-              Use cases
+              <MenuBarItem
-            </NavigationItem>
+                href="#"
-            <NavigationItem href="#" size="xsmall">
+                size="xsmall"
-              Learn
+                className="px-[var(--spacing-scale-002)] py-[var(--spacing-scale-002)]"
-            </NavigationItem>
+              >
-            <NavigationItem href="#" size="xsmall">
+                Use cases
-              About
+              </MenuBarItem>
-            </NavigationItem>
+              <MenuBarItem href="#" size="xsmall">
-            <NavigationItem href="#" size="xsmall">
+                Learn
-              Log in
+              </MenuBarItem>
-            </NavigationItem>
+              <MenuBarItem href="#" size="xsmall">
-          </nav>
+                About
+              </MenuBarItem>
+              <MenuBarItem href="#" size="xsmall">
+                Log in
+              </MenuBarItem>
+            </MenuBar>
+          </div>
 
-          <Button size="xsmall" className="ml-[var(--spacing-scale-006)]">
+          <div className="hidden md:block absolute left-1/2 transform -translate-x-1/2 ml-[var(--spacing-scale-024)]">
-            {/* Avatar Container */}
+            <MenuBar className="gap-[var(--spacing-scale-001)]">
-            <AvatarContainer size="small">
+              <MenuBarItem
-              <Avatar src="/assets/Avatar_1.png" alt="Avatar 1" size="small" />
+                href="#"
-              <Avatar src="/assets/Avatar_2.png" alt="Avatar 2" size="small" />
+                size="xsmall"
-              <Avatar src="/assets/Avatar_3.png" alt="Avatar 3" size="small" />
+                className="px-[var(--spacing-scale-002)] py-[var(--spacing-scale-002)]"
-            </AvatarContainer>
+              >
-            <span>Create rule</span>
+                Use cases
-          </Button>
+              </MenuBarItem>
+              <MenuBarItem href="#" size="xsmall">
+                Learn
+              </MenuBarItem>
+              <MenuBarItem href="#" size="xsmall">
+                About
+              </MenuBarItem>
+            </MenuBar>
+          </div>
+
+          <div className="hidden md:flex items-center">
+            <MenuBarItem
+              href="#"
+              size="xsmall"
+              className="mr-[var(--spacing-scale-006)]"
+            >
+              Log in
+            </MenuBarItem>
+            <Button size="xsmall">
+              <AvatarContainer size="small">
+                <Avatar
+                  src="/assets/Avatar_1.png"
+                  alt="Avatar 1"
+                  size="small"
+                />
+                <Avatar
+                  src="/assets/Avatar_2.png"
+                  alt="Avatar 2"
+                  size="small"
+                />
+                <Avatar
+                  src="/assets/Avatar_3.png"
+                  alt="Avatar 3"
+                  size="small"
+                />
+              </AvatarContainer>
+              <span>Create rule</span>
+            </Button>
+          </div>
+
+          <div className="block md:hidden">
+            <Button size="xsmall" className="ml-[var(--spacing-scale-006)]">
+              <AvatarContainer size="small">
+                <Avatar
+                  src="/assets/Avatar_1.png"
+                  alt="Avatar 1"
+                  size="small"
+                />
+                <Avatar
+                  src="/assets/Avatar_2.png"
+                  alt="Avatar 2"
+                  size="small"
+                />
+                <Avatar
+                  src="/assets/Avatar_3.png"
+                  alt="Avatar 3"
+                  size="small"
+                />
+              </AvatarContainer>
+              <span>Create rule</span>
+            </Button>
+          </div>
         </div>
       </div>
     </header>

app/components/Logo.js

@@ -12,9 +12,16 @@ export default function Logo({ size = "default", showText = true }) {
       containerHeight: "h-[20.85px]",
       gap: "gap-[2.11px]",
       textSize: "text-[11.57px]",
-      lineHeight: "leading-[14px]",
+      lineHeight: "leading-[14.24px]",
       iconSize: "w-[14.24px] h-[14.24px]",
     },
+    headerMd: {
+      containerHeight: "h-[17.91px]",
+      gap: "gap-[6.51px]",
+      textSize: "text-[17.89px]",
+      lineHeight: "leading-[22.02px]",
+      iconSize: "w-[22.02px] h-[22.02px]",
+    },
     headerLg: {
       containerHeight: "h-[36px]",
       gap: "gap-[7px]",

app/components/MenuBar.js

@@ -0,0 +1,9 @@
+export default function MenuBar({ children, className = "", ...props }) {
+  const baseStyles = `flex items-center px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)] ${className}`;
+
+  return (
+    <nav className={baseStyles} {...props}>
+      {children}
+    </nav>
+  );
+}

app/components/MenuBarItem.js

@@ -0,0 +1,51 @@
+export default function MenuBarItem({
+  href = "#",
+  children,
+  variant = "default",
+  size = "default",
+  className = "",
+  disabled = false,
+  ...props
+}) {
+  const variantStyles = {
+    default:
+      "bg-transparent text-[var(--color-content-default-brand-primary)] border border-transparent hover:bg-[var(--color-surface-default-tertiary)] hover:text-[var(--color-content-default-brand-primary)] active:bg-transparent active:text-[var(--color-content-default-brand-primary)] active:border-[var(--color-content-default-brand-primary)] disabled:bg-[var(--color-surface-default-tertiary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-[var(--color-content-default-tertiary)] disabled:opacity-50 disabled:cursor-not-allowed",
+  };
+
+  const sizeStyles = {
+    default:
+      "px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-016)] gap-[var(--spacing-scale-004)]",
+    xsmall:
+      "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-002)] gap-[var(--spacing-scale-004)]",
+  };
+
+  const textStyles = {
+    default:
+      "font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]",
+    xsmall:
+      "font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]",
+  };
+
+  const baseStyles = `inline-flex items-center ${sizeStyles[size]} rounded-[var(--radius-measures-radius-full)] ${textStyles[size]} transition-all duration-200 cursor-pointer`;
+
+  let finalVariant = variant;
+  if (disabled) {
+    finalVariant = "default";
+  }
+
+  const combinedStyles = `${baseStyles} ${variantStyles[finalVariant]} ${className}`;
+
+  if (disabled) {
+    return (
+      <span className={combinedStyles} {...props}>
+        {children}
+      </span>
+    );
+  }
+
+  return (
+    <a href={href} className={combinedStyles} {...props}>
+      {children}
+    </a>
+  );
+}