implement dropdown sortinb button

src/layouts/partials/package-grid.html

@@ -22,7 +22,6 @@
           {{- partial "package-thumbnail.html" .}}
         {{ end }}
       </div>
-
     </div>
   </div>
   <hr>
@@ -97,13 +96,13 @@
     popularity: 'popularity',
     last_modified: 'last_modified',
   }
-  let sortBy = 'popularity'; // last_modified
+  let sortBy = sortOptions.popularity; // last_modified
   let sortDirection = 'desc'; // asc
   let limit = 16;
 
   function getPackageThumbs() {
     const grid = document.getElementById('packageGrid');
-    return Array.from(grid.childNodes).filter((e) => e.dataset && e.dataset.name);
+    return Array.from(grid.children).filter((e) => e.dataset && e.dataset.name);
   }
 
   const packagesCount = getPackageThumbs().length;
@@ -129,6 +128,11 @@
     for(const sp of sortedPackages) {
       grid.appendChild(sp);
     }
+    
+    const isPopularity = sortBy === sortOptions.popularity;
+
+    setBtnStyles(sortOptions.popularity, isPopularity);
+    setBtnStyles(sortOptions.last_modified, !isPopularity);
     refreshDisplayedPackages();
   }
 
@@ -155,21 +159,59 @@
     }
   }, false);
 
-  const dropdownPopularityBtn = document.getElementById('dropdownPopularityBtn');
-  dropdownPopularityBtn.addEventListener('click',() => {
-    if (sortBy != sortOptions.popularity) {
-      sortBy = sortOptions.popularity;
-      sortPackages();
-    }
-  }, false);
+  function getSortBtns(type) {
+    const typeBtn = document.getElementById(`dropdown-${type}-btn`);
+    const typeDownBtn = document.getElementById(`${type}-down-btn`);
+    const typeUpBtn = document.getElementById(`${type}-up-btn`);
+    return { typeBtn, typeDownBtn, typeUpBtn };
+  }
 
-  const dropdownRecentBtn = document.getElementById('dropdownRecentBtn');
-  dropdownRecentBtn.addEventListener('click',() => {
-    if (sortBy != sortOptions.last_modified) {
-      sortBy = sortOptions.last_modified;
-      sortPackages();
+  function setBtnStyles(type, active) {
+    const { typeBtn, typeDownBtn, typeUpBtn } = getSortBtns(type);
+    if (active) {
+      typeBtn.classList.add('active');
+      if (sortDirection === 'asc') {
+        typeUpBtn.classList.add('active');
+        typeDownBtn.classList.remove('active');
+      } else {
+        typeDownBtn.classList.add('active');
+        typeUpBtn.classList.remove('active');
+      }
+    } else {
+      typeBtn.classList.remove('active');
+      typeDownBtn.classList.remove('active');
+      typeUpBtn.classList.remove('active');
     }
-  }, false);
+  }
+
+  function configureSortButton(type) {
+    const { typeBtn, typeDownBtn, typeUpBtn } = getSortBtns(type);
+    typeBtn.addEventListener('click',() => {
+      if (sortBy != type) {
+        sortBy = type;
+        sortPackages();
+      }
+    }, false);
+
+    typeDownBtn.addEventListener('click',() => {
+      if (sortBy != type || sortDirection != 'desc') {
+        sortBy = type;
+        sortDirection = 'desc';
+        sortPackages();
+      }
+    }, false);
+
+    typeUpBtn.addEventListener('click',() => {
+      if (sortBy != type || sortDirection != 'asc') {
+        sortBy = type;
+        sortDirection = 'asc';
+        sortPackages();
+      }
+    }, false);
+  }
+
+  configureSortButton(sortOptions.popularity);
+  configureSortButton(sortOptions.last_modified);
 
   sortPackages();
 </script>

src/layouts/partials/sort-direction.html

@@ -0,0 +1,15 @@
+<style>
+    .direction-arrows {
+        float: right;
+    }
+    .direction-arrows span {
+        opacity: 0.3;
+    }
+    .direction-arrows span.active {
+        opacity: 1;
+    }
+</style>
+<div class="direction-arrows">
+    <span id="{{- . -}}-down-btn">&uarr;</span>
+    <span id="{{- . -}}-up-btn">&darr;</span>
+</div>

src/layouts/partials/sort-dropdown.html

@@ -37,11 +37,31 @@
 
 
     .dropdown-content li {
+        position: relative;
         padding: 0px 10px;
         height: 40px;
-        line-height: 40px;;
+        width: 100%;
+        line-height: 40px;
     }
 
+    .dropdown-content li .sort-btn {
+        height: 100%;
+        width: calc(100% - 40px);
+        opacity: 0.6;
+    }
+
+    .dropdown-content li .sort-btn.active {
+        font-weight: bold;
+        opacity: 1;
+    }
+
+    .dropdown-content li .direction-arrows {
+        position: absolute;
+        right: 10px;
+        top: 0px;
+    }
+
+
     .dropdown-content li:hover {
         background: #00ffd0;
         color: black;
@@ -63,8 +83,8 @@
     <div class="dropdown">
         <div class="dropdown-title">SORT ORDER</div>
         <ul class="dropdown-content flex column">
-            <li id="dropdownPopularityBtn">POPULARITY</li>
-            <li id="dropdownRecentBtn">MOST RECENT</li>
+            <li><div id="dropdown-popularity-btn" class="sort-btn">POPULARITY</div> {{- partial "sort-direction.html" "popularity"}}</li>
+            <li><div id="dropdown-last_modified-btn" class="sort-btn">MOST RECENT</div> {{- partial "sort-direction.html" "last_modified"}}</li>
         </ul>
     </div>
 </section>