Mc sidenav icon fix (#2164)

* use va-icon Signed-off-by: Micah Chiang <[email protected]> * update class name Signed-off-by: Micah Chiang <[email protected]> * remove button on desktop Signed-off-by: Micah Chiang <[email protected]> --------- Signed-off-by: Micah Chiang <[email protected]>
department-of-veterans-affairs · Jul 5, 2024 · e1b4341 · e1b4341
1 parent 411b1e7
commit e1b4341
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/src/site/assets/sass/style.scss b/src/site/assets/sass/style.scss
@@ -251,5 +251,23 @@
     }
   }
 }
+// fix for sidenav btn
+.va-sidenav-btn-close {
+  background-size: 0.625rem 0.625rem;
+  background-color: transparent;
+  height: 1.375rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.375rem;
+  margin: 0;
+  width: .625rem;
+}
+
+@media (min-width: 767px) {
+  .va-sidenav-btn-close {
+    display: none;
+  }
+}
 
 // END: Styles for mobile app promo banner  
diff --git a/src/site/navigation/sidebar_nav.drupal.liquid b/src/site/navigation/sidebar_nav.drupal.liquid
@@ -1,7 +1,9 @@
 <nav data-template="navigation/sidebar_nav" aria-label="Secondary" id="va-detailpage-sidebar" data-drupal-sidebar="true" class="va-drupal-sidebarnav usa-width-one-fourth va-sidebarnav">
     <div>
 
-        <button class="va-btn-close-icon va-sidebarnav-close" type="button" aria-label="Close this menu"></button>
+        <button class="va-sidenav-btn-close va-sidebarnav-close" type="button" aria-label="Close this menu">
+            <va-icon icon="close" size="3" class="vads-u-color--gray-dark"></va-icon>
+        </button>
 
         {% for link in sidebar.links %}
             {% if forloop.first == true %}