Toggle Left Sidebar

by humanzing

HTML

<script src="https://rawgit.com/mervick/emojionearea/master/dist/emojionearea.js"></script>
<link rel="stylesheet" href="https://rawgit.com/mervick/emojionearea/master/dist/emojionearea.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<div class="container">
    <div class="left">
      <div class="channels_header">
        <h3>
        TradingRoom Server
        </h3>
        <a class="toggle-button" href="#">
           ...
        </a>
      </div>
      <div class="channels_list">
      <ul>
      <li class="list_cat">Public room</li>
      <li class="chanel"><h3>
      defrgthyjuki
      </h3> <span>5</span></li>
      <li class="chanel"><h3>
      defrgthyjuki
      </h3> <span>5</span></li>
      <li class="list_cat">Private Chat</li>
      <li class="chanel"><h3>
      defrgthyjuki
      </h3> <span>5</span></li>
      <li class="chanel">
        <h3>defrgthyjuki</h3>
        <span>5</span>
      </li>
      <li class="chanel">
        <h3>defrgthyjuki</h3>
        <span>5</span>
      </li>
      <li class="chanel">
        <h3>defrgthyjuki</h3>
        <span>5</span>
      </li>
      <li class="chanel">
        <h3>defrgthyjuki</h3>
        <span>5</span>
      </li>
      <li class="chanel">
        <h3>defrgthyjuki</h3>
        <span>5</span>
      </li>
      <li class="chanel">
        <h3> defrgthyjuki</h3>
        <span>5</span>
      </li>
      <li class="chanel">
        <h3>defrgthyjuki</h3>
        <span>5</span>
      </li>
      </ul>
      </div>
      <div class="channnels_footer">
        <img class="avatar" alt="Avatar" src="https://discordapp.com/assets/0e291f67c9274a1abdddeb3fd919cbaa.png">
<div class="channels-footer-details">
<span class="username">Humanzing</span>
<span class="tag">#0001</span>
</div>
<div class="channels-footer-controls button-group">
<button role="button" aria-label="Deafen" class="button button-deafen" tabindex="0"><i class="fas...

CSS

body{
  margin:0;
  width: 100%;
    height:100vh;
     background: #36393E;
  }
.container {
    width: 100%;
    height:100vh;
}
.left, .right {
    float: left;
    height:100%;
}
.left {
    background: #2E3136;
    width: 250px;
    margin-left: -100%;
    display: flex;
    flex-direction: column;
    flex: 0 0 240px;
}
.left > .channels_header{
  cursor: pointer;
  display: flex;
  align-items: center;
  flex: 0 0 56px;
  padding: 10px;
  box-shadow: 0 1px 0 #24272b, inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  transition: background 0.15s ease;
  position:relative;
}
.left > .channels_header h3{
  font-size: 1rem;
  color:white;
  font-weight: 900;
}
.left > .channels_header a {
    position: absolute;
    right: 16px;
    color: white;
    padding: 18px;
}
.left > .channels_list{
      flex: 1 1;
    overflow-y: auto;
}
.left > .channels_list ul{
      list-style:none;
      padding:0;
      margin:0;
}
.left > .channels_list ul li.chanel{
      list-style:none;
      cursor: pointer;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.87rem;
    letter-spacing: 0.04rem;
    transition: color 0.2s linear;
    position: relative;
    display: flex;
    padding: 5px 0;
  
}
.left > .channels_list ul li.chanel:hover, .left > .channels_list ul li.chanel:focus {
    background: linear-gradient(to right, #282b30 85%, #2e3136);
}
.left > .channels_list ul li.list_cat{
    list-style:none;
    padding:5pp 10px;
    cursor: pointer;
    margin-top: 20px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.87rem;
    letter-spacing: 0.04rem;
    transition: color 0.2s linear;
    line-height: 30px;
    position: relative;
    margin-left: 15px;
}
.left > .channels_list ul li.chanel span{
     background: #614b8c94;
    padding: 2px 5px;
    border-radius: 25px;
    color: #ffffff;
    border: solid 1px #b1abab;
    font-size: 15px;
    margin: 0 10px;
    position: absolute;
    right: 5px;
}

.left >...

JavaScript

$('.toggle-button').click(function() {
    var $left = $('.left');
    var opened = ($left.css('margin-left') != '0px') ? true : false;
    var leftMargin = opened ? '0px' : '-100%';

    var $right = $('.right');
    var $cont = $('.container');
    var rightWidth = opened ? ($cont.width() - $left.width() - 5) : '100%';
    
    $left.animate({marginLeft: leftMargin}, 500, function() {
        if(!opened)
            $right.animate({width: rightWidth}, 100);
    });

    if(opened)
        $right.animate({width: rightWidth}, 100);
});
$(document).ready(function() {
	$("#emojionearea1").emojioneArea({
  	
		pickerPosition: "top",
    	tonesStyle: "bullet",
		events: {
         	keyup: function (editor, event) {
           		console.log(editor.html());
           		console.log(this.getText());
        	}
    	}
	});
});