Merge pull request #1 from angusmcleod/fixes

Various fixes

common/common.scss

@@ -29,19 +29,6 @@
         }
       }
 
-      &:hover {
-        color: $main_link_hover_color;
-
-        .custom-header-dropdown {
-          transform: scale(1);
-          transition-delay: 0s;
-        }
-
-        .custom-header-link-caret svg {
-          transform: rotate(90deg);
-        }
-      }
-
       &.with-url {
         cursor: pointer;
       }

desktop/desktop.scss

@@ -2,4 +2,21 @@
   @media screen and (max-width: 712px) {
     display: none;
   }
-}
+
+  .top-level-links {
+    .custom-header-link {
+      &:hover {
+        color: $main_link_hover_color;
+
+        .custom-header-dropdown {
+          transform: scale(1);
+          transition-delay: 0s;
+        }
+
+        .custom-header-link-caret svg {
+          transform: rotate(90deg);
+        }
+      }
+    }
+  }
+}

javascripts/discourse/widgets/custom-header-dropdown.js.es6

@@ -25,7 +25,7 @@ createWidget('custom-header-dropdown', {
 
   click() {
     if (this.site.mobileView) {
-      this.sendWidgetAction("showHeaderLinks"); // in mobile view, close menu on click
+      this.sendWidgetAction("toggleDropdown"); // in mobile view, close menu on click
     }
     DiscourseURL.routeTo(this.attrs.url);
   },

javascripts/discourse/widgets/custom-header-link.js.es6

@@ -9,6 +9,14 @@ createWidget("custom-header-link", {
   tagName: "li.custom-header-link",
   buildKey: (attrs) => `custom-header-link-${attrs.id}`,
 
+  defaultState() {
+    let showDropdown = false;
+
+    return {
+      showDropdown,
+    };
+  },
+
   html(attrs) {
     const iconHTML = buildIconHTML(attrs.icon);
     const titleHTML = h("span.custom-header-link-title", attrs.title);
@@ -51,7 +59,7 @@ createWidget("custom-header-link", {
     };
   },
 
-  buildClasses(attrs) {
+  buildClasses(attrs, state) {
     const classes = [];
 
     if (attrs.url) {
@@ -62,6 +70,10 @@ createWidget("custom-header-link", {
       classes.push("has-dropdown");
     }
 
+    if (state.showDropdown) {
+      classes.push("show-dropdown");
+    }
+
     return classes;
   },
 
@@ -108,9 +120,18 @@ createWidget("custom-header-link", {
     return h("span.custom-header-link-caret", iconNode("caret-down"));
   },
 
+  clickOutside() {
+    this.state.showDropdown = false;
+    this.scheduleRerender();
+  },
+
+  toggleDropdown() {
+    this.state.showDropdown = !this.state.showDropdown;
+  },
+
   click() {
     if (this.site.mobileView) {
-      this.sendWidgetAction("showHeaderLinks"); // in mobile view, close menu on click
+      this.toggleDropdown();
     }
     DiscourseURL.routeTo(this.attrs.url);
   },

mobile/mobile.scss

@@ -1,45 +1,22 @@
 @import "mixins";
 
-/*.mobile-view {
-  .top-level-links {
-    @include dropdown;
-    position: fixed;
-    left: 0;
-    margin: 0;
-    top: var(--header-offset);
-    width: 100%;
-    flex-flow: row wrap;
-    align-items: flex-start;
-    justify-content: flex-start;
-    overflow: scroll;
-    max-height: 90vh;
-
-    li {
-      width: 100%;
-
-      @media screen and (min-width: 768px) {
-        width: auto;
+.mobile-view {
+  .custom-header-links {
+    .top-level-links {
+      .custom-header-link {
+        &.show-dropdown {
+          color: $main_link_hover_color;
+
+          .custom-header-dropdown {
+            transform: scale(1);
+            transition-delay: 0s;
+          }
+
+          .custom-header-link-caret svg {
+            transform: rotate(90deg);
+          }
+        }
       }
     }
   }
-
-  .custom-header-dropdown {
-    display: block;
-    position: initial;
-    transform: scale(1);
-    box-shadow: none;
-    margin-top: 1rem;
-    min-width: unset;
-
-    .custom-header-link-desc {
-      display: none;
-    }
-  }
-
-  .dropdown-header-open {
-    overflow-y: hidden;
-    height: 100vh;
-    position: fixed;
-  }
 }
-*/