Make categories links (#1152)

* Mkae buttons links

* Linting

* More linting

Author: tunetheweb

src/js/components/drilldownHeader.js

@@ -22,8 +22,18 @@ function setCategories(categories) {
     const _categories = categories.slice(0,5);
     _categories.forEach((category)  => {
       const cellTemplate = document.createElement('li');
-      cellTemplate.className = 'cell';
-      cellTemplate.textContent = category;
+      cellTemplate.className = 'cell btn';
+      const link = document.createElement('a');
+      link.textContent = category;
+      const urlParams = new URLSearchParams(window.location.search);
+      urlParams.set('category', category);
+      const tech = urlParams.get('tech');
+      if (tech) {
+        urlParams.delete('tech');
+        urlParams.set('selected', tech);
+      }
+      link.href=`/reports/techreport/category?${urlParams.toString()}`;
+      cellTemplate.appendChild(link);
       list.appendChild(cellTemplate);
     });
 

static/css/techreport/techreport.css

@@ -401,7 +401,6 @@ nav {
 .skip {
   position: absolute;
   z-index: 999;
-  clip: rect(0 0 0 0);
   clip-path: inset(50%);
   height: 1px;
   overflow: hidden;
@@ -411,7 +410,6 @@ nav {
 }
 
 .skip:focus-visible {
-  clip: unset;
   clip-path: unset;
   width: unset;
   height: unset;
@@ -1587,6 +1585,19 @@ select {
   border-radius: 1rem;
   border: 1px solid var(--color-text);
   font-size: 0.875rem;
+  display:flex;
+  margin-right: 0;
+}
+
+.intro .categories .cell:has(a) {
+  padding: 0;
+}
+
+.intro .categories .cell a {
+  padding: 0.5rem 0.75rem;
+  flex-grow: 1;
+  text-decoration: none;
+  color: inherit;
 }
 
 .page-content {