Make nav drop-down cleaner/scrollable (#10138)

* Make nav drop-down cleaner/scrollable

* Stop overriding bootstrap navbar

* Move user menu to top bar in mobile

* Restructure/style first drop-down item

* Add ALL the pretty colors

* Apply menu drop-down re-structure to all menu drop-downs

* Replace curly brace lost during rebase

package-lock.json

@@ -151,7 +151,7 @@
     },
     "@sinonjs/formatio": {
       "version": "2.0.0",
-      "resolved": "http://registry.npmjs.org/@sinonjs/formatio/-/formatio-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/@sinonjs/formatio/-/formatio-2.0.0.tgz",
       "integrity": "sha512-ls6CAMA6/5gG+O/IdsBcblvnd8qcO/l1TYoNeAzp3wcISOxlPXQEus0mLcdwazEkWjaBdaJ3TaxmNgCLWwvWzg==",
       "dev": true,
       "requires": {
@@ -3765,7 +3765,7 @@
     },
     "compression": {
       "version": "1.7.2",
-      "resolved": "http://registry.npmjs.org/compression/-/compression-1.7.2.tgz",
+      "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.2.tgz",
       "integrity": "sha1-qv+81qr4VLROuygDU9WtFlH1mmk=",
       "requires": {
         "accepts": "1.3.5",
@@ -7544,7 +7544,6 @@
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.1.3.tgz",
       "integrity": "sha512-WIr7iDkdmdbxu/Gh6eKEZJL6KPE74/5MEsf2whTOFNxbIoIixogroLdKYqB6FDav4Wavh/lZdzzd3b2KxIXC5Q==",
-      "optional": true,
       "requires": {
         "nan": "2.6.2",
         "node-pre-gyp": "0.6.39"
@@ -7581,7 +7580,6 @@
           "version": "1.1.4",
           "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz",
           "integrity": "sha1-u13KOCu5TwXhUZQ3PRb9O6HKEQ0=",
-          "optional": true,
           "requires": {
             "delegates": "1.0.0",
             "readable-stream": "2.2.9"
@@ -7815,7 +7813,6 @@
           "version": "1.0.5",
           "resolved": "https://registry.npmjs.org/fstream-ignore/-/fstream-ignore-1.0.5.tgz",
           "integrity": "sha1-nDHa40dnAY/h0kmyTa2mfQktoQU=",
-          "optional": true,
           "requires": {
             "fstream": "1.0.11",
             "inherits": "2.0.3",
@@ -7826,7 +7823,6 @@
           "version": "2.7.4",
           "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
           "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
-          "optional": true,
           "requires": {
             "aproba": "1.1.1",
             "console-control-strings": "1.1.0",
@@ -7915,7 +7911,6 @@
           "version": "1.1.1",
           "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz",
           "integrity": "sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=",
-          "optional": true,
           "requires": {
             "assert-plus": "0.2.0",
             "jsprim": "1.4.0",
@@ -8013,7 +8008,6 @@
           "version": "1.4.0",
           "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.0.tgz",
           "integrity": "sha1-o7h+QCmNjDgFUtjMdiigu5WiKRg=",
-          "optional": true,
           "requires": {
             "assert-plus": "1.0.0",
             "extsprintf": "1.0.2",
@@ -8073,7 +8067,6 @@
           "version": "0.6.39",
           "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.6.39.tgz",
           "integrity": "sha512-OsJV74qxnvz/AMGgcfZoDaeDXKD3oY3QVIbBmwszTFkRisTSXbMQyn4UWzUMOtA5SVhrBZOTp0wcoSBgfMfMmQ==",
-          "optional": true,
           "requires": {
             "detect-libc": "1.0.2",
             "hawk": "3.1.3",
@@ -8102,7 +8095,6 @@
           "version": "4.1.0",
           "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.0.tgz",
           "integrity": "sha512-ocolIkZYZt8UveuiDS0yAkkIjid1o7lPG8cYm05yNYzBn8ykQtaiPMEGp8fY9tKdDgm8okpdKzkvu1y9hUYugA==",
-          "optional": true,
           "requires": {
             "are-we-there-yet": "1.1.4",
             "console-control-strings": "1.1.0",
@@ -8223,7 +8215,6 @@
           "version": "2.81.0",
           "resolved": "https://registry.npmjs.org/request/-/request-2.81.0.tgz",
           "integrity": "sha1-xpKJRqDgbF+Nb4qTM0af/aRimKA=",
-          "optional": true,
           "requires": {
             "aws-sign2": "0.6.0",
             "aws4": "1.6.0",
@@ -8365,7 +8356,6 @@
           "version": "3.4.0",
           "resolved": "https://registry.npmjs.org/tar-pack/-/tar-pack-3.4.0.tgz",
           "integrity": "sha1-I74tf2cagzk3bL2wuP4/3r8xeYQ=",
-          "optional": true,
           "requires": {
             "debug": "2.6.8",
             "fstream": "1.0.11",
@@ -8415,14 +8405,12 @@
         "uuid": {
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.0.1.tgz",
-          "integrity": "sha1-ZUS7ot/ajBzxfmKaOjBeK7H+5sE=",
+          "integrity": "sha1-ZUS7ot/ajBzxfmKaOjBeK7H+5sE="
-          "optional": true
         },
         "verror": {
           "version": "1.3.6",
           "resolved": "https://registry.npmjs.org/verror/-/verror-1.3.6.tgz",
           "integrity": "sha1-z/XfEpRtKX0rqu+qJoniW+AcAFw=",
-          "optional": true,
           "requires": {
             "extsprintf": "1.0.2"
           }
@@ -8431,7 +8419,6 @@
           "version": "1.1.2",
           "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.2.tgz",
           "integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==",
-          "optional": true,
           "requires": {
             "string-width": "1.0.2"
           }
@@ -13626,8 +13613,7 @@
     "nan": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.6.2.tgz",
-      "integrity": "sha1-5P805slf37WuzAjeZZb0NgWn20U=",
+      "integrity": "sha1-5P805slf37WuzAjeZZb0NgWn20U="
-      "optional": true
     },
     "nanomatch": {
       "version": "1.2.9",

website/client/components/header/index.vue

@@ -55,7 +55,6 @@ div
   }
 
   #app-header {
-    margin-top: 56px;
     padding-left: 24px;
     padding-top: 9px;
     padding-bottom: 8px;

website/client/components/header/menu.vue

@@ -3,60 +3,60 @@ div
   inbox-modal
   creator-intro
   profile
-  b-navbar.navbar.navbar-inverse.fixed-top.navbar-expand-lg(type="dark", :class="navbarZIndexClass")
+  b-navbar.topbar.navbar-inverse.static-top.navbar-expand-lg(type="dark", :class="navbarZIndexClass")
-    .navbar-header
+    b-navbar-brand.brand
       .logo.svg-icon.d-none.d-xl-block(v-html="icons.logo")
-      .svg-icon.gryphon.d-md-block.d-none.d-xl-none
+      .svg-icon.gryphon.d-xs-block.d-xl-none
-      .svg-icon.gryphon.d-sm-block.d-lg-none.d-md-none
+    b-nav-toggle(target='menu_collapse').menu-toggle
-    b-nav-toggle(target='nav_collapse')
+    .quick-menu.mobile-only.form-inline
-    b-collapse#nav_collapse.collapse.navbar-collapse.justify-content-between.flex-wrap(is-nav)
+      a.item-with-icon(@click="sync", v-b-tooltip.hover.bottom="$t('sync')")
-      .ul.navbar-nav
+        .top-menu-icon.svg-icon(v-html="icons.sync")
-        router-link.nav-item(tag="li", :to="{name: 'tasks'}", exact)
+      notification-menu.item-with-icon
-          a.nav-link(v-once) {{ $t('tasks') }}
+      user-dropdown.item-with-icon
-        router-link.nav-item.dropdown(tag="li", :to="{name: 'items'}", :class="{'active': $route.path.startsWith('/inventory')}")
+    b-collapse#menu_collapse.collapse.navbar-collapse
-          a.nav-link(v-once) {{ $t('inventory') }}
+      b-navbar-nav.menu-list
-          .dropdown-menu
+        b-nav-item.topbar-item(tag="li", :to="{name: 'tasks'}", exact) {{ $t('tasks') }}
-            router-link.dropdown-item(:to="{name: 'items'}", exact) {{ $t('items') }}
+        li.topbar-item(:class="{'active': $route.path.startsWith('/inventory')}")
-            router-link.dropdown-item(:to="{name: 'equipment'}") {{ $t('equipment') }}
+          router-link.nav-link(:to="{name: 'items'}") {{ $t('inventory') }}
-            router-link.dropdown-item(:to="{name: 'stable'}") {{ $t('stable') }}
+          .topbar-dropdown
-        router-link.nav-item.dropdown(tag="li", :to="{name: 'market'}", :class="{'active': $route.path.startsWith('/shop')}")
+            router-link.topbar-dropdown-item.dropdown-item(:to="{name: 'items'}", exact) {{ $t('items') }}
-          a.nav-link(v-once) {{ $t('shops') }}
+            router-link.topbar-dropdown-item.dropdown-item(:to="{name: 'equipment'}") {{ $t('equipment') }}
-          .dropdown-menu
+            router-link.topbar-dropdown-item.dropdown-item(:to="{name: 'stable'}") {{ $t('stable') }}
-            router-link.dropdown-item(:to="{name: 'market'}", exact) {{ $t('market') }}
+        li.topbar-item(:class="{'active': $route.path.startsWith('/shop')}")
-            router-link.dropdown-item(:to="{name: 'quests'}") {{ $t('quests') }}
+          router-link.nav-link(:to="{name: 'market'}") {{ $t('shops') }}
-            router-link.dropdown-item(:to="{name: 'seasonal'}") {{ $t('titleSeasonalShop') }}
+          .topbar-dropdown
-            router-link.dropdown-item(:to="{name: 'time'}") {{ $t('titleTimeTravelers') }}
+            router-link.topbar-dropdown-item.dropdown-item(:to="{name: 'market'}", exact) {{ $t('market') }}
-        router-link.nav-item(tag="li", :to="{name: 'party'}", v-if='this.user.party._id')
+            router-link.topbar-dropdown-item.dropdown-item(:to="{name: 'quests'}") {{ $t('quests') }}
-          a.nav-link(v-once) {{ $t('party') }}
+            router-link.topbar-dropdown-item.dropdown-item(:to="{name: 'seasonal'}") {{ $t('titleSeasonalShop') }}
-        .nav-item(@click='openPartyModal()', v-if='!this.user.party._id')
+            router-link.topbar-dropdown-item.dropdown-item(:to="{name: 'time'}") {{ $t('titleTimeTravelers') }}
-          a.nav-link(v-once) {{ $t('party') }}
+        b-nav-item.topbar-item(tag="li", :to="{name: 'party'}", v-if='this.user.party._id') {{ $t('party') }}
-        router-link.nav-item.dropdown(tag="li", :to="{name: 'tavern'}", :class="{'active': $route.path.startsWith('/guilds')}")
+        b-nav-item.topbar-item(@click='openPartyModal()', v-if='!this.user.party._id') {{ $t('party') }}
-          a.nav-link(v-once) {{ $t('guilds') }}
+        li.topbar-item(:class="{'active': $route.path.startsWith('/guilds')}")
-          .dropdown-menu
+          router-link.nav-link(:to="{name: 'tavern'}") {{ $t('guilds') }}
-            router-link.dropdown-item(:to="{name: 'tavern'}") {{ $t('tavern') }}
+          .topbar-dropdown
-            router-link.dropdown-item(:to="{name: 'myGuilds'}") {{ $t('myGuilds') }}
+            router-link.topbar-dropdown-item.dropdown-item(:to="{name: 'tavern'}") {{ $t('tavern') }}
-            router-link.dropdown-item(:to="{name: 'guildsDiscovery'}") {{ $t('guildsDiscovery') }}
+            router-link.topbar-dropdown-item.dropdown-item(:to="{name: 'myGuilds'}") {{ $t('myGuilds') }}
-        router-link.nav-item.dropdown(tag="li", :to="{name: 'groupPlan'}", :class="{'active': $route.path.startsWith('/group-plans')}")
+            router-link.topbar-dropdown-item.dropdown-item(:to="{name: 'guildsDiscovery'}") {{ $t('guildsDiscovery') }}
-          a.nav-link(v-once) {{ $t('group') }}
+        li.topbar-item(:class="{'active': $route.path.startsWith('/group-plans')}")
-          .dropdown-menu
+          router-link.nav-link(:to="{name: 'groupPlan'}") {{ $t('group') }}
-            router-link.dropdown-item(v-for='group in groupPlans', :key='group._id', :to="{name: 'groupPlanDetailTaskInformation', params: {groupId: group._id}}") {{ group.name }}
+          .topbar-dropdown
-        router-link.nav-item.dropdown(tag="li", :to="{name: 'myChallenges'}", :class="{'active': $route.path.startsWith('/challenges')}")
+            router-link.topbar-dropdown-item.dropdown-item(v-for='group in groupPlans', :key='group._id', :to="{name: 'groupPlanDetailTaskInformation', params: {groupId: group._id}}") {{ group.name }}
-          a.nav-link(v-once) {{ $t('challenges') }}
+        li.topbar-item(:class="{'active': $route.path.startsWith('/challenges')}")
-          .dropdown-menu
+          router-link.nav-link(:to="{name: 'myChallenges'}") {{ $t('challenges') }}
-            router-link.dropdown-item(:to="{name: 'myChallenges'}") {{ $t('myChallenges') }}
+          .topbar-dropdown
-            router-link.dropdown-item(:to="{name: 'findChallenges'}") {{ $t('findChallenges') }}
+            router-link.topbar-dropdown-item.dropdown-item(:to="{name: 'myChallenges'}") {{ $t('myChallenges') }}
-        router-link.nav-item.dropdown(tag="li", :class="{'active': $route.path.startsWith('/help')}", :to="{name: 'faq'}")
+            router-link.topbar-dropdown-item.dropdown-item(:to="{name: 'findChallenges'}") {{ $t('findChallenges') }}
-          a.nav-link(v-once) {{ $t('help') }}
+        li.topbar-item(:class="{'active': $route.path.startsWith('/help')}")
-          .dropdown-menu
+          router-link.nav-link(:to="{name: 'faq'}") {{ $t('help') }}
-            router-link.dropdown-item(:to="{name: 'faq'}") {{ $t('faq') }}
+          .topbar-dropdown
-            router-link.dropdown-item(:to="{name: 'overview'}") {{ $t('overview') }}
+            router-link.topbar-dropdown-item.dropdown-item(:to="{name: 'faq'}") {{ $t('faq') }}
-            router-link.dropdown-item(to="/groups/guild/a29da26b-37de-4a71-b0c6-48e72a900dac") {{ $t('reportBug') }}
+            router-link.topbar-dropdown-item.dropdown-item(:to="{name: 'overview'}") {{ $t('overview') }}
-            router-link.dropdown-item(to="/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a") {{ $t('askAQuestion') }}
+            router-link.topbar-dropdown-item.dropdown-item(to="/groups/guild/a29da26b-37de-4a71-b0c6-48e72a900dac") {{ $t('reportBug') }}
+            router-link.topbar-dropdown-item.dropdown-item(to="/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a") {{ $t('askAQuestion') }}
             a.dropdown-item(href="https://trello.com/c/odmhIqyW/440-read-first-table-of-contents", target='_blank') {{ $t('requestAF') }}
             a.dropdown-item(href="http://habitica.wikia.com/wiki/Contributing_to_Habitica", target='_blank') {{ $t('contributing') }}
             a.dropdown-item(href="http://habitica.wikia.com/wiki/Habitica_Wiki", target='_blank') {{ $t('wiki') }}
-            a.dropdown-item(@click='modForm()') {{ $t('contactForm') }}
+      .currency-tray.form-inline
-      .user-menu.d-flex.align-items-center
         .item-with-icon(v-if="userHourglasses > 0")
           .top-menu-icon.svg-icon(v-html="icons.hourglasses", v-b-tooltip.hover.bottom="$t('mysticHourglassesTooltip')")
           span {{ userHourglasses }}
@@ -66,6 +66,7 @@ div
         .item-with-icon.gold
           .top-menu-icon.svg-icon(v-html="icons.gold", v-b-tooltip.hover.bottom="$t('gold')")
           span {{Math.floor(user.stats.gp * 100) / 100}}
+      .form-inline.desktop-only
         a.item-with-icon(@click="sync", v-b-tooltip.hover.bottom="$t('sync')")
           .top-menu-icon.svg-icon(v-html="icons.sync")
         notification-menu.item-with-icon
@@ -76,16 +77,6 @@ div
   @import '~client/assets/scss/colors.scss';
   @import '~client/assets/scss/utils.scss';
 
-  @media only screen and (max-width: 1305px) {
-    .nav-link {
-      padding: .8em 1em !important;
-    }
-
-    .navbar-header {
-      margin-right: 5px !important;
-    }
-  }
-
   @media only screen and (max-width: 1200px) {
     .gryphon {
       background-image: url('~assets/images/melior@3x.png');
@@ -94,57 +85,107 @@ div
       background-size: cover;
       color: $white;
       margin: 0 auto;
-
     }
 
-    .svg-icon.gryphon.d-sm-block {
+    .topbar-item {
-      position: absolute;
-      left: calc(50% - 30px);
-      top: 1em;
-    }
-
-    .nav-item .nav-link {
       font-size: 14px !important;
-      padding: 16px 12px !important;
     }
   }
 
-  @media only screen and (max-width: 990px) {
+  @media only screen and (min-width: 992px) {
-    #nav_collapse {
+    .mobile-only {
-      margin-top: 0.6em;
+      display: none !important;
-      flex-direction: row !important;
-      max-height: 650px;
-      overflow: auto;
     }
 
-    .navbar-nav {
+    .topbar {
-      width: 100%;
+      max-height: 56px;
-      background: $purple-100;
-    }
 
-    .user-menu {
+      .currency-tray {
-      flex-direction: column !important;
+        margin-left: auto;
-      align-items: left !important;
+      }
-      background: $purple-100;
-      width: 100%;
 
-      .item-with-icon {
+      .topbar-item {
-        width: 100%;
+        padding-top: 5px;
-        padding-bottom: 1em;
+        height: 56px;
+
+        &.active:not(:hover) {
+          box-shadow: 0px -4px 0px $purple-300 inset;
+        }
+      }
+
+      .topbar-dropdown {
+        position: absolute;
       }
     }
   }
 
-  #nav_collapse {
+  @media only screen and (max-width: 992px) {
-    display: flex;
+    .brand {
+      margin: 0;
+    }
+
+    .gryphon {
+      position: absolute;
+      left: calc(50% - 30px);
+      top: 10px;
+    }
+
+    #menu_collapse {
+      margin: 0.6em -16px -8px;
+      overflow: auto;
+      flex-direction: column;
+      background-color: $purple-100;
+
+      .menu-list {
+        width: 100%;
+        order: 1;
+        text-align: center;
+
+        .topbar-dropdown-item {
+          background: #432874;
+          border-bottom: #6133b4 solid 1px;
+        }
+
+        .topbar-item {
+          &.active {
+            background: #6133b4;
+          }
+
+          background: #4f2a93;
+          border-bottom: #6133b4 solid 1px;
+        }
+      }
+    }
+
+    .currency-tray {
+      justify-content: center;
+      min-height: 40px;
+      background: #271b3d;
+      width: 100%;
+    }
+
+    .desktop-only {
+      display: none !important;
+    }
   }
 
-  nav.navbar {
+  .menu-toggle {
-    background: $purple-100 url(~assets/svg/for-css/bits.svg) right no-repeat;
+    border: none;
-    padding-left: 25px;
+  }
-    padding-right: 12.5px;
+
-    height: 56px;
+  #menu_collapse {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .topbar {
+    background: $purple-100 url(~assets/svg/for-css/bits.svg) right top no-repeat;
+    min-height: 56px;
     box-shadow: 0 1px 2px 0 rgba($black, 0.24);
+
+    a {
+      color: white !important;
+    }
   }
 
   .navbar-z-index {
@@ -154,76 +195,75 @@ div
 
     &-modal {
       z-index: 1035;
+    z-index: 1042; // To stay above snakbar notifications and modals
     }
   }
 
-  .navbar-header {
+  .logo {
-    margin-right: 48px;
+    padding-left: 10px;
-
+    width: 128px;
-    .logo {
+    height: 28px;
-      width: 128px;
-      height: 28px;
-    }
   }
 
-  .nav-item {
+  .quick-menu {
-    .nav-link {
+    display: flex;
-      font-size: 16px;
+    margin-left: auto;
-      color: $white !important;
+  }
-      font-weight: bold;
+
-      line-height: 1.5;
+  .currency-tray {
-      padding: 16px 20px;
+    display: flex;
-      transition: none;
+  }
+
+  .topbar-item {
+    font-size: 16px;
+    color: $white !important;
+    font-weight: bold;
+    transition: none;
+
+    .topbar-dropdown {
+      display: none; // Display is set to block on hover.
+    }
+    
+    >a {
+      padding: .8em 1em !important;
     }
 
     &:hover {
-      .nav-link {
+      color: $white !important;
-        color: $white !important;
+      background: $purple-200;
+
+      .topbar-dropdown {
+        display: block; // Open drop-down on hover.
+        margin-top: 0; // Remove gap between navbar and drop-down. 
         background: $purple-200;
-      }
+        border-radius: 0px;
-    }
+        border: none;
+        box-shadow: none;
+        padding: 0px;
 
-    &.active:not(:hover) {
+        border-bottom-right-radius: 5px;
-      .nav-link {
+        border-bottom-left-radius: 5px;
-        box-shadow: 0px -4px 0px $purple-300 inset;
-      }
-    }
-  }
 
-  // Make the dropdown menu open on hover
+        .topbar-dropdown-item {
-  .dropdown:hover .dropdown-menu {
+          font-size: 16px;
-   display: block;
+          box-shadow: none;
-   margin-top: 0; // remove the gap so it doesn't close
+          color: $white;
-  }
+          border: none;
+          line-height: 1.5;
+          display: list-item;
 
-  .dropdown-menu {
+          &.active {
-    background: $purple-200;
+            background: $purple-300;
-    border-radius: 0px;
+          }
-    border: none;
-    box-shadow: none;
-    padding: 0px;
 
-    border-bottom-right-radius: 5px;
+          &:hover {
-    border-bottom-left-radius: 5px;
+            background: $purple-300;
 
-    .dropdown-item {
+            &:last-child {
-      font-size: 16px;
+              border-bottom-right-radius: 5px;
-      box-shadow: none;
+              border-bottom-left-radius: 5px;
-      color: $white;
+            }
-      border: none;
+          }
-      line-height: 1.5;
-
-      &.active {
-        background: $purple-300;
-      }
-
-      &:hover {
-        background: $purple-300;
-        color: $white;
-
-        &:last-child {
-          border-bottom-right-radius: 5px;
-          border-bottom-left-radius: 5px;
         }
       }
     }
@@ -380,6 +420,7 @@ export default {
 
       this.$root.$emit('bv::show::modal', 'buy-gems', {alreadyTracked: true});
     },
+
   },
 };
 </script>