_navigation.html.erb in refills-0.0.2

- old
+ new
@@ -1,36 +1,59 @@
 <header class="navigation">
   <div class="menu-wrapper">
-    <div class="logo">Logo</div>
-    <p id="js-mobile-menu">MENU</p>
+    <a href="javascript:void(0)" class="logo">
+      <img src="https://raw.github.com/Magnus-G/Random/master/placeholder_logo_1.png" alt="">
+    </a>
+    <p class="navigation-menu-button" id="js-mobile-menu">MENU</p>
     <div class="nav">
-      <ul id="navigation">
-        <li><a href="">Item 1</a></li>
-        <li><a href="">Item 2</a></li>
-        <li><a href="">Item 3</a></li>
-        <li><a href="">Item 4</a></li>
-        <li><a href="">Item 5</a></li>
+      <ul id="navigation-menu">
+        <li class="nav-link"><a href="javascript:void(0)">Products</a></li>
+        <li class="nav-link"><a href="javascript:void(0)">About Us</a></li>
+        <li class="nav-link"><a href="javascript:void(0)">Contact</a></li>
+        <li class="nav-link more"><a href="javascript:void(0)">More</a>
+          <ul class="submenu">
+            <li><a href="javascript:void(0)">Submenu Item</a></li>
+            <li><a href="javascript:void(0)">Another Item</a></li>
+          </ul>
+        </li>
+        
       </ul>
     </div>
-    <ul class="nav-button">
-      <li><a href="">Nav Button</a></li>
-    </ul>
+    <div class="navigation-tools">
+      <div class="search-bar">
+        <div class="search-and-submit">
+          <input type="search" placeholder="Enter Search" />
+          <button type="submit">
+            <img src="https://raw.githubusercontent.com/Magnus-G/Random/master/search-icon.png" alt="">
+          </button>
+        </div>
+      </div>
+      <a href="javascript:void(0)" class="sign-up">Sign Up</a>
+    </div>
   </div>
 </header>
 
-
-
 <script>
   $(function() {
-    var menu = $('#navigation');
+    var menu = $('#navigation-menu');
     var menuToggle = $('#js-mobile-menu');
+    var signUp = $('.sign-up');
 
     $(menuToggle).on('click', function(e) {
       e.preventDefault();
       menu.slideToggle(function(){
         if(menu.is(':hidden')) {
           menu.removeAttr('style');
         }
       });
     });
+
+    // underline under the active nav item
+    $(".nav .nav-link").click(function() {
+      $(".nav .nav-link").each(function() {
+        $(this).removeClass("active-nav-item");
+      });
+      $(this).addClass("active-nav-item"); 
+      $(".nav .more").removeClass("active-nav-item");
+    });
   });
-</script>
\ No newline at end of file
+</script>