New TC navigation

by Ivan Vasilyev

HTML

<div width="100%">
<aside class="navigation-box">
  <section class="account">
    <a href="#">
      <h1 class="account__title">Megaparty</h1>
      <h2 class="account__type">Организатор</h2>
    </a>
  </section>
  <section class="i-nav-wrap">
    <nav class="main-nav">
      <ul class="main-nav__items-list">
        <li class="main-nav__item">
          <a href="#">
            <svg class="main-nav__item-ico" viewBox="0 0 56 48" xmlns="http://www.w3.org/2000/svg">
              <path d="M56.42 19.79L28.21 0 0 19.79l1.79 2.526 4.807-3.372v29.16h43.226v-29.16l4.805 3.372 1.79-2.525zM23.96 45.015V32.542h8.494v12.472h-8.494zm22.753 0H35.563v-15.56H20.855v15.56H9.705v-28.25L28.209 3.78l18.505 12.984v28.25z" />
            </svg>
            <span class="main-nav__item-title">Главная</span>
          </a>
        </li>
        <li class="main-nav__item main-nav__item_active">
          <a href="#">
            <svg class="main-nav__item-ico" viewBox="0 0 57 46" xmlns="http://www.w3.org/2000/svg">
              <path d="M28.502 0c-5.44 0-9.866 4.45-9.866 9.916v12.578c0 5.467 4.427 9.917 9.866 9.917 5.44 0 9.866-4.45 9.866-9.916V9.916C38.368 4.45 33.94 0 28.502 0zm6.576 22.494c0 3.644-2.95 6.61-6.576 6.61-3.625 0-6.576-2.966-6.576-6.61V9.916c0-3.644 2.95-6.61 6.576-6.61 3.625 0 6.576 2.966 6.576 6.61v12.578z"
              />
              <path d="M42.662 20.608l.048 1.742c0 7.875-6.373 14.283-14.208 14.283S14.29 30.225 14.29 22.35v-1.742H11v1.742c0 9.14 6.976 16.668 15.857 17.506v2.836H17.15V46h22.41v-3.307h-9.413v-2.837C39.024 39.018 46 31.49 46 22.35v-1.742h-3.338z" />
            </svg>
            <span class="main-nav__item-title">Мероприятия</span>
          </a>
        </li>
        <li class="main-nav__item">
          <a href="#">
            <svg class="main-nav__item-ico" viewBox="0 0 57 46" xmlns="http://www.w3.org/2000/svg" width="57" height="46">
              <path d="M49.587...

SCSS

$color_nav_bg_grey: #383838;
$color_light_grey: #979797;
$color_grey: #2c2c2c;
$color_dark_grey: #232323;
$color_tc_yellow: #FFD900;

/* sub-nav */

$color_sub_grey: #d8d8d8;
$color_sub_border: #404040;
$collapse-nav-size: 900px;
body,
html {
  padding: 0;
  margin: 0;
}

.navigation-box {
  float: left;
  background: $color_nav_bg_grey;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  overflow: auto;
}

.icon-symbol {
  display: none;
}

.account {
  box-sizing: border-box;
  padding: 20px;
  border-bottom: 1px solid $color_dark_grey;
  max-height: 85px;
  a {
    text-decoration: none;
  }
  &__title {
    font-family: 'PT Sans';
    font-size: 1.5rem;
    font-weight: normal;
    color: white;
    margin: 0;
    padding: 0;
  }
  &__type {
    font-family: 'PT Sans';
    font-size: 1rem;
    font-weight: normal;
    line-height: 1;
    color: $color_light_grey;
    margin: -.25em 0 0 0;
    padding: 0;
  }
}

$block-name: main-nav;
.i-nav-wrap {
  display: flex;
  position: relative;
  min-height: calc(100vh - 85px);
  /* 85px - account block height */
}

.#{$block-name} {
  flex: 1;
  width: 40px;
  font-size: .875rem;
  background: $color_grey;
  position: relative;
  z-index: 1;
  @media (min-width: $collapse-nav-size) {
    width: 150px;
  }
  &__items-list {
    list-style: none;
    padding: 0;
    margin: 0;
    &:after {
      content: '';
      display: block;
      height: 70px;
      width: 100%;
    }
  }
  a {
    text-decoration: none;
    display: block;
    padding: 10px;
    border-bottom: 1px solid $color_dark_grey;
    @media (min-width: $collapse-nav-size) {
      padding-left: 0;
    }
  }
  &__item-ico {
    width: 1.425em;
    height: 1.425em;
    vertical-align: middle;
    fill: $color_light_grey;
    margin-top: -3px;
  }
  &__item-title {
    color: $color_light_grey;
    font-family: 'PT Sans';
    font-size: 1em;
    font-weight: normal;
    display: none;
    @media (min-width: $collapse-nav-size) {
      display:...

JavaScript

document.querySelector('.main-nav').addEventListener('click', function(e) {
  if (e.target.tagName.toLowerCase() === 'a' || e.target.tagName.toLowerCase() === 'span'  || e.target.tagName.toLowerCase() === 'svg') {
    var subs = document.querySelectorAll('.sub-nav');
    [].forEach.call(subs, function(sub) {
      sub.classList.add('sub-nav_hidden');
      setTimeout(function() {
        sub.classList.remove('sub-nav_hidden');
      }, 250);
    });
  }
});