Merge pull request #60 from spark-solutions/SD-542-move-navigation-he…

…lper

[SD-542] Move NavigationHelper

frontend/app/helpers/spree/navigation_helper.rb

@@ -0,0 +1,39 @@
+module Spree
+  module NavigationHelper
+    def categories_data
+      [
+        {
+          name: :women,
+          url: nested_taxons_path('women'),
+          subcategories: [
+            { dresses: nested_taxons_path('women/dresses') },
+            { shirts_and_blouses: nested_taxons_path('women/shirts-and-blouses') },
+            { t_shirts_and_tops: nested_taxons_path('women/tops-and-t-shirts') },
+            { sweaters: nested_taxons_path('women/sweaters') },
+            { skirts: nested_taxons_path('women/skirts') },
+            { jackets_and_coats: nested_taxons_path('women/jackets-and-coats') }
+          ]
+        },
+        {
+          name: :men,
+          url: nested_taxons_path('men'),
+          subcategories: [
+            { shirts: nested_taxons_path('men/shirts') },
+            { t_shirts: nested_taxons_path('men/t-shirts') },
+            { sweaters: nested_taxons_path('men/sweaters') },
+            { jackets_and_coats: nested_taxons_path('men/jackets-and-coats') }
+          ]
+        },
+        {
+          name: :sportswear,
+          url: nested_taxons_path('sportswear'),
+          subcategories: [
+            { tops: nested_taxons_path('sportswear/tops') },
+            { pants: nested_taxons_path('sportswear/pants') },
+            { sweatshirts: nested_taxons_path('sportswear/sweatshirts') }
+          ]
+        }
+      ]
+    end
+  end
+end

frontend/app/views/spree/shared/_category_nav_bar.html.erb

@@ -0,0 +1,41 @@
+<div class="container p-0 d-flex justify-content-xl-around mx-auto">
+  <div class="row">
+    <div class="category-links">
+      <div class="category-links-header text-uppercase">
+        <%= Spree.t('category_nav_bar.categories')%>
+      </div>
+
+      <ul class="pl-0">
+        <% link_categories.each do |link_category| %>
+          <li>
+            <a href="<%= link_category.values.first %>" class="text-uppercase" >
+              <%= I18n.t("navigation.subcategories.#{link_category.keys.first}") %>
+            </a>
+          </li>
+        <% end %>
+      </ul>
+    </div>
+
+    <%= link_to nested_taxons_path('streetstyle') do %>
+      <div class="category-image category-image text-center mx-3">
+        <%= main_nav_image(category, "summer_collection") %>
+
+        <div class="category-box">
+          <div class="category-box-small-text"><%= Spree.t('category_nav_bar.new_collection') %></div>
+          <div class="category-box-big-text"><%= Spree.t('category_nav_bar.summer_2019') %></div>
+        </div>
+      </div>
+    <% end %>
+
+    <%= link_to nested_taxons_path('summer-sale') do %>
+      <div class="category-image category-image text-center mx-3">
+        <%= main_nav_image(category, "special_offers") %>
+
+        <div class="category-box">
+          <div class="category-box-small-text"><%= Spree.t('category_nav_bar.special_offers') %></div>
+          <div class="category-box-big-text"><%= Spree.t('category_nav_bar.get_up_to_30_percent_off') %></div>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>

frontend/app/views/spree/shared/_main_nav_bar.html.erb

@@ -1,16 +1,16 @@
-<nav id="main-nav-bar" class="navbar">
-  <ul class="nav" data-hook>
-    <li id="home-link" class="nav-item" data-hook>
-      <%= link_to Spree.t(:home), spree.root_path, class: 'nav-link' %>
+<ul class="nav h-100 main-nav-bar" data-hook>
+  <% categories_data.each do |category| %>
+    <li class="navbar main-nav-bar-dropdown main-nav-bar-category" data-hook>
+      <a href="<%= category[:url] %>" class="p-2 main-nav-bar-item main-nav-bar-category-button">
+        <%= category[:name] %>
+      </a>
+
+      <div class="w-100 shadow main-nav-bar-category-dropdown">
+        <%= render partial: 'spree/shared/category_nav_bar', locals: {
+          link_categories: category[:subcategories],
+          category: category[:name]
+        } %>
+      </div>
     </li>
