Переделка Навбара

src/blocks/logo/logo.less

@@ -5,6 +5,4 @@
 
 .logo {
   display: block;
-  width: 5.5rem;
-  height: 5.5rem;
 }

src/blocks/navbar/navbar.js

-// Переключение открытого/закрытого положений navbar
-document.getElementById('navbar-toggler').addEventListener('click', function(){
-  this.closest('.navbar').classList.toggle('navbar--open');
+$('#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

@@ -4,38 +4,10 @@
 
 
 .navbar {
-  padding: 0.6rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
   background-color: @gray-lightest;
 
-  &--open {
-
-    // Меняем внешний вид иконки
-    .navbar__toggler-icon {
-      transition: background 0.2s 0;
-      background: transparent;
-
-      &:before,
-      &:after {
-        transition: top 0.2s, transform 0.2s 0.2s;
-        top: 0;
-      }
-
-      &:before {
-        transform: rotate3d(0, 0, 1, 45deg);
-      }
-
-      &:after {
-        transform: rotate3d(0, 0, 1, -45deg);
-      }
-    }
-
-    // Показываем скрытый элемент (если JS работает, иначе он и так виден)
-    .js & .navbar__slidable-content {
-      height: auto;
-      max-height: 90vh;
-    }
-  }
-
   &__inner {
     .container();
 
@@ -57,11 +29,17 @@
   }
 
   &__right {
+
     @media (min-width: @screen-lg) {
       flex-grow: 1;
     }
   }
 
+  &__logo {
+    font-size: @font-size--h3;
+    line-height: 4rem;
+  }
+
   &__toggler {
     position: relative;
     z-index: 1;
@@ -71,7 +49,6 @@
     align-items: center;
     width: 4rem;
     height: 4rem;
-    line-height: 4rem;
     padding: 0.5rem;
     user-select: none;
     cursor: pointer;
@@ -116,43 +93,51 @@
       top: -1rem;
     }
 
+    // Модификатор «открытого» состояния (крестик)
+    &--open {
+      transition: background 0.2s 0;
+      background: transparent;
+
+      &:before,
+      &:after {
+        transition: top 0.2s, transform 0.2s 0.2s;
+        top: 0;
+      }
+
+      &:before {
+        transform: rotate3d(0, 0, 1, 45deg);
+      }
+
+      &:after {
+        transform: rotate3d(0, 0, 1, -45deg);
+      }
+    }
   }
 
   &__slidable-content {
-    transition: all @transition-time;
 
     // Если JS работает, будем скрывать и показывать по клику
     .js & {
-      height: 0;
-      overflow: hidden;
-      max-height: 0;
+      display: none;
     }
 
     // На большой ширине показываем вне зависимости от работы JS
     .js &,
     .no-js & {
       @media (min-width: @screen-lg) {
-        height: auto;
-        overflow: visible;
-        max-height: none;
+        display: flex !important; // он может иметь инлайновый display: none из-за JS
       }
     }
 
-    & > * {
-      margin-top: 1rem;
-      margin-bottom: 1rem;
-    }
-
     @media (min-width: @screen-lg) {
       display: flex;
       align-items: center;
       justify-content: space-between;
-
-      & > * {
-        margin-top: 0;
-        margin-bottom: 0;
     }
   }
+
+  &__nav {
+    margin-bottom: 1rem;
   }
 
   &__form {

src/blocks_library.html

@@ -23,16 +23,14 @@
   <div class="navbar">
     <div class="navbar__inner">
       <div class="navbar__left">
-        <a href="/" class="logo">
-          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100"><rect fill="#F90" width="100" height="100" rx="4" ry="4"/><rect fill="#FFB13B" width="50" height="50" rx="4" ry="4"/><rect x="50" y="50" fill="#DE8500" width="50" height="50" rx="4" ry="4"/><g fill="#F90"><circle cx="50" cy="18.4" r="18.4"/><circle cx="72.4" cy="27.6" r="18.4"/><circle cx="81.6" cy="50" r="18.4"/><circle cx="72.4" cy="72.4" r="18.4"/><circle cx="50" cy="81.6" r="18.4"/><circle cx="27.6" cy="72.4" r="18.4"/><circle cx="18.4" cy="50" r="18.4"/><circle cx="27.6" cy="27.6" r="18.4"/></g><path d="M63.086 18.385c0-7.227-5.86-13.086-13.1-13.086-7.235 0-13.096 5.858-13.096 13.085-5.1-5.11-13.395-5.11-18.497 0-5.12 5.12-5.12 13.408 0 18.524-7.234 0-13.103 5.858-13.103 13.084 0 7.23 5.87 13.098 13.103 13.098-5.12 5.11-5.12 13.395 0 18.515 5.102 5.104 13.397 5.104 18.497 0 0 7.228 5.86 13.083 13.096 13.083 7.24 0 13.1-5.855 13.1-13.083 5.118 5.104 13.416 5.104 18.513 0 5.1-5.12 5.1-13.41 0-18.515 7.215 0 13.08-5.87 13.08-13.098 0-7.227-5.865-13.085-13.08-13.085 5.1-5.12 5.1-13.407 0-18.525-5.098-5.11-13.394-5.11-18.514 0z"/><path fill="#FFF" d="M55.003 23.405v14.488L65.26 27.64c0-1.812.69-3.618 2.066-5.005 2.78-2.77 7.275-2.77 10.024 0 2.77 2.766 2.77 7.255 0 10.027-1.377 1.375-3.195 2.072-5.015 2.072L62.1 44.982h14.49c1.29-1.28 3.054-2.076 5.01-2.076 3.9 0 7.08 3.18 7.08 7.087 0 3.906-3.18 7.088-7.08 7.088-1.956 0-3.72-.797-5.01-2.07H62.1l10.23 10.243c1.823 0 3.64.694 5.014 2.086 2.774 2.758 2.774 7.25 0 10.01-2.75 2.773-7.24 2.773-10.025 0-1.373-1.373-2.065-3.193-2.065-5.004L55 62.094v14.5c1.27 1.275 2.084 3.053 2.084 5.012 0 3.906-3.177 7.077-7.098 7.077-3.92 0-7.094-3.167-7.094-7.077 0-1.96.81-3.732 2.08-5.013v-14.5L34.74 72.347c0 1.812-.705 3.627-2.084 5.003-2.77 2.77-7.25 2.77-10.024 0-2.775-2.765-2.775-7.254 0-10.013 1.377-1.39 3.214-2.086 5.012-2.086L37.9 55.01H23.413c-1.29 1.275-3.072 2.07-5.015 2.07-3.918 0-7.097-3.18-7.097-7.087s3.177-7.087 7.096-7.087c1.94 0 3.724.796 5.014 2.076h14.488L27.646 34.736c-1.797 0-3.632-.697-5.012-2.07-2.775-2.773-2.775-7.26 0-10.028 2.773-2.77 7.256-2.77 10.027 0 1.376 1.386 2.084 3.195 2.084 5.005L44.98 37.895V23.407c-1.27-1.287-2.083-3.053-2.083-5.023 0-3.908 3.175-7.08 7.096-7.08 3.92 0 7.097 3.17 7.097 7.08-.002 1.972-.816 3.735-2.087 5.02z"/><g><path d="M5.3 50h89.38v40q0 5-5 5H10.3q-5 0-5-5z"/><path fill="#3F3F3F" d="M14.657 54.21H86.05c2.91 0 5.313 2.386 5.313 5.316v17.91c-27.584-3.403-54.926-8.125-82.01-7.683V59.526c0-2.93 2.39-5.315 5.304-5.315z"/><path fill="#FFF" stroke="#000" stroke-width=".503" d="M18.312 72.927c-2.103-2.107-3.407-5.028-3.407-8.253 0-6.445 5.223-11.672 11.666-11.672 6.447 0 11.668 5.225 11.668 11.672h-6.832c0-2.674-2.168-4.837-4.835-4.837-2.662 0-4.837 2.163-4.837 4.837 0 1.338.55 2.536 1.415 3.42.883.874 2.1 1.405 3.423 1.405v.01c3.233 0 6.146 1.31 8.244 3.417 2.118 2.11 3.424 5.034 3.424 8.248 0 6.454-5.22 11.68-11.667 11.68-6.44 0-11.665-5.222-11.665-11.68h6.828c0 2.68 2.175 4.835 4.838 4.835 2.668 0 4.836-2.156 4.836-4.835 0-1.33-.545-2.527-1.43-3.407-.863-.88-2.08-1.418-3.405-1.418-3.23 0-6.14-1.314-8.258-3.423zM61.588 53.005l-8.244 39.85h-6.85l-8.258-39.85h6.846l4.838 23.337 4.835-23.337zM73.255 69.513h11.683v11.664c0 6.452-5.226 11.678-11.67 11.678-6.44 0-11.665-5.226-11.665-11.678v-16.5h-.017c0-6.448 5.24-11.677 11.667-11.677 6.46 0 11.683 5.225 11.683 11.676h-6.85c0-2.674-2.15-4.837-4.833-4.837-2.647 0-4.82 2.162-4.82 4.836v16.5c0 2.676 2.173 4.838 4.82 4.838 2.682 0 4.834-2.162 4.834-4.827V76.348h-4.834l.002-6.835z"/></g></svg>
-        </a>
+        <a href="/" class="logo  navbar__logo">NTH start project</a>
         <span class="navbar__toggler" id="navbar-toggler">
           <span class="navbar__toggler-icon"></span>
         </span>
       </div>
       <div class="navbar__right">
         <div class="navbar__slidable-content">
-          <nav class="main-nav">
+          <nav class="main-nav  navbar__nav">
             <ul class="main-nav__list">
               <li class="main-nav__item">
                 <a href="" class="main-nav__link">
@@ -73,10 +71,6 @@
               </li>
             </ul>
           </nav>
-          <div class="navbar__message">Текст в шапке</div>
-          <div class="navbar__btns">
-            <a href="" class="btn">Кнопка</a>
-          </div>
           <form class="navbar__form">
             <div class="fields-group">
               <label class="field-text  fields-group__item">
@@ -1434,7 +1428,7 @@
 
     <form action="">
       <div class="row">
-        <fieldset class="col-sm-6 col-md-4 col-lg-3">
+        <fieldset class="col-sm-6 col-md-4">
           <legend>Это <code>legend</code> <code>fieldset</code>-а</legend>
           <label>
             Текст в <code>label</code>
@@ -1454,7 +1448,7 @@
           </select>
           <input type="range" placeholder="input[type=range]">
         </fieldset>
-        <fieldset class="col-sm-6 col-md-4 col-lg-3">
+        <fieldset class="col-sm-6 col-md-4">
           <legend>Легенда</legend>
           <input type="date" placeholder="input[type=date]">
           <input type="time" placeholder="input[type=time]">
@@ -1465,7 +1459,7 @@
           <label><input type="checkbox"> text</label>
           <label><input type="radio"> text</label>
         </fieldset>
-        <fieldset class="col-sm-6 col-md-4 col-lg-3">
+        <fieldset class="col-sm-6 col-md-4">
           <input type="tel" placeholder="input[type=tel]">
           <input type="url" placeholder="input[type=url]">
           <textarea rows="3" placeholder="textarea"></textarea>
@@ -1475,7 +1469,7 @@
             <option>Значение 3</option>
           </select>
         </fieldset>
-        <fieldset class="col-sm-6 col-md-4 col-lg-3">
+        <fieldset class="col-sm-6 col-md-4">
           <input type="reset" value="input[type=reset]"><br>
           <input type="submit" value="input[type=submit]"><br>
           <input type="button" value="input[type=button]"><br>