From 60d62f94f3050ffdb68116f474115e0ac9745bbf Mon Sep 17 00:00:00 2001
From: curben <curben@users.noreply.gitlab.com>
Date: Sat, 1 Jun 2019 18:51:51 +0930
Subject: [PATCH] feat: add search function to mobile page

* add a gap after search form to prevent misclick
* use addEventListener() instead of onclick()
  - https://stackoverflow.com/a/34216918
---
 source/_posts/how-to-embed-svg.md        |  2 +-
 themes/typing/layout/_partial/header.ejs | 17 ++++++++++++++---
 themes/typing/source/css/typing.css      |  5 ++++-
 themes/typing/source/js/typing.js        | 11 +++++++++--
 4 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/source/_posts/how-to-embed-svg.md b/source/_posts/how-to-embed-svg.md
index cd50fd4..eaae15d 100644
--- a/source/_posts/how-to-embed-svg.md
+++ b/source/_posts/how-to-embed-svg.md
@@ -12,7 +12,7 @@ Website usually embed SVG using `<img>` tag or directly use the `<svg>` tag. Usi
 
 ## Embed SVG file
 
-Utilise `<use>` tag to embed an SVG file in `svg`. For example in this blog, I have a search button on the top right corner (I haven't implement it for mobile). This is how I embed the [search.svg](/svg/search.svg):
+Utilise `<use>` tag to embed an SVG file in `svg`. For example in this blog, I have a search button on the top right corner. This is how I embed the [search.svg](/svg/search.svg):
 
 ```html
 <svg viewBox="0 0 512 512">
diff --git a/themes/typing/layout/_partial/header.ejs b/themes/typing/layout/_partial/header.ejs
index 5a8a8a4..6574494 100644
--- a/themes/typing/layout/_partial/header.ejs
+++ b/themes/typing/layout/_partial/header.ejs
@@ -23,9 +23,20 @@
     <label for="mobile-menu-toggle"><a class="no-underline">&#9776; Menu</a></label>
     <input id="mobile-menu-toggle" type="checkbox"/>
     <ul class="mobile-nav-link">
-    <% for (let i in theme.menu) { %>
-      <a href="<%- url_for(theme.menu[i]) %>"><%= i %></a>
-    <% } %>
+      <div class="searchContainer">
+        <input class="searchBox" type="text" id="searchTxtMob" placeholder="Search...">
+        <a class="searchBtn no-underline" id="searchClickMob" href="#">
+          <svg viewBox="0 0 512 512">
+            <title>Search</title>
+            <desc>Search icon</desc>
+            <use href="/svg/search.svg#search"/>
+          </svg>
+        </a>
+      </div>
+      <p><br></p>
+      <% for (let i in theme.menu) { %>
+        <a class="mobile-nav-link-a" href="<%- url_for(theme.menu[i]) %>"><%= i %></a>
+      <% } %>
     </ul>
     </ul>
   </nav>
diff --git a/themes/typing/source/css/typing.css b/themes/typing/source/css/typing.css
index ebea07b..3f64491 100644
--- a/themes/typing/source/css/typing.css
+++ b/themes/typing/source/css/typing.css
@@ -1407,7 +1407,10 @@ pre .keyword {
   margin-left: 5px;
   padding: 10px;
   position: absolute;
-  text-align: left;
+}
+
+.mobile-nav-link-a {
+  text-align: center;
 }
 
 /* search bar */
diff --git a/themes/typing/source/js/typing.js b/themes/typing/source/js/typing.js
index 5cbaed8..bb1684a 100644
--- a/themes/typing/source/js/typing.js
+++ b/themes/typing/source/js/typing.js
@@ -1,10 +1,17 @@
 // Search button function
 const searchClick = document.getElementById('searchClick')
-searchClick.onclick = function () {
+searchClick.addEventListener('click', () => {
   window.open('https://gitlab.com/search?utf8=%E2%9C%93&search=' +
   document.getElementById('searchTxt').value +
   '&group_id=&project_id=8306723&search_code=true&repository_ref=master')
-}
+}, false);
+
+const searchClickMob = document.getElementById('searchClickMob')
+searchClickMob.addEventListener('click', () => {
+  window.open('https://gitlab.com/search?utf8=%E2%9C%93&search=' +
+  document.getElementById('searchTxtMob').value +
+  '&group_id=&project_id=8306723&search_code=true&repository_ref=master')
+}, false)
 
 /*
 * Copy button and Cloudinary functions.