fix(client/header): responsive header (#463)

* fix(client/header): responsive header * fix(client/header): correction accessibility on logo
AxaFrance · Aug 13, 2024 · 92755aa · 92755aa
1 parent 47582ce
commit 92755aa
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 15 deletions.
diff --git a/slash/css/src/Layout/Header/Client/Header.client.scss b/slash/css/src/Layout/Header/Client/Header.client.scss
@@ -4,38 +4,78 @@
   position: sticky;
   z-index: 100;
   top: 0;
+  background-color: common.$color-white;
 }
 
 .af-header-container {
   display: flex;
-  padding: 0 4rem;
-  border-top: 2px solid common.$color-axa;
+  width: 100%;
+  height: 72px;
   border-bottom: 1px solid common.$color-gray-1;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  font-family: common.$font-family-base;
+  font-family: common.$font-family-sans-serif;
   font-size: 1.25rem;
   font-weight: 600;
-  background-color: common.$color-white;
-}
+  color: common.$color-axa;
 
-.af-header-left-item {
-  display: flex;
-  height: 5rem;
-  flex-direction: row;
-  align-items: center;
-  gap: 1.5rem;
+  & .af-btn-client {
+    min-width: initial;
+
+    & > svg {
+      display: none;
+    }
+  }
 }
 
 .af-logo {
-  width: 3.5rem;
-  height: 3.5rem;
+  width: 40px;
+  height: 40px;
+  margin: 0 common.$spacing-u1;
+  align-self: center;
+}
+
+.af-header-left-item > nav {
+  display: none;
 }
 
 .af-header-right-item {
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 1.5rem;
+  gap: common.$spacing-u1;
+}
+
+@media only screen and (width >=64em) {
+  .af-header-container {
+    height: 80px;
+    padding: 0 common.$spacing-u4;
+    border-top: 2px solid common.$color-axa;
+
+    & .af-btn-client > svg {
+      display: block;
+    }
+  }
+
+  .af-logo {
+    width: 56px;
+    height: 56px;
+  }
+
+  .af-header-left-item {
+    display: flex;
+    height: 5rem;
+    flex-direction: row;
+    align-items: center;
+    gap: 1.5rem;
+
+    & > nav {
+      display: block;
+    }
+  }
+
+  .af-header-right-item {
+    gap: common.$spacing-u2;
+  }
 }
diff --git a/slash/react/src/Layout/Header/Client/Header.client.tsx b/slash/react/src/Layout/Header/Client/Header.client.tsx
@@ -29,7 +29,7 @@ export const HeaderClient = ({
     <header className="af-header">
       <div className="af-header-container">
         <div className="af-header-left-item">
-          <img className="af-logo" src={logo} alt="Logo AXA" />
+          <img className="af-logo" src={logo} alt="" />
           {children && (
             <NavBar activeLink={activeLink} setActiveLink={setActiveLink}>
               {children}