forced color fix and starting to fix pagemenu overflow

Amsterdam · Jan 3, 2024 · 8f4e826 · 8f4e826
1 parent d31ac3e
commit 8f4e826
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 13 deletions.
diff --git a/packages/css/src/components/header/header.scss b/packages/css/src/components/header/header.scss
@@ -27,8 +27,9 @@
   display: none;
 
   @media screen and (min-width: $amsterdam-breakpoint-medium) {
-    display: block;
+    display: flex;
     flex: 10 0 auto;
+    justify-content: flex-end;
   }
 
   @media screen and (min-width: $amsterdam-breakpoint-wide) {
@@ -37,9 +38,10 @@
 }
 
 .amsterdam-header__menu {
+  display: flex;
   flex: 1;
+  justify-content: flex-end;
   padding-inline-start: var(--amsterdam-page-menu-column-gap);
-  text-align: end;
 
   @media screen and (min-width: $amsterdam-breakpoint-wide) {
     order: 4;
@@ -97,7 +99,6 @@
     width: 19px;
 
     & > line {
-      stroke: var(--amsterdam-page-menu-item-color);
       stroke-width: 2.5px;
       transform-origin: center;
       transition:
@@ -114,10 +115,6 @@
   &:hover {
     color: var(--amsterdam-page-menu-item-hover-color);
     text-decoration-line: var(--amsterdam-page-menu-item-hover-text-decoration-line);
-
-    & > svg > line {
-      stroke: var(--amsterdam-page-menu-item-hover-color);
-    }
   }
 
   & > svg > line:nth-child(1) {

diff --git a/packages/css/src/components/page-menu/page-menu.scss b/packages/css/src/components/page-menu/page-menu.scss
@@ -17,7 +17,7 @@
 .amsterdam-page-menu {
   align-items: center;
   column-gap: var(--amsterdam-page-menu-column-gap);
-  display: flex;
+  display: inline flex;
   flex-direction: row;
   list-style: none;
   row-gap: var(--amsterdam-page-menu-row-gap);

diff --git a/packages/react/src/Header/Header.tsx b/packages/react/src/Header/Header.tsx
@@ -26,20 +26,19 @@ interface HeaderMenuButtonProps extends HTMLAttributes<HTMLButtonElement> {
 }
 
 const HeaderMenuButton = forwardRef(
-  ({ className, onClick, isOpen, ...restProps }: HeaderMenuButtonProps, ref: ForwardedRef<HTMLButtonElement>) => (
+  ({ className, isOpen, ...restProps }: HeaderMenuButtonProps, ref: ForwardedRef<HTMLButtonElement>) => (
     <button
       {...restProps}
       ref={ref}
       className={clsx('amsterdam-header__menu-button', isOpen && 'amsterdam-header__menu-button--open', className)}
       aria-label="Open Menu"
       aria-expanded="false"
-      onClick={onClick}
     >
       Menu
       <svg viewBox="0 0 19 19" role="presentation" focusable="false">
-        <line x1="0" x2="100%" y1="50%" y2="50%" />
-        <line x1="0" x2="100%" y1="50%" y2="50%" />
-        <line x1="0" x2="100%" y1="50%" y2="50%" />
+        <line stroke="currentColor" x1="0" x2="100%" y1="50%" y2="50%" />
+        <line stroke="currentColor" x1="0" x2="100%" y1="50%" y2="50%" />
+        <line stroke="currentColor" x1="0" x2="100%" y1="50%" y2="50%" />
       </svg>
     </button>
   ),