Merge pull request #82 from emulsify-ds/main-menu-contrast

fix(main menu): contrast, icons, responsiveness of main menu
emulsify-ds · Jun 30, 2023 · 4bc2936 · 4bc2936
2 parents 2c3be44 + a127a1a
commit 4bc2936
Show file tree

Hide file tree

Showing 8 changed files with 118 additions and 90 deletions.
diff --git a/components/02-molecules/menus/main-menu/_00-main-menu.scss b/components/02-molecules/menus/main-menu/_00-main-menu.scss
@@ -10,24 +10,33 @@ $main-menu-medium: $medium;
   }
 
   &--open {
-    background-color: clr(background);
-    display: block;
-    left: 0;
-    overflow-y: scroll;
     position: absolute;
-    top: 134px;
+    left: 0;
     right: 0;
+    top: 110px;
+    display: block;
+    overflow-y: scroll;
     width: 100%;
+    background-color: clr(background);
+
+    @include medium {
+      position: relative;
+      left: auto;
+      right: auto;
+      top: auto;
+      width: auto;
+      overflow-y: visible;
+    }
   }
 }
 
 /* UL */
 .main-menu {
   @include list-reset;
 
-  border-bottom: 1px solid;
   position: relative;
   z-index: 10;
+  border-bottom: 1px solid;
 
   @include medium {
     border-bottom: none;
@@ -40,41 +49,36 @@ $main-menu-medium: $medium;
 
 /* UL (Nested) */
 .main-menu--sub {
-  border-bottom: none;
   height: 0;
   overflow: hidden;
-  background-color: clr(muted);
   width: 100%;
+  border-bottom: none;
+  background-color: clr(muted);
 
   @include medium {
-    background-color: clr(highlight-high);
+    position: absolute;
+    left: 0;
+    top: 55px;
+    z-index: 1;
     display: none;
     height: auto;
-    left: 0;
     overflow: visible;
     padding: $space 0;
-    position: absolute;
-    top: 55px;
     width: 315px;
-    z-index: 1;
+    background-color: clr(accent-high);
     font-size: 0.9rem;
-    opacity: 0.6;
   }
 
   &:hover {
-    @include medium {
-      opacity: 1;
-      background-color: clr(accent-high);
-      transition: all 0.2s;
-
-      .main-menu__link--sub {
+    .main-menu__link--sub {
+      @include medium {
         color: clr(highlight);
 
         &.active,
         &:active,
         &:hover {
-          color: clr(background);
           background-color: clr(accent-high);
+          color: clr(background);
         }
       }
     }

diff --git a/components/02-molecules/menus/main-menu/_01-main-menu-item.scss b/components/02-molecules/menus/main-menu/_01-main-menu-item.scss
@@ -1,59 +1,63 @@
 /* LI */
 .main-menu__item {
-  border-top: 1px solid;
+  position: relative;
   display: flex;
   flex-wrap: wrap;
-  position: relative;
+  border-top: 1px solid;
 
   @include medium {
-    border-top: none;
     display: inline-block;
+    border-top: none;
 
     /* Only top level */
+    &:not(.main-menu__item--sub):focus-within,
     &:not(.main-menu__item--sub):hover {
       background-color: clr(accent-high);
-      transition: all 0.2s;
+      color: clr(highlight-high);
+
+      > .main-menu__link {
+        color: clr(highlight);
+
+        &:hover,
+        &:focus {
+          color: clr(highlight-high);
+        }
+      }
 
       & > .main-menu--sub {
         display: block;
       }
     }
   }
-
-  &:hover {
-    .main-menu__link::after {
-      color: clr(text);
-    }
-  }
 }
 
 /* Expand Button */
 .expand-sub {
-  background-color: clr(accent-high);
-  cursor: pointer;
+  position: relative;
   display: block;
   width: 20%;
+  background-color: clr(accent-high);
   color: clr(text-inverse);
-  position: relative;
+  cursor: pointer;
 
   @include medium {
     display: none;
   }
 
   /* Down triangle */
   &::after {
-    border: 15px solid;
-    border-bottom-color: transparent;
-    border-left: 12px solid transparent;
-    border-right: 12px solid transparent;
+    position: absolute;
+    right: 50%;
+    top: 50%;
     content: '';
     display: block;
     margin-right: -12px;
     margin-top: -6px;
-    position: absolute;
-    right: 50%;
-    top: 50%;
     width: 0;
+    border: 15px solid;
+    border-bottom-color: transparent;
+    border-left: 12px solid transparent;
+    border-right: 12px solid transparent;
   }
 
   /* See main-menu.js */
@@ -62,9 +66,9 @@
     color: clr(muted);
 
     &::after {
+      margin-top: -20px;
       border-top-color: transparent;
       border-bottom: 15px solid;
-      margin-top: -20px;
     }
   }
 }

diff --git a/components/02-molecules/menus/main-menu/_02-main-menu-link.scss b/components/02-molecules/menus/main-menu/_02-main-menu-link.scss
@@ -1,34 +1,37 @@
 /* A */
 .main-menu__link {
-  color: clr(accent);
   display: block;
+  padding: $space $space-triple $space $space-double;
+  color: clr(accent);
   font-size: 1.2rem;
+  font-weight: bold;
   line-height: 1.5;
-  padding: $space $space-triple $space $space-double;
   text-decoration: none;
-  font-weight: bold;
 
   &--with-sub {
     width: 80%;
   }
 
+  &:focus,
+  &:hover {
+    color: clr(text);
+
+    @include medium {
+      background-color: clr(accent-high);
+      color: clr(highlight-high);
+    }
+  }
+
   @include medium {
-    border-bottom: none;
+    position: relative;
     display: inline-block;
-    font-size: 1.1rem;
     padding: $space;
-    text-transform: none;
-    position: relative;
     width: auto;
-
-    &.active,
-    &:active,
-    &:hover {
-      color: clr(highlight-high);
-    }
+    border-bottom: none;
+    font-size: 1.1rem;
+    text-transform: none;
 
     &::after {
-      color: clr(text-inverse);
       display: inline-block;
       content: '>';
       margin-left: 0.5rem;
@@ -37,14 +40,6 @@
     &--sub::after {
       display: none;
     }
-
-    &:hover {
-      color: clr(background);
-
-      &::after {
-        color: clr(highlight);
-      }
-    }
   }
 }
 
@@ -54,14 +49,14 @@
 
 /* A (Nested) */
 .main-menu__link--sub {
-  color: clr(accent);
   padding-left: $space-triple;
+  color: clr(accent);
   font-weight: normal;
 
   @include medium {
-    color: clr(highlight);
     display: block;
     padding: $space-one-third $space;
+    color: clr(highlight);
   }
 }
 

diff --git a/components/02-molecules/menus/main-menu/_03-main-menu-toggle.scss b/components/02-molecules/menus/main-menu/_03-main-menu-toggle.scss
@@ -2,19 +2,23 @@
 .toggle-expand {
   @include link;
 
-  @include medium {
-    display: none;
-  }
-
+  position: absolute;
+  top: 1rem;
   display: inline-block;
+  margin-left: -1rem;
+  margin-top: -1rem;
   padding: $space;
+  width: 100vw;
   text-decoration: none;
-  width: 100%;
 
   /* See main-menu.js */
   &--open {
     background-color: clr(accent);
   }
+
+  @include medium {
+    display: none;
+  }
 }
 
 .toggle-expand__text {
@@ -36,26 +40,28 @@
 
 .toggle-expand__open {
   display: inline-block;
+  float: right;
   text-align: center;
 
   .toggle-expand--open & {
     display: none;
   }
+
+  svg {
+    fill: clr(text);
+  }
 }
 
 .toggle-expand__close {
   display: none;
+  float: right;
   text-align: center;
 
-  &::before {
-    color: clr(background);
-    content: 'X';
-    display: block;
-    font-size: 2.5rem;
-    line-height: 2;
-  }
-
   .toggle-expand--open & {
     display: inline-block;
   }
+
+  svg {
+    fill: clr(text-inverse);
+  }
 }
diff --git a/components/02-molecules/menus/main-menu/main-menu.twig b/components/02-molecules/menus/main-menu/main-menu.twig
@@ -1,16 +1,21 @@
 {{ attach_library('emulsify/main-menu') }}
 
-<nav >
+<nav>
   <a href="#" id="toggle-expand" class="toggle-expand">
     <span class="toggle-expand__open">
       {% include "@atoms/images/icons/_icon.twig" with {
-        icon_base_class: "icon",
-        icon_blockname: "toggle-expand",
-        icon_name: "menu",
+        icon__base_class: "icon",
+        icon__blockname: "toggle-expand",
+        icon__name: "menu",
       } %}
       <span class="toggle-expand__text">Main Menu</span>
     </span>
     <span class="toggle-expand__close">
+            {% include "@atoms/images/icons/_icon.twig" with {
+              icon__base_class: "icon",
+              icon__blockname: "toggle-expand",
+              icon__name: "menu-close",
+            } %}
       <span class="toggle-expand__text">Close</span>
     </span>
   </a>

diff --git a/components/03-organisms/site/site-header/_site-header.scss b/components/03-organisms/site/site-header/_site-header.scss
@@ -9,14 +9,22 @@
   }
 
   &__primary {
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: space-between;
-    padding: $space 0;
+    @include medium {
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: space-between;
+      padding: $space 0;
+    }
   }
 
   &__branding {
-    margin-right: $space;
-    max-width: 300px;
+    max-width: 190px;
+    padding: 1rem 0;
+
+    @include medium {
+      margin-right: $space;
+      max-width: 300px;
+      padding: 0;
+    }
   }
 }