#740 Render categories examples at the top menu (#743)

* #740  Draft for previews on navigation menu

* #740  Navigation menu with examples

* #740  Improve markup

* #740  Expand subtask on mobile version

front/scss/common/components/navigation.scss

@@ -171,17 +171,38 @@
     display: block;
   }
 
-  &-item {
+  & a {
+    color: $c-nav-subnav-link;
+  }
+
+  & a:hover {
+    color: $c-nav-subnav-link-hover;
+  }
+
+  &-block {
     &:not(:last-child) {
-      margin-bottom: 10px;
+      margin-bottom: 7px;
+      padding-bottom: 7px;
+      border-bottom: 1px solid $c-border-grey;
     }
 
-    &-link {
-      color: $c-nav-subnav-link;
+    & .label {
+      width: 30%;
+      display: inline-block;
+      vertical-align: top;
+
+      & a {
+        text-decoration: underline;
+      }
     }
 
-    &-link:hover {
-      color: $c-nav-subnav-link-hover;
+    & .examples {
+      width: 65%;
+      display: inline-block;
+
+      & .example {
+        margin: 0 0 8px 0;
+      }
     }
 
     &-remove {

front/scss/utilities/_variables.scss

@@ -27,6 +27,7 @@ $w-container-lg: 1200px;
 $c-black: #000;
 $c-banner-01: #e0a03c;
 $c-banner-02: #df6a27;
+$c-border-grey: #ddd;
 $c-error-text: #ed0b00;
 $c-icon-remove: #9b9b9b;
 $c-link: #47a1d2;

templates/components/navigation_menu.html

@@ -6,24 +6,29 @@
   <a class="nav-link" href="{% custom_url 'gbi' %}">Каталог</a>
 
   {% comment %}
-    @todo #736:60m  Show example catalog items at the menu header.
-     Show some catalog items to clarify catalog terms with UX.
-     We had been shown such examples already.
-     See comments of the parent task.
+    @todo #740:60m  Show example Series and Sections in top menu. Mobile too.
+     As categories already shown.
+     Then show all the examples stuff at the mobile version.
+     See pr#737 with removed mobile version template code.
   {% endcomment %}
-  <ul class="nav-subnav js-nav-subnav">
-    <li class="nav-subnav-item">
-      <a class="nav-subnav-item-link" href="{% custom_url 'gbi' %}">Категории</a>
-    </li>
+  <div class="nav-subnav js-nav-subnav">
+    <div class="nav-subnav-block">
+      <div class="label"><a href="{% custom_url 'gbi' %}">Категории</a></div>
+      <ul class="examples">
+        {% for item in categories %}
+          <li class="example"><a href="{{ item.url }}">{{ item.name }}</a></li>
+        {% endfor %}
+      </ul>
+    </div>
 
-    <li class="nav-subnav-item">
-      <a class="nav-subnav-item-link" href="{% custom_url 'series' %}">Серии</a>
-    </li>
+    <div class="nav-subnav-block">
+      <div class="label"><a href="{% custom_url 'series' %}">Серии</a></div>
+    </div>
 
-    <li class="nav-subnav-item">
-      <a class="nav-subnav-item-link" href="{% custom_url 'sections' %}">Типы изделий</a>
-    </li>
-  </ul>
+    <div class="nav-subnav-block">
+      <div class="label"><a href="{% custom_url 'sections' %}">Типы изделий</a></div>
+    </div>
+  </div>
 </li>
 
 <li class="nav-item">