Work on flex variant

Amsterdam · Nov 30, 2023 · 3c20d7a · 3c20d7a
1 parent 897955e
commit 3c20d7a
Show file tree

Hide file tree

Showing 4 changed files with 156 additions and 158 deletions.
diff --git a/packages/css/src/header/header.cols.scss b/packages/css/src/header/header.cols.scss
@@ -0,0 +1,113 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@import "../../utils/breakpoint";
+
+.amsterdam-header {
+  .amsterdam-grid {
+    align-items: center;
+    grid-template-rows: auto;
+    padding-block: 0.88rem;
+    row-gap: 1.5rem;
+  }
+
+  @media screen and (max-width: $amsterdam-breakpoint-medium) {
+    *[class*="menu__item"]:not([class$="--mobile"]) {
+      display: none;
+      visibility: hidden;
+    }
+  }
+}
+
+.amsterdam-header__column--logo {
+  grid-column: 1 / span 4;
+  grid-row: 1;
+}
+
+.amsterdam-header--has-menu {
+  .amsterdam-header__column--logo {
+    grid-column: 1 / span 2;
+  }
+
+  .amsterdam-header__column--menu {
+    grid-column: 3 / span 2;
+    grid-row: 1;
+  }
+
+  @media screen and (min-width: $amsterdam-breakpoint-medium) {
+    .amsterdam-header__column--menu {
+      grid-column: 3 / span 6;
+    }
+  }
+
+  @media screen and (min-width: $amsterdam-breakpoint-wide) {
+    .amsterdam-header__column--menu {
+      grid-column: 3 / span 10;
+    }
+  }
+}
+
+.amsterdam-header--has-title {
+  .amsterdam-grid {
+    grid-template-rows: repeat(2, auto);
+  }
+
+  .amsterdam-header__column--title {
+    grid-column: 1 / span 8;
+    grid-row: 2;
+  }
+
+  @media screen and (min-width: $amsterdam-breakpoint-medium) {
+    .amsterdam-header__column--title {
+      grid-column: 3 / span 8;
+      grid-row: 1;
+    }
+  }
+
+  @media screen and (min-width: $amsterdam-breakpoint-wide) {
+    .amsterdam-header__column--title {
+      grid-column: 3 / span 10;
+      grid-row: 1;
+    }
+  }
+}
+
+.amsterdam-header--has-title.amsterdam-header--has-menu {
+  .amsterdam-grid {
+    grid-template-rows: repeat(2, auto);
+  }
+
+  .amsterdam-header__column--title {
+    grid-column: 1 / span 4;
+    grid-row: 2;
+  }
+
+  @media screen and (min-width: $amsterdam-breakpoint-medium) {
+    .amsterdam-header__column--title {
+      grid-column: 1 / span 8;
+      grid-row: 2;
+    }
+
+    .amsterdam-header__column--menu {
+      grid-column: 3 / span 6;
+      grid-row: 1;
+    }
+  }
+
+  @media screen and (min-width: $amsterdam-breakpoint-wide) {
+    .amsterdam-grid {
+      grid-template-rows: auto;
+    }
+
+    .amsterdam-header__column--title {
+      grid-column: 3 / span 5;
+      grid-row: 1;
+    }
+
+    .amsterdam-header__column--menu {
+      grid-column: 8 / span 5;
+    }
+  }
+}
diff --git a/packages/css/src/header/header.flex.scss b/packages/css/src/header/header.flex.scss
diff --git a/packages/css/src/header/header.scss b/packages/css/src/header/header.scss
@@ -6,108 +6,52 @@
 @import "../../utils/breakpoint";
 
 .amsterdam-header {
-  .amsterdam-grid {
-    align-items: center;
-    grid-template-rows: auto;
-    padding-block: 0.88rem;
-    row-gap: 1.5rem;
+  align-items: center;
+  background-color: white;
+  column-gap: var(--amsterdam-grid-density-low-gap);
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  padding-block: 0.88rem;
+  row-gap: 1.5rem;
+
+  &--has-menu#{&}--has-title {
+    flex-wrap: wrap;
   }
 
   @media screen and (max-width: $amsterdam-breakpoint-medium) {
-    *[class*="menu__item"]:not([class$="--mobile"]) {
+    *[class*="page-menu__item"]:not([class$="--mobile"]) {
       display: none;
       visibility: hidden;
     }
   }
-}
-
-.amsterdam-header__column--logo {
-  grid-column: 1 / span 4;
-  grid-row: 1;
-}
-
-.amsterdam-header--has-menu {
-  .amsterdam-header__column--logo {
-    grid-column: 1 / span 2;
-  }
-
-  .amsterdam-header__column--menu {
-    grid-column: 3 / span 2;
-    grid-row: 1;
-  }
-
-  @media screen and (min-width: $amsterdam-breakpoint-medium) {
-    .amsterdam-header__column--menu {
-      grid-column: 3 / span 6;
-    }
-  }
 
   @media screen and (min-width: $amsterdam-breakpoint-wide) {
-    .amsterdam-header__column--menu {
-      grid-column: 3 / span 10;
-    }
+    flex-wrap: nowrap;
+    row-gap: 2rem;
   }
 }
 
-.amsterdam-header--has-title {
-  .amsterdam-grid {
-    grid-template-rows: repeat(2, auto);
-  }
-
-  .amsterdam-header__column--title {
-    grid-column: 1 / span 8;
-    grid-row: 2;
-  }
+.amsterdam-header__column--logo {
+  flex: 0 0 auto;
+  order: 1;
+}
 
-  @media screen and (min-width: $amsterdam-breakpoint-medium) {
-    .amsterdam-header__column--title {
-      grid-column: 3 / span 8;
-      grid-row: 1;
-    }
-  }
+.amsterdam-header__column--title {
+  flex-grow: 1;
+  order: 3;
 
   @media screen and (min-width: $amsterdam-breakpoint-wide) {
-    .amsterdam-header__column--title {
-      grid-column: 3 / span 10;
-      grid-row: 1;
-    }
+    order: 2;
   }
 }
 
-.amsterdam-header--has-title.amsterdam-header--has-menu {
-  .amsterdam-grid {
-    grid-template-rows: repeat(2, auto);
-  }
-
-  .amsterdam-header__column--title {
-    grid-column: 1 / span 4;
-    grid-row: 2;
-  }
-
-  @media screen and (min-width: $amsterdam-breakpoint-medium) {
-    .amsterdam-header__column--title {
-      grid-column: 1 / span 8;
-      grid-row: 2;
-    }
-
-    .amsterdam-header__column--menu {
-      grid-column: 3 / span 6;
-      grid-row: 1;
-    }
-  }
+.amsterdam-header__column--menu {
+  flex-grow: 1;
+  flex-shrink: 0;
+  order: 2;
 
   @media screen and (min-width: $amsterdam-breakpoint-wide) {
-    .amsterdam-grid {
-      grid-template-rows: auto;
-    }
-
-    .amsterdam-header__column--title {
-      grid-column: 3 / span 5;
-      grid-row: 1;
-    }
-
-    .amsterdam-header__column--menu {
-      grid-column: 8 / span 5;
-    }
+    order: 3;
   }
 }
diff --git a/packages/react/src/Header/Header.tsx b/packages/react/src/Header/Header.tsx
@@ -5,7 +5,7 @@
 
 import clsx from 'clsx'
 import { ForwardedRef, forwardRef, HTMLAttributes, ReactNode } from 'react'
-import { Grid } from '../Grid'
+// import { Grid } from '../Grid'
 import { Heading } from '../Heading'
 import { Logo, LogoBrand } from '../Logo'
 import { VisuallyHidden } from '../VisuallyHidden'
@@ -41,22 +41,22 @@ export const Header = forwardRef(
         className,
       )}
     >
-      <Grid>
-        <div className="amsterdam-header__column amsterdam-header__column--logo">
-          <a href={logoLink} className="amsterdam-header__logo-link">
-            <VisuallyHidden>{logoLinkTitle}</VisuallyHidden>
-            <Logo brand={logoBrand} />
-          </a>
+      {/* <Grid> */}
+      <div className="amsterdam-header__column amsterdam-header__column--logo">
+        <a href={logoLink} className="amsterdam-header__logo-link">
+          <VisuallyHidden>{logoLinkTitle}</VisuallyHidden>
+          <Logo brand={logoBrand} />
+        </a>
+      </div>
+      {title && (
+        <div className="amsterdam-header__column amsterdam-header__column--title">
+          <Heading level={3} size="level-3">
+            {title}
+          </Heading>
         </div>
-        {title && (
-          <div className="amsterdam-header__column amsterdam-header__column--title">
-            <Heading level={3} size="level-3">
-              {title}
-            </Heading>
-          </div>
-        )}
-        {menu && <div className="amsterdam-header__column amsterdam-header__column--menu">{menu}</div>}
-      </Grid>
+      )}
+      {menu && <div className="amsterdam-header__column amsterdam-header__column--menu">{menu}</div>}
+      {/* </Grid> */}
     </header>
   ),
 )