From a27f79613508ddc8ff72f03b9990aa1bcb154b4d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Saulo=20Mendon=C3=A7a?= <saulomendonca@gmail.com>
Date: Thu, 26 Oct 2017 23:45:06 -0200
Subject: [PATCH] improve design of menu

---
 app/views/layouts/_nav_bar.html.erb | 72 ++++++++++++++++++-----------
 1 file changed, 45 insertions(+), 27 deletions(-)

diff --git a/app/views/layouts/_nav_bar.html.erb b/app/views/layouts/_nav_bar.html.erb
index 2f3d3d8..64009c3 100644
--- a/app/views/layouts/_nav_bar.html.erb
+++ b/app/views/layouts/_nav_bar.html.erb
@@ -2,38 +2,56 @@
 <div class="navbar-fixed">
   <nav>
     <div class="nav-wrapper">
+      <div class="container">
+        <div class="row">
 
-      <div class="row">
+          <div class="col s12 m12 l4">
+            <ul class="left">
+              <li>
+                <a href="" data-activates="slide-out" class="menu-collapse">
+                  <i class="material-icons">menu</i>
+                </a>
+              </li>
+              <li>
+                <a href="#!" class="brand-logo">
+                  <i class="material-icons left">favorite</i>
+                  Hack2Save
+                </a>
+              </li>
+            </ul>
+          </div>
 
-        <div class="col s12 m12 l4">
-          <ul class="left">
-            <li>
-              <a href="" data-activates="slide-out" class="menu-collapse">
-                <i class="material-icons">menu</i>
-              </a>
-            </li>
-            <li>
-              <a href="#!" class="brand-logo">
-                <i class="material-icons left">favorite</i>
-                Hack2Save
-              </a>
-            </li>
+          <ul id="dropdown_institutions" class="dropdown-content">
+            <% Institution.all.each do |institution| %>
+              <li><a onclick="change_institution(<%= institution.id %>)"><%= institution.name %></a></li>
+            <% end %>
           </ul>
-        </div>
 
-        <div class="input-field col s12 m12 l4 hide-on-med-and-down">
-          <i class="material-icons prefix">search</i>
-          <input id="icon_prefix" type="text" class="validate">
-          <label for="icon_prefix">Search...</label>
-        </div>
+          <ul class="right hide-on-med-and-down">
+              <li style="min-width: 300px">
+                <div class="input-field col s12">
+                  <i class="material-icons prefix">search</i>
+                  <input id="search" type="text" class="validate">
+                </div>
+              </li>
+              <li style="min-width: 200px">
+                <a class="dropdown-button right" href="#!" data-activates="dropdown_institutions">
+                  <%= Institution.find(session[:institution]).name %>
+                  <i class="material-icons right">arrow_drop_down</i>
+                </a>
+              </li>
+          </ul>
+
+          <script>
+            function change_institution(institutionId){
+              $.post('<%= set_institution_institutions_path %>', { institution_id: institutionId });
+            }
+
+            $(document).ready(function () {
+              $(".dropdown-button").dropdown();
+            });
+          </script>
 
-        <div class="input-field col s12 m12 l4 hide-on-med-and-down" >
-          <%= form_tag set_institution_institutions_path, method: :post, id: "select_institution" do |f| %>
-            <%= select_tag :institution_id, 
-                           options_for_select(Institution.all.map { |item| [item.name, item.id] }, session[:institution]),
-                           onchange: "$('#select_institution').submit()" %>
-          <% end %>
-          <!-- <label>Filter by institutions</label> -->
         </div>
       </div>
     </div>