feat(style) - add dark overlay to navigation

international-labour-organization · Oct 2, 2024 · fe9cca6 · fe9cca6
1 parent 248f7b4
commit fe9cca6
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 30 deletions.
diff --git a/.changeset/cyan-goats-camp.md b/.changeset/cyan-goats-camp.md
@@ -0,0 +1,7 @@
+---
+"@ilo-org/react": patch
+"@ilo-org/twig": patch
+"@ilo-org/styles": patch
+---
+
+Add a dark overlay when search button is clicked in the navigation component
diff --git a/packages/react/src/components/Navigation/Navigation.tsx b/packages/react/src/components/Navigation/Navigation.tsx
@@ -267,17 +267,17 @@ const Navigation: FC<NavigationProps> = ({
             </div>
           </nav>
         )}
-        <div
-          style={{ display: searchTabbable ? "block" : "none" }}
-          className={`${prefix}--search-box`}
-        >
-          <div className={`${prefix}--header--inner ${prefix}--container`}>
-            <SearchField
-              input={searchfield?.input}
-              action={searchfield?.action}
-              ref={searchInputRef}
-            ></SearchField>
-          </div>
+      </div>
+      <div
+        style={{ display: searchTabbable ? "block" : "none" }}
+        className={`${prefix}--search-box`}
+      >
+        <div className={`${prefix}--header--inner ${prefix}--container`}>
+          <SearchField
+            input={searchfield?.input}
+            action={searchfield?.action}
+            ref={searchInputRef}
+          ></SearchField>
         </div>
       </div>
     </header>

diff --git a/packages/styles/scss/components/_navigation.scss b/packages/styles/scss/components/_navigation.scss
@@ -8,6 +8,30 @@
   position: relative;
   z-index: 4;
 
+  &::after {
+    content: "";
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0;
+    background-color: var(--ilo-color-blue-dark-ramp);
+    visibility: hidden;
+    transition:
+      opacity 225ms ease-out,
+      visibility 0s 225ms;
+    z-index: 500;
+  }
+
+  &.ilo--search--open {
+    &::after {
+      opacity: 1;
+      visibility: visible;
+      transition: opacity 225ms ease-out;
+    }
+  }
+
   &.ilo--mobile--open {
     height: 100%;
     left: 0;
@@ -114,13 +138,18 @@
     }
 
     @include breakpoint("lg") {
+      position: relative;
+      z-index: 999;
       background: $brand-ilo-blue;
     }
   }
 
   &--utility-bar {
     display: none;
     min-height: px-to-rem(24px);
+    position: relative;
+    z-index: 999;
+
     &--local {
       background: $brand-ilo-blue;
       display: flex;
@@ -230,6 +259,7 @@
       visibility 225ms 0ms;
     width: 100%;
     visibility: hidden;
+    z-index: 999;
 
     .ilo--header.ilo--mobile--open & {
       transform: translateX(0);
@@ -245,7 +275,7 @@
     @include breakpoint("lg") {
       background: $brand-ilo-dark-blue;
       overflow: visible;
-      position: static;
+      position: relative;
       transform: none;
       visibility: visible;
     }
@@ -864,6 +894,7 @@
   .ilo--search--open & {
     visibility: visible;
     transform: translateX(0);
+    z-index: 999;
   }
 
   @include breakpoint("lg") {

diff --git a/packages/twig/src/components/navigation/navigation.twig b/packages/twig/src/components/navigation/navigation.twig
@@ -142,30 +142,29 @@
 				<!-- /.{{prefix}}--subnav--inner -->
 			</nav>
 		{% endif %}
-
+	</div>
+	<!-- /.{{prefix}}--header--navigation -->
 		<div class="{{prefix}}--search-box">
 			<div class="{{prefix}}--header--inner {{ prefix }}--container">
 				{% block desktopSearch %}
 					{% include '@components/form/form.twig' with {
-            attributes: {
-              action: searchfield.action,
-              "aria-label": label,
-              "data-search": "true",
-            },
-            fieldsets: [{
-              fields: [{
-                type: "search",
-                placeholder: searchfield.input.placeholder,
-                name: searchfield.input.name,
-                id: searchfield.input.id,
-              }]
-            }]
-          }
-          %}
+						attributes: {
+						action: searchfield.action,
+						"aria-label": label,
+						"data-search": "true",
+						},
+						fieldsets: [{
+						fields: [{
+							type: "search",
+							placeholder: searchfield.input.placeholder,
+							name: searchfield.input.name,
+							id: searchfield.input.id,
+						}]
+						}]
+						}
+					%}
 				{% endblock %}
 			</div>
 		</div>
 		<!-- /.{{prefix}}--search-box -->
-	</div>
-	<!-- /.{{prefix}}--header--navigation -->
 </header>