Показать / Скрыть меню исчезают / исчезают с правой стороны проблемы css и javascript

Question

У меня проблемы с боковой панелью навигации. Сначала работал правильно, но я не знаю, что я сделал, и я не вижу проблемы. При нажатии кнопки меню меню больше не исчезает с правой стороны. Я пытался решить это уже несколько дней. Кто-нибудь может мне помочь, пожалуйста?

$(function() {
			App.init();
});
var App = {
			init: function() {
						this.side.nav(), this.navigation(), this.hyperlinks(), setInterval("App.datetime();", 1e3)
			},
			side: {
						nav: function() {
									this.toggle(), this.navigation()
						},
						toggle: function() {
									$(".ion-ios-navicon").on("touchstart click", function(e) {
												e.preventDefault(), $(".sidebar").toggleClass("active"), $(".nav").removeClass("active"), $(".sidebar .sidebar-overlay").removeClass("fadeOut animated").addClass("fadeIn animated")
									}), $(".sidebar .sidebar-overlay").on("touchstart click", function(e) {
												e.preventDefault(), $(".ion-ios-navicon").click(), $(this).removeClass("fadeIn").addClass("fadeOut")
									})
						},
						navigation: function() {
									$(".nav-right a").on("touchstart click", function(e) {
												e.preventDefault();
												var t = $(this).attr("href").replace("#", "");
												$(".sidebar").toggleClass("active"), $(".html").removeClass("visible"), "home" == t || "" == t || null == t ? $(".html.welcome").addClass("visible") : $(".html." + t).addClass("visible"), App.title($(this).text())
									})
						}
			}
};
var pagos = document.getElementById("pagos");
var perfil = document.getElementById("perfil");
pagos.onclick = function() {
  document.getElementById("ProfileBody").style.display = "none";
};
perfil.onclick = function() {
	document.getElementById("ProfileBody").style.display = "block";
};

html {
  background: rgb(131,58,180);
  background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
}

.clearfix:after,
.clearfix:before {
  content: '';
  display: table
}

.clearfix:after {
  clear: both;
  display: block
}

.mobile .header {
	z-index:999;
	position:relative;
  top: 20px;
}

.mobile .header .ion-ios-arrow-back {
  min-width: 25px
}

.mobile .header .ion-ios-navicon>i {
  height: 1px;
  width: 20px;
  margin-top: 5px;
  background: #fff;
  position: relative;
  display: inline-block
}

.mobile .header .ion-ios-navicon>i:after,
.mobile .header .ion-ios-navicon>i:before {
  content: '';
  width: inherit;
  height: inherit;
  position: absolute;
  background: inherit
}

.mobile .header .ion-ios-navicon>i:before {
  bottom: 12px
}

.mobile .header .ion-ios-navicon>i:after {
  bottom: 6px
}

.mobile .header  {
	outline:none;
}
.mobile .header,
.mobile .header  {
	-webkit-appearance:none;
}
.mobile .header {
	width:100%;
	border-bottom-color:#aaa;
}

.pull-left {
  float: left
}

.pull-right {
  float: right
}

.html {
  display: none
}

.html.visible,
.visible {
  display: block
}

.sidebar .sidebar-content,
.sidebar .sidebar-overlay {
  top: 0;
  left: 0;
  bottom: 0;
  position: absolute;
  -webkit-transition: all .3s ease-in-out 0s;
  transition: all .3s ease-in-out 0s
}

.sidebar .sidebar-overlay {
  right: 0;
  opacity: 0;
  width: 50%;
  z-index: 999;
  -webkit-transform: scale(0);
          transform: scale(0);

}

.sidebar .sidebar-content {
display: none;
  width: 50%;
  color: #333;
  padding: 15px;
  z-index: 9999;
  background: rgb(131,58,180);
  background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
  -webkit-transform: translateX(200%);
          transform: translateX(200%)
}

.sidebar.active .sidebar-content {

  -webkit-transform: translateX(50%);
          transform: translateX(50%);
}

.sidebar.active .sidebar-overlay {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1)
}

