.sidebar {
  height: 100%;
  width: 130px;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #28283c;
  padding-top: 20px;
  z-index:10;
  transition: width 0.4s ease;
  
}

.sidebar a {
  padding: 10px 15px;
  text-decoration: none;
  font-size: 18px;
  color: white;
  display: block;
}

.sidebar a:hover {
  background-color: #3c3c50;
}

.content {
  margin-left: 130px;
  padding: 20px;
}

.sidebarheading {
  position: absolute;
  left:25px;
  }

.pagelinks {
  opacity:0;
  position:fixed;
  left:100;
}

.sidebar:hover .pagelinks{
  opacity:1;
  transition: 0.4s ease;
}

.sidebar:hover {
  width:300px;
}

.sidebar:hover ~ .content{
  margin-left: 300px;
  transition: 0.4s ease;
}

.settingsbutton {
  opacity:0;
}

.sidebar:hover ~ .settingsbutton{
 opacity:1;
 transition: 0.4s ease;
}