added the search toggle functionality in the navbar

foundation/public/css/erpnext-org-theme.css

@@ -6,15 +6,18 @@ a {
   color: var(--dark-grey);
   /*  */
 }
+
 .js-search-form {
-  position: relative;
+  right: 0.75rem;
 }
+
 .js-search-input-icon {
   position: absolute;
-  right: 1.5rem;
+  right: 1.75rem;
   top: 50%;
   transform: translateY(-50%);
 }
+
 .js-search-icon {
   cursor: pointer;
 }

foundation/public/js/index.js

@@ -0,0 +1,23 @@
+// Copyright (c) 2018, Frappe Technologies Pvt. Ltd. and contributors
+// For license information, please see license.txt
+
+frappe.ready(function(){
+
+    var searchButton = document.querySelector(".js-search-icon");
+    var searchForm = document.querySelector(".js-search-form");
+    var searchInput = document.querySelector(".js-search-input");
+    var searchInputButton = document.querySelector(".js-search-input-icon");
+
+    searchButton.addEventListener("click", function(){
+        searchForm.classList.remove("display-none");
+    });
+
+    searchInput.addEventListener("blur", function(){
+        // this is not working... todo_fn
+        searchForm.classList.add("display-none");
+    }, false)
+
+    searchInputButton.addEventListener("click", function(){
+        searchForm.classList.add("display-none");
+    })
+})

foundation/templates/base.html

@@ -26,7 +26,11 @@
     <script type="text/javascript" src="{{ link|abs_url }}"></script>
     {%- endfor -%}
 
-    {%- block script %}{%- endblock %}
+    {%- block script %}
+        <script>
+        {% include 'public/js/index.js' %}
+        </script>
+    {%- endblock %}
 
     <!-- csrf_token -->
 </body>

foundation/templates/includes/navbar/navbar.html

@@ -24,8 +24,8 @@
 			{% endif %}
 			<!-- breadcrumbs -->
 		</div>
-		<div class="right flex align-item-center">
-			<a class="hover-light-grey border-radius ml3" href="/login">
+		<div class="right flex align-item-center display-rel">
+			<a class="hover-light-grey border-radius ml3 display-none" href="/login">
 				Login
 			</a>
 			<a class="hover-light-grey border-radius ml3" href="">
@@ -40,8 +40,8 @@
 				</g>
 			</svg>
 
-			<form class="js-search-form display-none">
-				<input type="text" class="js-search-input" aria-label="Search erpnext.org"></input>
+			<form class="js-search-form display-abs display-none">
+				<input type="text" class="js-search-input ph1" aria-label="Search erpnext.org"></input>
 
 				<svg class="js-search-input-icon icon" viewBox="0 0 22.780561 22.145968" height="83.701294" width="86.099762">