.sidebar .sidebar-content .top-head>span  {
  font-size: 28px;
  font-weight: 400;
  margin-bottom: 5px
}

.sidebar .sidebar-content .nav-right>a {
  color: white;
  display: block;
  font-size: 16px;
  padding: 10px 0;
  line-height: 24px;
  vertical-align: top;
  text-decoration: none
}

.sidebar .sidebar-content .nav-right>a>span {
  color: white;
  font-size: 24px;
  min-width: 40px;
  display: inline-block
}

.html.chats,
.html.search,
.html.compose,
.html.credits,
.html.settings,
.html.welcome {
  margin-top: 70px
}

.on-off {
  display: none
}

.on-off+label {
  width: 30px;
  height: 10px;
  position: relative;
  border-radius: 5px;
  background: #dedee0;
  display: inline-block;
  -webkit-transition: all .3s ease-in-out 0s;
  transition: all .3s ease-in-out 0s
}

.on-off+label:after {
  left: 0;
  top: -2px;
  width: 15px;
  content: '';
  height: 15px;
  position: absolute;
  border-radius: 50%;
  background: #bebdc2;
  -webkit-transition: all .3s ease-in-out 0s;
  transition: all .3s ease-in-out 0s
}

.on-off:checked+label {
  background: #fd99b3
}

.on-off:checked+label:after {
  left: 15px;
  background: #fb3666
}

.btn {
  color: #eee;
  width: 100%;
  border: none;
  font-size: 16px;
  padding: 12px 24px;
  background: #cf0e3f;
  border-radius: 30px
}
 .title{
	font-size:24px;
}
.title p{
	margin:0;
	font-size:16px;
	line-height:18px;
}

.alarm-list {
  margin-top: 70px
}

.alarm-list .note {
  padding: 10px 0
}

.alarm-list .note:nth-child(1) {
  -webkit-animation-duration: .2s;
  animation-duration: .2s
}

.alarm-list .note:nth-child(2) {
  -webkit-animation-duration: .3s;
  animation-duration: .3s
}

.alarm-list .note:nth-child(3) {
  -webkit-animation-duration: .4s;
  animation-duration: .4s
}

.alarm-list .note .time {
  min-width: 35px;
  margin-right: 30px
}

.alarm-list .note .time>.shift,
.alarm-list .note .to-do>.subject {
  color: #ccc;
  font-size: 11px
}

.alarm-list .note .time {
  text-align: center
}

.alarm-list .note .to-do>.title {
  font-size: 14px
}

.alarm-list .note:not(:last-child) {
  position: relative
}

.alarm-list .note:not(:last-child):before {
  bottom: 0;
  width: 82%;
  content: '';
  right: -15px;
  position: absolute;
  border-bottom: 1px solid rgba(170, 170, 170, .5)
}

.user-list .user {
  width: 30px;
  height: 30px;
  margin: 4px;
  overflow: hidden;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid #bbb
}

.user-list .user>img {
  width: 100%
}

.compose .forms .group {
  margin-bottom: 15px
}

.compose .forms .group>label {
  padding: 6px 0;
  min-width: 40px;
  display: inline-block
}

.compose .forms .group>label>span {
  min-width: 20px;
  display: inline-block
}

.compose .forms .group input,
.compose .forms .group textarea {
  color: #fff;
  border: none;
  resize: none;
  min-width: 185px;
  background: 0 0;
  padding: 5px 10px 1px;
  border-bottom: 1px solid rgba(170, 170, 170, .6)
}

.compose .forms .visible {
  width: 100%;
  display: block!important
}

.compose .forms .action {
  margin-top: 50px
}

.compose .forms .group:nth-child(1) {
  -webkit-animation-duration: .1s;
  animation-duration: .1s
}

.compose .forms .group:nth-child(2) {
  -webkit-animation-duration: .2s;
  animation-duration: .2s
}

.compose .forms .group:nth-child(3) {
  -webkit-animation-duration: .3s;
  animation-duration: .3s
}

.compose .forms .group:nth-child(4) {
  -webkit-animation-duration: .4s;
  animation-duration: .4s
}

