Навбар (работа в процессе)

src/blocks/collapse/collapse.html

+<!--DEV
+
+Нужно убрать пробел между @-ами:
+
+@ @include('blocks/collapse/collapse.html')
+
+-->
+<div class="collapse">content</div>

src/blocks/collapse/collapse.less

+// Для импорта в диспетчер подключений: @import './src/blocks/collapse/collapse.less';
+
+@import '../../less/variables.less';     // только для удобства обращения к переменным
+
+
+.collapse {
+  
+}

src/blocks/main-nav/main-nav.less

@@ -4,6 +4,8 @@
 
 
 .main-nav {
+  margin-left: (@grid-gutter-width / -2);
+  margin-right: (@grid-gutter-width / -2);
 
   &__list {
     padding: 0;
@@ -27,4 +29,20 @@
   &__item {
     display: block;
   }
+
+  &__link {
+    display: block;
+    padding-top: 0.4em;
+    padding-bottom: 0.4em;
+    padding-left: (@grid-gutter-width / 2);
+    padding-right: (@grid-gutter-width / 2);
+    color: @gray;
+    text-decoration: none;
+
+    &:hover, &:focus {
+      color: @text-color;
+      background-color: @gray-lighter;
+      text-decoration: none;
+    }
+  }
 }

src/blocks/navbar/navbar.js

-$('#navbar-toggler').on('click', function(){
-  $(this).closest('.navbar')
-    .find('.navbar__slidable-content').slideToggle(250) // Показываем блок панели
-    .end()
-    .find('.navbar__toggler-icon').toggleClass('navbar__toggler-icon--open'); // Меняем вид иконки
-});

src/blocks/navbar/navbar.less

@@ -38,6 +38,13 @@
   &__logo {
     font-size: @font-size--h3;
     line-height: 4rem;
+    color: @text-color;
+    text-decoration: none;
+
+    &:hover, &:focus {
+      text-decoration: none;
+      color: @text-color;
+    }
   }
 
   &__toggler {
@@ -115,6 +122,7 @@
   }
 
   &__slidable-content {
+    padding-top: 0.5em;
 
     // Если JS работает, будем скрывать и показывать по клику
     .js & {

src/blocks_library.html

@@ -24,12 +24,13 @@
     <div class="navbar__inner">
       <div class="navbar__left">
         <a href="/" class="logo  navbar__logo">NTH start project</a>
-        <span class="navbar__toggler" id="navbar-toggler">
+        <a class="navbar__toggler" href="#main-nav-wrapper" id="navbar-toggler" data-toggle="collapse" data-toggle-this-class="navbar__toggler-icon--open" aria-controls="main-nav-wrapper" aria-expanded="false">
           <span class="navbar__toggler-icon"></span>
-        </span>
+        </a>
+        <button class="btn" data-toggle-this-class="btn--primary" data-toggle="collapse" data-target="#main-nav-wrapper" aria-controls="main-nav-wrapper" aria-expanded="false">показать меню</button>
       </div>
       <div class="navbar__right">
-        <div class="navbar__slidable-content">
+        <div class="navbar__slidable-content" id="main-nav-wrapper">
           <nav class="main-nav  navbar__nav">
             <ul class="main-nav__list">
               <li class="main-nav__item">
@@ -71,6 +72,7 @@
               </li>
             </ul>
           </nav>
+          <p>Внимание! Работа этого компонента зависит от наличия в сборке компонента collapse</p>
           <form class="navbar__form">
             <div class="fields-group">
               <label class="field-text  fields-group__item">

src/less/style.less

@@ -63,3 +63,4 @@
 @import './src/blocks/alert-area/alert-area.less';
 @import './src/blocks/loader/loader.less';
 @import './src/blocks/code/code.less';
+@import './src/blocks/collapse/collapse.less';