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">
<div class="container">
    <div class="left">
      <div class="channels_header">
        <h3>
        Humanzing
        </h3>
        <a>a</a>
      </div>
      <div class="channels_list">
      <ul>
      <li>a</li>
      <li>b</li>
      <li>c</li>
      <li>d</li>
      <li>e</li>
      <li>f</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">yourself</span>
<span class="tag">#0001</span>
</div>
<div class="channels-footer-controls button-group">
<button role="button" aria-label="Mute" class="button button-mute" tabindex="0"></button>
<button role="button" aria-label="Deafen" class="button button-deafen" tabindex="0"></button>
<button role="button" aria-label="Settings" class="button button-settings" tabindex="0"></button>
</div>
      </div>
    </div>
    <div class="right">
    <div class="head">
    <a class="toggle-button" href="#">
           ...
        </a>
        <h2 class="menu-name">general</h2>

    </div>
    <div class="centent">
    
    </div>
    <div class="bottom">
     <input id="emojionearea1">
    </div>
           </div>
</div>

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;
  font-weight: 500;
  color:white;
}
.left > .channels_header a{
  position: absolute;
  right:25px;
  color:white;
}
.left > .channels_list{
      flex: 1 1;
    overflow-y: auto;
    padding: 0 20px;
}
.left > .channnels_footer{
    display: flex;
    align-items: center;
    flex: 0 0 70px;
    margin-top: auto;
    background: #282b30;
    border-top: 1px solid #1c1e21;
    padding: 0 10px;
}
.left > .channnels_footer .avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.left > .channnels_footer .channels-footer-details {
    margin-left: 5px;
}
.left .channnels_footer .channels-footer-details .username{
    margin: 0 2px;
     color: #2795ee;
}
.left > .channnels_footer .channels-footer-details .tag{
    margin: 0 2px;
    color: #fffcfca1;
}
.left > .channnels_footer-footer .channels-footer-controls {
    margin-left: auto;
    border: 1px solid #1c1e21;
    border-radius: 4px;
    display: flex;
}
.left > .channnels_footer-footer  .channels-footer-controls .button {
    display: block;
    width: 32px;
    height: 32px;
}
.right {
    width: 100%;
    background: #36393E;
    display: flex;
    flex: 1;
    flex-direction: column;
}
.toggle-button {
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    padding:0 5px;
    padding-right:20px;
    font-size:26px;
    top:-5px;
    display:block;
   ...

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());
        	}
    	}
	});
});