Как открыть и закрыть меню при клике

$('.menu-icon').click( function(){ 
    if ( $('.s-menu').hasClass('show') ) { 
        $('.s-menu').removeClass('show'); 
    } else { 
        $('.s-menu').removeClass('show'); 
        $('.s-menu').addClass('hide');     
    } 
});

*{ 
	box-sizing: border-box; 
	-moz-box-sizing: border-box; /*Firefox 1-3*/ 
	-webkit-box-sizing: border-box; /* Safari */ 
} 
div{ 
	box-sizing: border-box; 
	-moz-box-sizing: border-box; /*Firefox 1-3*/ 
	-webkit-box-sizing: border-box; /* Safari */ 
} 
body, html{	 
	margin: 0; 
	padding: 0; 
	height: 100%; 
} 
a{ 
	color: #000; 
	text-decoration: none; 
} 
ul{ 
	list-style-type: none; 
	padding: 0; 
} 
.hide{ 
	display: none; 
} 
.show{ 
	display: block; 
} 
/*****Sidebar******/ 
.container{ 
	min-height: 100%; 
	overflow: hidden; 
	float: left; 
	position: fixed; 
} 
.sidebar h3{ 
	font-family: 'Exo 2', sans-serif; 
	color: #333; 
	font-size: 24px; 
	padding: 50px 30px 0 30px; 
	margin: 0; 
} 
.sidebar h4{ 
	font-family: 'Roboto', sans-serif; 
	color: #3971ff; 
	font-size: 16px; 
	padding-left: 30px; 
	font-weight: lighter; 
} 
.sidebar{ 
	background-color: #f3f3f3; 
	border-right: 1px solid #a7a7a7; 
} 
.s-menu{ 
	padding-bottom: 9999px; 
	margin-bottom: -9999px; 
} 
.s-menu li{ 
	padding: 18px 0; 
	padding-left: 25px; 
	font-family: 'Exo 2', sans-serif; 
	border-bottom: 1px solid #a7a7a7; 
	width: 70%; 
	margin: 0 auto; 
	font-size: 16px; 
} 
.s-menu li:last-child{ 
	border: 0; 
} 
.s-menu a{ 
	color:#a7a7a7; 
	transition: all 0.2s; 
} 
.left-line{ 
	width: 14px; 
	height: 2px; 
	background-color: #3971ff; 
	margin-left: -20px; 
	margin-top: -10px; 
	transition: all 0.2s; 
} 
.active .left-line{ 
	width: 28px; 
	transition: all 0.2s; 
} 
.menu-icon{ 
	display: none; 
} 
.active a{ 
	padding-left: 10px; 
	transition: all 0.2s; 
	color: #4c4c4c; 
} 
/******Sections*******/ 
.content{ 
	max-width: 920px; 
	margin: 0 auto; 
} 
/******Section Header*******/ 
.header { 
	background-color: #EAEBED; 
	height: 582px; 
} 
.content img{ 
	margin: 125px; 
} 
.header-text{ 
	margin-top: -450px; 
	margin-left: 450px; 
} 
.header-text h3{ 
	font-size: 30px; 
	margin: 0; 
	font-family: 'Exo 2',sans-serif; 
	font-weight: lighter; 
	color: #4c4c4c; 
} 
.header-text h1{ 
	font-size: 48px; 
	font-family: 'Exo 2',sans-serif; 
	font-weight: lighter; 
	color: #4c4c4c; 
	margin: 0; 
} 
.header-text h1 span{ 
	color: #3971ff; 
} 
.header-text h4{ 
	color: #3971ff; 
	font-family: 'Roboto',sans-serif; 
	font-weight: lighter; 
	font-size: 16px; 
	border-top: 1px solid #232323; 
	border-bottom: 1px solid #232323; 
	display: inline-block; 
	padding:10px 15px; 
} 
.header-text p{ 
	padding: 0; 
	margin: 0; 
	font-family: 'Roboto',sans-serif; 
	font-size: 16px; 
	color: #4c4c4c; 
	line-height: 28px; 
	padding-bottom: 40px; 
} 
.header-text span{ 
	color: #3971ff; 
} 
.header-select{ 
	font-family: 'Roboto',sans-serif; 
	color: #4c4c4c; 
	margin-right: 86px; 
	font-weight: bold; 
	transition: all 0.2s; 
	display: inline-block; 
} 
.header-select:hover{ 
	color: #3971ff; 
	transition: all 0.2s; 
} 
.down-line{ 
	width: 50px; 
	height: 2px; 
	background-color: #3971ff; 
	display: block; 
	margin-top: 10px;	 
	transition: all 0.3s; 
	position: absolute; 
} 
.header-select:hover .down-line{ 
	width: 120px; 
	transition: all 0.3s; 
} 
@media only screen and (max-width: 1200px) { 
	.header-text h1{ 
		font-size: 38px; 
	} 
	.header-text h3{ 
		font-size: 22px; 
	} 
	.header-text h4{ 
		font-size: 15px; 
		padding:5px 10px; 
	} 
	.header-text p{ 
		font-size: 15px; 
		line-height: 23px; 
		padding-bottom: 35px; 
	} 
	.content img { 
		margin: 172px; 
		max-width: 24%; 
	} 
} 
@media only screen and (max-width: 991px) { 
	.container{ 
		min-height: 0; 
		width: 100%; 
	} 
	.sidebar h3{ 
		padding: 10px 0px 0px 20px; 
	} 
	.sidebar h4{ 
		font-size: 15px; 
		margin: 5px 0; 
		padding-left: 20px; 
	} 
	.sidebar{ 
		border: 0;	 
	} 
	.s-menu { 
		padding: 0; 
		margin: 0; 
		margin-top: -65px; 
		line-height:70px; 
		text-align: right; 
	} 
	.left-line{ 
		width: 100%; 
		height: 2px; 
		background-color: #3971ff; 
		margin-left: 0px; 
		margin-top: -22px; 
		transition: all 0.2s; 
	} 
	.s-menu li { 
		border-bottom: 0; 
		margin: 0 13px; 
		padding: 0; 
		width: auto; 
		display: inline-block; 
		font-size: 15px; 
	} 
	/******Sections******/ 
	.sections{ 
		padding-top: 71px; 
	} 
	.content img { 
		max-width: 22%; 
		margin: 116px 0 100px 60px; 
		padding-top: 30px; 
	} 
	.header-text { 
		margin-top: -300px; 
		margin-left: 300px; 
		padding: 0 20px; 
	} 
	.header-text h3 { 
		font-size: 18px; 
	} 
	.header-text h1 { 
		font-size: 30px; 
	} 
	.header-text h4 { 
		font-size: 14px; 
		padding: 4px 8px; 
	} 
	.header-text p { 
		font-size: 14px; 
		line-height: 20px; 
		padding-bottom: 25px; 
	} 
	.header-select{ 
		font-size: 15px; 
	} 
} 
@media only screen and (max-width: 820px) { 
	.content img { 
		max-width: 25%; 
		margin: 0 auto; 
		display: block; 
	} 
	.header-text{ 
		margin-top: 30px; 
		margin-left: 0; 
		text-align: center; 
		padding: 20px 50px; 
	} 
	/*****Menu******/ 
	.sidebar h4 { 
		padding-bottom: 10px; 
	} 
	.s-menu { 
		padding: 0; 
		margin: 0; 
		margin-top: 0; 
		text-align: left;  
		padding-left: 0; 
		display: none; 
	} 
	.s-menu li { 
		border-bottom: 0; 
		margin: 20px 20px; 
		padding: 0px; 
		display: block; 
		font-size: 15px; 
	} 
	.s-menu li:last-child{ 
		padding-bottom: 15px; 
	} 
	.left-line { 
		width: 25px; 
		height: 2px; 
		margin-left: 0px; 
		margin-top: 12px; 
		transition: all 0.2s; 
	} 
	.menu-icon{ 
		display: block; 
		position: absolute; 
		right: 10px; 
		top: 25px; 
		cursor: pointer;  
	} 
} 
@media only screen and (max-width: 480px) { 
	.header-text{ 
		padding: 10px 20px; 
	} 
	.header-select{ 
		display: block; 
		margin: 20px 0; 
		text-align: center; 
	} 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="container"> 
  <div class="sidebar"> 
    <h3>AL-RAYHAN</h3> 
    <h4>UI & UX Designer</h4> 
    <img src="images/menu.png" alt="menu-icon" class="menu-icon"> 
    <ul class="s-menu"> 
      <li><a href="#">SKILLS</a> 
        <div class="left-line"></div> 
      </li> 
      <li><a href="#">EDUCATION</a> 
        <div class="left-line"></div> 
      </li> 
      <li><a href="#">EXPERIENCE</a> 
        <div class="left-line"></div> 
      </li> 
      <li><a href="#">PORTFOLIO</a> 
        <div class="left-line"></div> 
      </li> 
      <li><a href="#">BLOG</a> 
        <div class="left-line"></div> 
      </li> 
      <li><a href="#">PRICING</a> 
        <div class="left-line"></div> 
      </li> 
      <li><a href="#">CONTACT</a> 
        <div class="left-line"></div> 
      </li> 
    </ul> 
  </div> 
</div> 
<!-- Container-->