.chats .tabs-list {
  margin-bottom: 15px
}

.chats .tabs-list .tab {
  float: left;
  color: #aaa;
  font-size: 12px;
  font-weight: 400;
  margin-right: 15px;
  padding-bottom: 2px;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 2px solid transparent
}

.chats .tabs-list .tab.active,
.chats .tabs-list .tab:hover {
  color: #fff;
  border-bottom: 2px solid
}

.chats .active-users .user {
  padding: 5px 0;
  cursor: default
}

.chats .active-users .photo {
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 3px 2px rgba(0, 0, 0, .4)
}

.chats .active-users .photo img {
  width: 100%
}

.chats .active-users .desc {
  margin-left: 15px
}

.chats .active-users .desc p {
  margin: 0;
  font-size: 14px
}

.chats .active-users .desc {
  font-weight: 400
}

.chats .active-users .desc .position {
  color: #aaa;
  font-size: 12px
}

.chats .active-users .user .idle {
  height: 40px;
  position: relative
}

.chats .active-users .user .idle>span {
  top: 50%;
  right: 0;
  width: 15px;
  height: 15px;
  margin-top: -7.5px;
  position: absolute;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid #fff
}

.chats .active-users .user .idle>.online {
  background: #2ecc71
}

.chats .active-users .user .idle>.offline {
  background: #95a5a6
}

.chats .active-users .user .idle>.away {
  background: #f2ca27
}

.chats .active-users .user:nth-child(1) {
  -webkit-animation-duration: .18s;
  animation-duration: .18s
}

.chats .active-users .user:nth-child(2) {
  -webkit-animation-duration: .25s;
  animation-duration: .25s
}

.chats .active-users .user:nth-child(3) {
  -webkit-animation-duration: .35s;
  animation-duration: .35s
}

.chats .active-users .user:nth-child(4) {
  -webkit-animation-duration: .4s;
  animation-duration: .4s
}

.chats .active-users .user:nth-child(5) {
  -webkit-animation-duration: .5s;
  animation-duration: .5s
}

.chats .active-users .user:nth-child(6) {
  -webkit-animation-duration: .6s;
  animation-duration: .6s
}

.chats .active-users .user .idle>span:before {
  right: 20px;
  bottom: -2px;
  display: none;
  padding: 0 5px;
  font-size: 12px;
  position: absolute;
  border-radius: 2px;
  content: attr(class);
  background: rgba(0, 0, 0, .4);
  text-transform: capitalize
}

.chats .active-users .user:hover .idle>span:before {
  display: block;
  -webkit-animation: fadeInRight .4s;
  animation: fadeInRight .4s
}

.profile {
  display: block;
  border: solid black 1px;
  position: absolute;
  top: 2px;
  left: 2px;
  right:2px;
  padding-bottom: 10px;
}

.profile .photo {
  margin: auto;
  width: 50px;
  height: 50px;
  overflow: hidden;
  position: absolute;
  top:10px;
  right: 10px;
  border-radius: 50%;
  border: 1px solid #ccc;
}

.profile .photo img {
  width: 100%;
  border-radius: 50%;
  -webkit-transition: all .2s ease-in-out 0s;
  transition: all .2s ease-in-out 0s
}

.profile .details .user-name {
  font-size: 18px;
  font-weight: 400;
  text-align: center;
}

.setting-list {
  margin-left: -15px;
  margin-right: -15px
}

.setting-list .gear {
  padding: 10px 15px;
  font-size: 14px;
  font-weight: 400
}

.setting-list .gear:not(:last-child) {
  border-bottom: 1px solid rgba(170, 170, 170, .4)
}

.setting-list .gear>.action {
  color: #aaa
}

.setting-list .gear:nth-child(1) {
  -webkit-animation-duration: .1s;
  animation-duration: .1s
}

.setting-list .gear:nth-child(2) {
  -webkit-animation-duration: .2s;
  animation-duration: .2s
}

.setting-list .gear:nth-child(3) {
  -webkit-animation-duration: .3s;
  animation-duration: .3s
}

.setting-list .gear:nth-child(4) {
  -webkit-animation-duration: .4s;
  animation-duration: .4s
}

