feat(top-nav): add mobile dropdown and styles

Author: sarmstead

partials/navigation-top.hbs

@@ -3,8 +3,16 @@
         <a class='navigation__logo' href='/'>
             <img src={{asset 'images/gem-logo--badge.svg'}} />
         </a>
-        <button class='navigation__mobile-menu-trigger closed' id='navigation__mobile-menu-trigger'></button>
-        {{navigation}}
+        <div class='navigation__list__wrapper'>
+            <button
+                aria-controls='navigation__mobile-menu-trigger'
+                aria-haspopup='true'
+                class='navigation__mobile-menu-trigger closed'
+                id='navigation__mobile-menu-trigger'
+            >
+            </button>
+            {{navigation}}
+        </div>
         <div class='navigation__membership kg-button-card'>
             <a class='kg-btn' href='#/portal/signup'>Membership</a>
         </div>

src/css/layout/navigation-top.css

@@ -4,12 +4,11 @@
     .navigation__inner {
         align-items: center;
         display: grid;
-        grid-template-areas: 'logo mobile-trigger membership';
+        grid-template-areas: 'logo trigger membership';
         grid-template-columns: 1fr repeat(2, max-content);
         margin: auto;
         max-width: var(--layout-inner-max-width);
         padding: 8px 20px 8px 10px;
-        position: relative;
     }
 
     .navigation__logo {
@@ -28,7 +27,6 @@
         background-size: contain;
         border: none;
         cursor: pointer;
-        grid-area: mobile-trigger;
         height: 24px;
         margin-right: 20px;
         width: 24px;
@@ -42,9 +40,78 @@
         background-image: url('/assets/images/icon__close.svg');
     }
 
+    .navigation__list__wrapper {
+        grid-area: trigger;
+        position: relative;
+    }
+
     .navigation__list {
+        background-color: white;
         display: none;
-        grid-area: list;
+        flex-direction: column;
+        gap: 20px;
+        list-style: none;
+        padding: 16px 30px;
+        z-index: 1;
+    }
+
+    .navigation__list--mobile-closed {
+        display: none;
+    }
+
+    .navigation__list--mobile-opened {
+        background-color: white;
+        border-color: rgba(0, 0, 0, 0.1);
+        border-radius: 0 0 8px 8px;
+        border-style: solid;
+        border-width: 0 1px 1px 1px;
+        box-shadow: 0px 10px 30px 0 rgba(0, 0, 0, 0.04);
+        display: flex;
+        flex-direction: column;
+        left: 25%;
+        margin-top: 0;
+        min-width: 275px;
+        position: absolute;
+        top: 65px;
+        transform: translateX(-50%);
+    }
+
+    .navigation__list--mobile-opened::before {
+        border-top: 4px solid var(--color-yellow);
+        content: '';
+        display: block;
+        position: absolute;
+        right: calc(50% - 37.5px);
+        top: -3px;
+        width: 75px;
+    }
+
+    .navigation__item {
+        a {
+            align-items: center;
+            box-shadow: none;
+            color: var(--color-navy);
+            display: flex;
+            font-family: 'Rubik', sans-serif;
+            font-size: 1rem;
+            line-height: 1.125rem;
+            min-height: 30px;
+            padding: 12px;
+        }
+
+        a:hover {
+            background-color: var(--color-lightblue);
+        }
+    }
+
+    .navigation__item.current {
+        a {
+            background-color: var(--color-yellow);
+        }
+
+        a:hover {
+            background-color: var(--color-lightblue);
+        }
     }
 
     .navigation__membership {
@@ -55,5 +122,10 @@
         .navigation__mobile-menu-trigger {
             display: none;
         }
+
+        .navigation__list--mobile-closed,
+        .navigation__list--mobile-opened {
+            display: none;
+        }
     }
 }

src/js/app/navigation-top.js

@@ -1,10 +1,19 @@
 const mobileTrigger = document.getElementById(
     'navigation__mobile-menu-trigger',
 );
+const list = document.querySelector('.navigation--top .navigation__list');
 
 function toggleMobileMenu() {
     this.classList.toggle('closed');
     this.classList.toggle('opened');
+
+    if (this.classList.contains('closed')) {
+        list.classList.add('navigation__list--mobile-closed');
+        list.classList.remove('navigation__list--mobile-opened');
+    } else {
+        list.classList.remove('navigation__list--mobile-closed');
+        list.classList.add('navigation__list--mobile-opened');
+    }
 }
 
 mobileTrigger.addEventListener('click', toggleMobileMenu);