Adding search icon to desktop.

js-src/index.js

@@ -81,6 +81,12 @@ function addListenersSearch() {
     if (search !== null) {
         search.addEventListener('change', onSearchChange);
     }
+    const searchIconDesktop = document.querySelector('nav.desktop a.search-icon');
+    if (searchIconDesktop !== null) {
+        searchIconDesktop.addEventListener('click', (e) => {
+            onFakeSearchClick(e)
+        })
+    }
 }
 
 function _port() {

public/css/styles.css

@@ -148,6 +148,18 @@ body {
     display: none; }
     body nav.desktop a {
       vertical-align: middle; }
+    body nav.desktop a.search-icon {
+      width: 60px;
+      height: 60px;
+      display: flex;
+      align-items: center;
+      justify-content: center; }
+      body nav.desktop a.search-icon img {
+        background: aliceblue;
+        border-radius: 10px;
+        padding: 10%;
+        width: 60%;
+        height: 60%; }
   body nav.mobile-foldable {
     display: none;
     background: blueviolet;

public/css/styles.scss

@@ -208,6 +208,20 @@ body {
     a {
       vertical-align: middle;
     }
+    a.search-icon {
+    	width: 60px;
+	height: 60px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+	img {
+            background: aliceblue;
+            border-radius: 10px;
+            padding: 10%;
+            width: 60%;
+            height: 60%;
+	}
+    }
   }
 
   nav.mobile-foldable {

templates/page/_desktop_menu.html.ep

@@ -20,5 +20,5 @@ for my $category_key (@sorted_categories) {
     my $selected = defined($target_category_slug) && $category->{slug} eq $target_category_slug;
     %><a class="<%=$selected && "selected" %>" href="<%= '/'.$category->{slug} %>"><%==$category->{menu_text}%></a><% 
 }
-%></nav>
+%><a href="#" class="search-icon"><img alt="" src="/img/search.svg"/></a></nav>