.setting-list .gear:nth-child(5) {
  -webkit-animation-duration: .5s;
  animation-duration: .5s
}

.setting-list .gear:nth-child(6) {
  -webkit-animation-duration: .6s;
  animation-duration: .6s
}
.body-profile {
  display: block;
  border: solid black 1px;
  position: absolute;
    top: 80px;
    left: 2px;
    right: 2px;
    padding-bottom: 10px;
}
.imagenCoche {
  width: 200px;
  margin: auto;
}

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Usuario Conectado</title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,300,700'>
<link rel='stylesheet' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="mobile-wrap">
	<div class="mobile clearfix">
    <div class="header">
      <span class="ion-ios-navicon pull-left"><i></i></span>
      <span id="navicon" class="pull-right"></span>
    </div>
		<div class="sidebar">
			<div id="menu" class="sidebar-overlay"></div>
			<div class="sidebar-content">
				<div class="top-head"><span>Menu</span>
				</div>
				<div class="nav-right">
					<a id="perfil" href="#profile"><span class="ion-ios-person-outline"></span>Perfil</a>
					<a id="pagos" href="#alarm"><span class="ion-ios-list-outline"></span>Pagos</a>
					<a href="#compose"><span class="ion-ios-compose-outline"></span>Compose</a>
					<a href="#chats"><span class="ion-ios-chatboxes-outline"></span>Chats</a>
					<a href="#settings"><span class="ion-ios-gear-outline"></span>Settings</a>
				</div>
			</div>
		</div>
    <div class="html profile visible">
      <div class="photo flipInX animated">
        <img src="img/woman.png">
      </div>
      <div class="details">
        <p class="user-name">
          <span class="name">Jhon Doe</span>
        </p>
      </div>
    </div>
    <div id="ProfileBody" class="body-profile">
