.chat {
  display: flex;
  overflow: hidden;
}

.chat__conversations{
  width: 30%;
  display: flex;
  height: 100%;
}

.topnav{
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;

  
}

.chat__conversations__hidden{
  width: 30%;
  height: 100%;
}

.chat__messages{
  width: 70%;
}

@media screen and (max-width:768px) {
  .chat__conversations{
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .chat__conversations__hidden{
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translateX(100%);
  }

  .chat__messages{
    width: 100%;
  }
}