Mobile Medium Sidebar

_navigation.scss

.container {
    -webkit-transition: -webkit-transform .2s cubic-bezier(0.2,0.3,0.25,0.9);
    -moz-transition: -moz-transform .2s cubic-bezier(0.2,0.3,0.25,0.9);
    -o-transition: -o-transform .2s cubic-bezier(0.2,0.3,0.25,0.9);
    transition: transform .2s cubic-bezier(0.2,0.3,0.25,0.9);
}

.button--site-nav-trigger {
  @include button($bg: #000, $is-input: true);

  height: 44px;
  width: 44px;
  background: none;
  padding: 0;
  position: fixed;
  left: $padding-view;
  top: $padding-view;
  z-index: 90;

  .site-nav-trigger__icon {
    height: 30px;
    width: 30px;
    }

    &:hover, &:focus {
        .site-nav-trigger__icon {
            fill: white;
        }
    }
}

/******************************************************************
SITE NAVIGATION
******************************************************************/
$width-SiteNav-open: 280px;
$backgroundColor-SiteNav: rgba(51, 51, 50, 1);
$color-SiteNav-links: #BEBDBD;

.site-nav {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    outline: 0;
    background-color: $backgroundColor-SiteNav;
}

.site-nav__container {
    display: none;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    height: 100%;
}

.site-nav-overlay {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 600;
}

.site-nav-visible .site-nav-overlay, .site-nav:focus~.site-nav-overlay {
    left: $width-SiteNav-open;
    z-index: 900;
}

// Is applied to the body class when the menu button is clicked
.site-nav-visible {
    display: block;

    .container {
        -webkit-transform: translate3d($width-SiteNav-open,0,0);
        -moz-transform: translate3d($width-SiteNav-open,0,0);
        -ms-transform: translate3d($width-SiteNav-open,0,0);
        -o-transform: translate3d($width-SiteNav-open,0,0);
        transform: translate3d($width-SiteNav-open,0,0);
    }
    
    .site-nav-overlay {
        display: block;
    }
}

.site-nav-transition {
    .container {
        left: 0;
        position: fixed;
        overflow: hidden;
        width: 100%;
        height: 100%;
        z-index: 800;
    }

    .site-nav__container {
        display: block;
        width: $width-SiteNav-open;
    }
}

.site-nav-list { 
    margin: 0; 
    padding: 0;
    list-style-type: none;
}
.site-nav-list__item {  }

.list__item-btn-y {
    display: block;
    padding: 0 16px 0 52px;
    height: 42px;
    line-height: 45px;
    color: $color-SiteNav-links;
    text-decoration: none;

    &:visited { color: $color-SiteNav-links; }

    &:hover,
    &:focus {
        color: white;
    }
}

.nav-mobile__toggle {
    position: fixed;
    display: block;
    top: 10px;
    left: 10px;
    min-width: 44px;
    height: 44px;
    line-height: 44px;
    padding-left: 44px + 10px;
    background: url('http://placehold.it/44/333333/cccccc') no-repeat;
    z-index: 100;
}

index.html

<nav class="site-nav" tabindex="-1" data-sitenav="main">
    <div class="site-nav__container">
        <ul class="site-nav-list">
            <li class="site-nav-list__item"><a class="list__item-btn-y" href="#">Projects</a></li>
            <li class="site-nav-list__item"><a class="list__item-btn-y" href="#">About us</a></li>
            <li class="site-nav-list__item"><a class="list__item-btn-y" href="#">Blog</a></li>
            <li class="site-nav-list__item"><a class="list__item-btn-y" href="#">Contact</a></li>
        </ul>
    </div>
</nav>
<div class="site-nav-overlay" data-sitenav="trigger-main"></div>

<div class="container">
    <button class="button--site-nav-trigger" data-sitenav="trigger-main">
        <svg version="1.1" id="burger" class="site-nav-trigger__icon icon--burger" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
        width="76px" height="58px" viewBox="12.001 21 76 58" enable-background="new 12.001 21 76 58" xml:space="preserve">
            <g>
                <path d="M83.863,46H16.137c-2.284,0-4.136,1.791-4.136,4s1.852,4,4.136,4h67.727c2.284,0,4.136-1.791,4.136-4S86.149,46,83.863,46z
                "/>
                <path d="M83.863,71H16.137c-2.284,0-4.136,1.791-4.136,4s1.852,4,4.136,4h67.727c2.284,0,4.136-1.791,4.136-4S86.149,71,83.863,71z
                "/>
                <path d="M16.137,29h67.727c2.284,0,4.136-1.791,4.136-4s-1.852-4-4.136-4H16.137c-2.284,0-4.136,1.791-4.136,4S13.851,29,16.137,29
                z"/>
            </g>
        </svg>
    </button>
</div>

jquery.sidebar.js

function sideBar(){
    var $body = $('body');
    var $sitenav = $("*[data-sitenav='main']");
    var isVisible = false;
    var isTransitioning = false;

    $("*[data-sitenav='trigger-main']").on('click', function(e){
        if($( window ).width() >= 1030) {
            e.preventDefault();
            return;
        }
        if(isTransitioning && isVisible) {
            $body.removeClass('site-nav-visible');
            isVisible = false;
            setTimeout(function(){
                $body.removeClass('site-nav-transition');
                isTransitioning = false;
            },200);
        } else {
            $body.addClass('site-nav-visible');
            $body.addClass('site-nav-transition');
            isVisible = true;
            isTransitioning = true;
        }
    });
}