<img class="imagenCoche" src="img/coche.jpg"></img>
</div>
		<div class="content">
			<div class="html alarm">
				<div class="alarm-list">
					<div class="note clearfix slideInRight animated">
						<div class="time pull-left">
							<div class="hour">9</div>
							<div class="shift">AM</div>
						</div>
						<div class="to-do pull-left">
							<div class="title">Finish HTML Coding</div>
							<div class="subject">Web UI</div>
						</div>
					</div>
					<div class="note clearfix slideInRight animated">
						<div class="time pull-left">
							<div class="hour">1</div>
							<div class="shift">PM</div>
						</div>
						<div class="to-do pull-left">
							<div class="title">Lunch Break</div>
							<div class="subject"></div>
						</div>
					</div>
					<div class="note clearfix slideInRight animated" data-revert="slideOutRight">
						<div class="time pull-left">
							<div class="hour">3</div>
							<div class="shift">PM</div>
						</div>
						<div class="to-do pull-left">
							<div class="title">Design Stand Up</div>
							<div class="subject">Hangouts</div>
							<div class="user-list clearfix">
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="html compose">
				<div class="forms">
					<div class="group clearfix slideInRight animated">
						<label class="pull-left" for="compose-time"><span class="ion-ios-time-outline"></span> Time</label>
						<input class="pull-right" id="compose-time" type="time">
					</div>
					<div class="group clearfix slideInLeft animated">
						<label class="pull-left" for="compose-date"><span class="ion-ios-calendar-outline"></span> Date</label>
						<input class="pull-right" id="compose-date" type="date">
					</div>
					<div class="group clearfix slideInRight animated">
						<label class="pull-left" for="compose-title"><span class="ion-ios-paper-outline"></span> Title</label>
						<input class="pull-right" id="compose-title" type="text">
					</div>
					<div class="group clearfix slideInLeft animated">
						<label class="visible" for="compose-detail"><span class="ion-ios-list-outline"></span> Task</label>
						<textarea class="visible" id="compose-detail" rows="3"></textarea>
					</div>
					<div class="action flipInY animated">
						<button class="btn">Compose</button>
					</div>
				</div>
			</div>
			<div class="html chats">
				<div class="tabs-list clearfix">
					<a href="#" class="tab active">Users</a>
					<a href="#" class="tab">Messages</a>
					<a href="#" class="tab">Groups</a>
				</div>
				<div class="active-users">
					<div class="user clearfix rotateInDownLeft animated">
						<div class="photo pull-left">
							<img src="https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg">
						</div>
						<div class="desc pull-left">
							<p class="name">Connor Hartigan</p>
							<p class="position">Web &amp; UI Designer</p>
						</div>
						<div class="idle pull-right"><span class="away"></span></div>
					</div>
					<div class="user clearfix rotateInDownRight animated">
						<div class="photo pull-left">
							<img src="https://s3.amazonaws.com/uifaces/faces/twitter/markmushiva/128.jpg">
						</div>
						<div class="desc pull-left">
							<p class="name">Jacob Lennon</p>
							<p class="position">Front-End Developer</p>
						</div>
						<div class="idle pull-right"><span class="offline"></span></div>
					</div>
					<div class="user clearfix rotateInDownLeft animated">
						<div class="photo pull-left">
							<img src="https://s3.amazonaws.com/uifaces/faces/twitter/scottohara/128.jpg">
						</div>
						<div class="desc pull-left">
							<p class="name">Didier Mailly</p>
							<p class="position">Co-Founder</p>
						</div>
						<div class="idle pull-right"><span class="away"></span></div>
					</div>
					<div class="user clearfix rotateInDownRight animated">
						<div class="photo pull-left">
							<img src="https://s3.amazonaws.com/uifaces/faces/twitter/shalt0ni/128.jpg">
						</div>
						<div class="desc pull-left">
							<p class="name">Miguel Cunha Ferreira</p>
							<p class="position">Sales Manager</p>
						</div>
						<div class="idle pull-right"><span class="online"></span></div>
					</div>
					<div class="user clearfix rotateInDownLeft animated">
						<div class="photo pull-left">
							<img src="https://s3.amazonaws.com/uifaces/faces/twitter/sircookieface/128.jpg">
						</div>
						<div class="desc pull-left">
							<p class="name">Eric Yuriev</p>
							<p class="position">App Developer</p>
						</div>
						<div class="idle pull-right"><span class="online"></span></div>
					</div>
					<div class="user clearfix rotateInDownRight animated">
						<div class="photo pull-left">
							<img src="https://s3.amazonaws.com/uifaces/faces/twitter/ryanmclaughlin/128.jpg">
						</div>
						<div class="desc pull-left">
							<p class="name">Theodore Clark</p>
							<p class="position">Project Manager</p>
						</div>
						<div class="idle pull-right"><span class="online"></span></div>
					</div>
				</div>
			</div>
			<div class="html settings">
				<div class="setting-list">
					<div class="gear clearfix slideInRight animated">
						<div class="title pull-left">General</div>
						<div class="action pull-right"><span class="ion-ios-arrow-right"></span></div>
					</div>
					<div class="gear clearfix slideInLeft animated">
						<div class="title pull-left"><label for="gear-notice">Notification</label></div>
						<div class="action pull-right"><input id="gear-notice" class="on-off" type="checkbox"><label for="gear-notice"></label></div>
					</div>
					<div class="gear clearfix slideInRight animated">
						<div class="title pull-left"><label for="gear-sound">Sound</label></div>
						<div class="action pull-right"><input id="gear-sound" class="on-off" type="checkbox" checked><label for="gear-sound"></label></div>
					</div>
					<div class="gear clearfix slideInLeft animated">
						<div class="title pull-left">Theme</div>
						<div class="action pull-right">Standard <span class="ion-ios-arrow-right"></span></div>
					</div>
					<div class="gear clearfix slideInRight animated">
						<div class="title pull-left">Support</div>
						<div class="action pull-right"><span class="ion-ios-arrow-right"></span></div>
					</div>
					<div class="gear clearfix slideInLeft animated">
						<div class="title pull-left">Privacy</div>
						<div class="action pull-right"><span class="ion-ios-arrow-right"></span></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- partial -->
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script  src="./script.js"></script>


</body>
</html>