UX: Remove reliance on JS for category box links

app/assets/javascripts/discourse/components/categories-boxes.js.es6

@@ -1,7 +1,6 @@
 import discourseComputed from "discourse-common/utils/decorators";
 import { isEmpty } from "@ember/utils";
 import Component from "@ember/component";
-import DiscourseURL from "discourse/lib/url";
 
 export default Component.extend({
   tagName: "section",
@@ -19,16 +18,5 @@ export default Component.extend({
   @discourseComputed("categories.[].subcategories")
   hasSubcategories() {
     return this.categories.any(c => !isEmpty(c.get("subcategories")));
-  },
-
-  click(e) {
-    if (!$(e.target).is("a")) {
-      const url = $(e.target)
-        .closest(".category-box")
-        .data("url");
-      if (url) {
-        DiscourseURL.routeTo(url);
-      }
-    }
   }
 });

app/assets/javascripts/discourse/templates/components/categories-boxes.hbs

@@ -13,7 +13,7 @@
       </div>
       <div class="category-details">
         <div class='category-box-heading'>
-          <a href={{c.url}}>
+          <a class="parent-box-link" href={{c.url}}>
             <h3>
               {{#if c.read_restricted}}
                 {{d-icon 'lock'}}

app/assets/stylesheets/common/base/category-list.scss

@@ -30,16 +30,13 @@
   width: 100%;
 
   .category-box {
+    position: relative;
     display: flex;
     flex-direction: row;
     align-content: flex-start;
-    cursor: pointer;
-
     box-sizing: border-box;
-
     border-width: 0;
     border-left-width: 6px;
-
     border-style: solid;
     border-color: $primary-low;
 
@@ -47,6 +44,19 @@
       width: 100%;
     }
 
+    .parent-box-link {
+      // This avoids an issue with nested links by layering links instead
+      &:before {
+        content: "";
+        position: absolute;
+        z-index: 0;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+      }
+    }
+
     .logo.aspect-image img {
       display: block;
       width: auto;
@@ -134,6 +144,7 @@
   }
 
   .subcategory.with-subcategories {
+    position: relative;
     border: none;
     border-left-width: 4px;
     border-left-style: solid;
@@ -153,6 +164,16 @@
         margin-bottom: 0.25em;
         word-wrap: break-word;
       }
+      &:before {
+        // This avoids an issue with nested links by layering links instead
+        content: "";
+        position: absolute;
+        z-index: 0;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+      }
     }
 
     .subcategory-box-inner {