Merge pull request #151 from okTurtles/sebin/task/#149-double-close-b…

…tns-on-nav-menu #149 - Remove the double close 'X' icon on navigation menu
okTurtles · Sep 2, 2024 · ae8dd7d · ae8dd7d
2 parents a5cf39a + 436b918
commit ae8dd7d
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 53 deletions.
diff --git a/src/components/Hamburger.vue b/src/components/Hamburger.vue
@@ -41,7 +41,7 @@ const $isNavigationOpen = useStore(isNavigationOpen);
     content: '';
     display: block;
     height: 2px;
-    width: 2rem;
+    width: 1.6rem;
     background-color: $general_0;
     transition: transform .1s ease-in-out;
     position: absolute;
@@ -50,24 +50,24 @@ const $isNavigationOpen = useStore(isNavigationOpen);
   }
 
   &::before {
-    margin-top: -0.4rem;
+    margin-top: -0.3rem;
   }
 
   &::after {
-    margin-top: 0.4rem;
+    margin-top: 0.3rem;
   }
 }
 
 .open-nav {
   .c-hamburger {
     &::before {
       transform: rotate(45deg);
-      margin-top: 0.4rem;
+      margin-top: 0.3rem;
     }
 
     &::after {
       transform: rotate(-45deg);
-      margin-top: 0.4rem;
+      margin-top: 0.3rem;
     }
   }
 }

diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
@@ -6,10 +6,6 @@
     <div class="c-navbar-backdrop hide-desktop" @click="closeNavigation"></div>
 
     <div class="c-navbar-main">
-      <button class="c-navbar-close-btn hide-desktop"
-        :class="{ 'is-nav-open': $isNavigationOpen }"
-        @click="closeNavigation">Close Navigation Menu</button>
-
       <a v-for="entry in menuList"
         :key="entry.id"
         :data-test="entry.id"
@@ -185,50 +181,6 @@ $zindex-navigation-on-mobile: $zindex-banner + 1;
   }
 }
 
-.c-navbar-close-btn {
-  position: absolute;
-  z-index: 2;
-  display: block;
-  width: 2.25rem;
-  height: 2.25rem;
-  min-height: unset;
-  cursor: pointer;
-  right: 1rem;
-  top: 1rem;
-  background-color: #fff;
-  border-radius: 0.5rem;
-  border: 1px solid $general_0;
-
-  &:hover,
-  &:focus {
-    border-color: $text_1;
-  }
-
-  // accessibility
-  overflow: hidden;
-  text-indent: -9999px;
-
-  &::before,
-  &::after {
-    content: '';
-    display: block;
-    height: 2px;
-    width: 1.25rem;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform-origin: center;
-    background-color: $text_1;
-  }
-
-  &::before {
-    transform: translate(-50%, -50%) rotate(45deg);
-  }
-
-  &::after {
-    transform: translate(-50%, -50%) rotate(-45deg);
-  }
-}
 
 .c-get-started-btn {
   text-transform: capitalize;