dropdown menu

encse · Dec 13, 2024 · 39d068a · 39d068a
1 parent 032107b
commit 39d068a
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 5 deletions.
diff --git a/docs/build.js b/docs/build.js
@@ -90,14 +90,19 @@ function fillTemplate(template, replacements) {
 }
 
 function generateYearPicker(year, day, yearToDays) {
-    let res = '';
+    let options = '';
     for (let y of Object.keys(yearToDays).sort()){
         let lastDay =  yearToDays[y][yearToDays[y].length-1];
         let target = `/${y}/${lastDay}/`
-        let selected = y == year ? 'selected="selected"' : '';
-        res += `<option ${selected} value="${target}">${y}</option>`
+        options += `<a href="${target}">${y}</a>`
     }
-    return `<select>${res}</select>`;
+
+    return `<nav class="dropdown">
+            <input type="checkbox" id="dropdown-toggle" class="dropdown-toggle">
+            <label id="dropdown-label" for="dropdown-toggle"><span class="current">${year}<span></label>
+            <div class="dropdown-content">${options}</div>
+        </nav>
+     `;
 }
 
 function generateDayPicker(year, day, yearToDays) {

diff --git a/docs/template.html b/docs/template.html
@@ -114,6 +114,36 @@
             font-size: 150%;
         }
 
+        #dropdown-label {
+            text-align: center;
+        }
+         #dropdown-label  span {
+            padding: 0;
+            margin: 0 0.25em;
+        }
+
+        .dropdown-toggle {
+            display: none; /* Hide the checkbox */
+        }
+
+        .dropdown-content {
+            display: none;
+            position: absolute;
+            z-index: 1;
+            list-style: none;
+            background-color: #0d1117;
+        }
+
+        .dropdown-content {
+            flex-direction: column;
+            padding: 1em;
+            gap: 0.5em;
+            padding: 1em;
+        }
+        #dropdown-toggle:checked  ~ .dropdown-content {
+            display: flex; 
+        }
+
         #top-nav,
         #bottom {
             background: var(--theme-background-color2);
@@ -196,8 +226,9 @@
                 width: 100%;
             }
 
+
             #top-nav span,
-            #top-nav select {
+            #top-nav .dropdown {
                 padding: 0.25em;
             }