-  </ul>
-  <ul class="nav navbar-right" data-hook>
-    <li id="link-to-cart" class="nav-item" data-hook>
-      <noscript>
-        <%= link_to_cart %>
-      </noscript>
-      &nbsp;
-    </li>
-    <script>Spree.fetch_cart()</script>
-  </ul>
-</nav>
+  <% end %>
+</ul>

frontend/app/views/spree/shared/_mobile_navigation.html.erb

@@ -0,0 +1,70 @@
+<div class="position-fixed text-uppercase d-xl-none mobile-navigation">
+  <div class="d-flex align-items-center bg-white header-spree" data-hook>
+    <div class="container-fluid header-spree-fluid">
+      <div class="d-flex flex-nowrap align-items-center">
+        <div class="d-xl-none flex-grow-1">
+          <button id="mobile-navigation-back-button" aria-label="<%= Spree.t('nav_bar.go_to_previous_menu') %>">
+            <%= icon(name: 'arrow-right',
+                     classes: 'd-sm-none spree-icon-arrow spree-icon-arrow-left',
+                     width: 18,
+                     height: 18) %>
+            <%= icon(name: 'arrow-right',
+                     classes: 'd-none d-sm-inline spree-icon-arrow spree-icon-arrow-left',
+                     width: 17,
+                     height: 28) %>
+          </button>
+        </div>
+        <figure class="logo flex-grow-0 flex-xl-grow-1 order-xl-0 header-spree-fluid-logo" data-hook>
+          <%= logo %>
+        </figure>
+        <div id="top-nav-bar-mobile" class="text-right flex-grow-1 header-spree-fluid-secondary-navigation" data-hook>
+          <button id="mobile-navigation-close-button" aria-label="<%= Spree.t('nav_bar.close_menu') %>">
+            <%= icon(name: 'close',
+                     classes: 'd-sm-none',
+                     width: 17,
+                     height: 17) %>
+            <%= icon(name: 'close',
+                     classes: 'd-none d-sm-inline',
+                     width: 26,
+                     height: 26) %>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <ul class="list-unstyled position-relative h-100 mobile-navigation-list">
+    <% categories_data.each do |category| %>
+      <li class="d-flex justify-content-between align-items-center mobile-navigation-list-item">
+        <a class="w-75" href="<%= category[:url] %>">
+          <%= I18n.t("navigation.categories.#{category[:name]}") %>
+        </a>
+
+        <a class="w-25 text-right mobile-navigation-category-link" data-category="<%= category[:name].to_s %>" href="#" aria-label="<%= Spree.t('go_to_category')%>">
+          <%= icon(name: 'arrow-right',
+                   classes: 'd-sm-none spree-icon-arrow spree-icon-arrow-right',
+                   width: 16,
+                   height: 16) %>
+          <%= icon(name: 'arrow-right',
+                   classes: 'd-none d-sm-inline spree-icon-arrow spree-icon-arrow-right',
+                   width: 14,
+                   height: 27) %>
+        </a>
+
+        <ul class="list-unstyled position-absolute mobile-navigation-sublist" data-category="<%= category[:name].to_s %>">
+          <li class="text-center font-weight-bold mobile-navigation-sublist-header">
+            <%= I18n.t("navigation.categories.#{category[:name]}") %>
+          </li>
+
+          <% category[:subcategories].each do |subcategory| %>
+            <li class="d-flex justify-content-between align-items-center mobile-navigation-list-item">
+              <a class="w-75" href="<%= subcategory.values.first %>">
+                <%= I18n.t("navigation.subcategories.#{subcategory.keys.first}") %>
+              </a>
+            </li>
+          <% end %>
+        </ul>
+      </li>
+    <% end %>
+  </ul>
+</div>