<body>
    <div class="siderbar-gnb">
        <div class="siderbar-content">
        </div>
        <!--.siderbar-content-->
        <div class="sidebarbtn-wrap">
            <div class="sidebar-btn">
                <button class="sidebar-flip"></button>
            </div>
        </div>
    </div>
    <!--.siderbar-gnb-->
</body>
button {
  border: 0 none;
  background:0;
  color:white;
  outline:none;
  display:block;
  width:100%;
  padding:20px 0;
  text-align:center;
}

.sidebarbtn-wrap {
  background-color: #323232;
  position: absolute;
  width: 39px;
  padding: 20px 0;
  top: 50%;
  left: -40px;
}

.siderbar-gnb {
  position: fixed;
  right: -191px;
  top:0px;
  width: 190px;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  height: 100%;
  box-shadow: 5px 1px 20px 0px #000;
}

.siderbar-gnb.open {
  right: 0px;
}

.siderbar-content {
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0 auto;
}
// cookie.js file
    var cookieToday = new Date();
    var expiryDate = new Date(cookieToday.getTime() + (365 * 86400000));
    
    function setCookie(name, value, expires, path, theDomain, secure) {
        value = escape(value);
        var theCookie = name + "=" + value +
            ((expires) ? "; expires=" + String(expires) : "") +
            ((path) ? "; path=" + path : "") +
            ((theDomain) ? "; domain=" + theDomain : "") +
            ((secure) ? "; secure" : "");
        document.cookie = theCookie;
    }

    function getCookie(Name) {
        var search = Name + "="
        if (document.cookie.length > 0) { // if there are any cookies 
            var offset = document.cookie.indexOf(search)
            if (offset != -1) { // if cookie exists 
                offset += search.length
                // set index of beginning of value 
                var end = document.cookie.indexOf(";", offset)
                // set index of end of cookie value 
                if (end == -1) end = document.cookie.length
                return unescape(document.cookie.substring(offset, end))
            }
        }
    }

    function delCookie(name, path, domain) {
        if (getCookie(name)) document.cookie = name + "=" +
            ((path) ? ";path=" + path : "") +
            ((domain) ? ";domain=" + domain : "") +
            ";expires=Thu, 01-Jan-70 00:00:01 GMT";
    }

    function CookieUse(x) {
        var x = String(x);
        if (x === "close" || x === "undefined") {
            $('.sidebar-flip').text('close');
            $('.siderbar-gnb').removeClass('open');
            return setCookie('dayCookie', 'close', 1, '/');
        } else if (x === "open") {
            //쿠키가 없으면 설정해줌
            $('.sidebar-flip').text('open');
            $('.siderbar-gnb').addClass('open');
            return setCookie('dayCookie', 'close', 1, '/');
        }
    }

    window.onload = function() {
        CookieUse(getCookie('dayCookie'));
    }

    function CookieFilter(y) {
        var y = String(y);
        if (y === "close" || y === "undefined") {
            $('.sidebar-flip').text('open');
            $('.siderbar-gnb').stop().animate({
                right: 0
            });
            return setCookie('dayCookie', "open");

        } else {
            $('.sidebar-flip').text('close');
            $('.siderbar-gnb').stop().animate({
                right: -192 + 'px'
            });
            return setCookie('dayCookie', "close");
        }
    }

    document.querySelector('.sidebar-btn > .sidebar-flip').addEventListener('click', function(e) {
        e.preventDefault();
        CookieFilter(getCookie('dayCookie'));
    });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. http://code.jquery.com/jquery-3.1.1.min.js