[Fountation - Top bar] Basic top bar used in almost all projects. #foundation

top-bar.html

  <div class="off-canvas position-right" id="offCanvas" data-off-canvas data-transition="overlap">

    <ul class="menu">
      <li>
        <form class="search outline" action="index.html" method="post">
          <div class="input-group">
            <input class="input-group-field" type="text" placeholder="Vyhľadať...">
            <div class="input-group-button">
              <button type="submit" class="button"><img src="/assets/img/icons/icon-search.svg"></button>
            </div>
          </div>
        </form>
      </li>
      <li {{#ifpage ''}} class="active" {{/ifpage}}>
        <a href="/" title="">Domov</a>
      </li>

    </ul>

    <button class="close-button" aria-label="Close menu" type="button" data-close>
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

  <div id="main" role="main" class="off-canvas-content" data-off-canvas-content>
    <div class="top-bar-container">
      <div id="top-bar" class="top-bar" data-topbar>

        <div class="top-bar-left">
          <a href="/" class="top-bar-logo bg" title="Domov">
           <img src="/assets/img/logo.png" srcset="/assets/img/logo@2x.png 2x" alt="">
          </a>
        </div>

        <div class="top-bar-right show-for-large">
          <ul class="menu">
            <li {{#ifpage 'index'}} class="active" {{/ifpage}}>
              <a href="/" title="">Domov</a>
            </li>
          </ul>
        </div>

        <div class="auto expand cell hide-for-large">
          <button class="top-bar-toggle" type="button" data-toggle="offCanvas">
            <span class="hamburger"></span>
          </button>
        </div>
      </div>
    </div>

  </div>

top-bar.scss

$top-bar-height-mobile: rem-calc(66);
$top-bar-small-offset: 80px;

.top-bar {
    height: $top-bar-height-mobile;
    z-index: 98;
    padding: 0;
    backface-visibility: hidden;
    border-bottom: 1px solid rgba($color: $white, $alpha: 0.1);
    transition: background 0.1s ease;
    transform: height 0.2s ease;
    background: $white;
    max-width: 75rem;
    margin: 0 auto;
    @include breakpoint(large) {
        height: rem-calc(160);
        border: 0;
    }
    @include breakpoint(medium down) {
        padding-left: rem-calc(20);
    }

    ul {
        background: transparent;
    }

    .menu {
        a {
            color: $black;
            font-size: rem-calc(15);
            font-weight: 400;
            margin: rem-calc(0 20);
            padding: rem-calc(18 0);
            letter-spacing: 1.3px;
            vertical-align: middle;
            transition: color 0.15s ease;

            &:hover {
                color: $secondary-color;
            }
        }

        li.active {
            a {
                color: $secondary-color;
                background: transparent;
            }
        }
    }
}

.top-bar-logo {
    img {
        @include breakpoint(medium down) {
            height: 38px;
        }
    }
}

.top-bar-title {
    margin: 0;
    @include breakpoint(large down) {
        width: 100%;
    }
}

.top-bar-container {
    position: relative;
    box-shadow: 0 0 50px rgba($black, 0.05);
}

.top-bar-toggle {
    float: right;
    height: $top-bar-height-mobile;
    width: $top-bar-height-mobile;
    line-height: rem-calc(32);
    font-size: rem-calc(14);
    text-transform: uppercase;
    color: $light-gray;
    cursor: pointer;
    border-radius: 0;
    @include breakpoint(large) {
        line-height: rem-calc(40);
    }
}

.top-bar {
    .show-for-large {
        @include breakpoint(1250px down) {
            display: none;
        }
    }

    .hide-for-large {
        @include breakpoint(1250px down) {
            display: block !important;
        }
    }
}
/*
 |--------------------------------------------------------------------------
 | Off canvas
 |--------------------------------------------------------------------------
 */
.off-canvas {
    color: $white;
    padding: rem-calc(60 20 30 20);
    font-size: rem-calc(16);

    &.is-transition-overlap {
        z-index: 9999;
    }

    a {
        color: white;
        text-align: center;

        img {
            margin: rem-calc(0 10);
        }
    }

    .menu {
        display: block;
        margin-bottom: rem-calc(20);
        margin-top: rem-calc(20);

        li {
            display: block; //border-bottom: 1px solid rgba($color: $white, $alpha: .1)
        }

        .active > a{
            background-color: transparent;
            color: $secondary-color;
        }

        a {
            outline: none;
            padding: rem-calc(20 0);

            &:focus,
            &:hover {
                text-decoration: underline;
            }
        }
    }

    .close-button {
        right: 20px;
        top: 10px;
        font-size: 3em;
        color: $white;
        opacity: 0.5;
    }

}
/*
 |--------------------------------------------------------------------------
 | Other
 |--------------------------------------------------------------------------
 */
.hamburger {
    @include hamburger($color: $black, $color-hover: $black, $height: 12px);
    position: relative;
    top: -1px;
}