JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap_main">
            <a href="javascript:void(0);" id="menu_left_trigger">Menu</a><br>
            <a href="javascript:void(0);" id="menu_right_trigger">Sub Menu</a>
        </div>
        <div id="wrap_bottom_left">
            <ul>
                <li>Something</li>
                <li>Something</li>
                <li>Something</li>
                <li>Something</li>
            </ul>
        </div>
        <div id="wrap_bottom_right">
            <ul>
                <li>Something</li>
                <li>Something</li>
                <li>Something</li>
                <li>Something</li>
            </ul>
        </div>

CSS

html, body{margin:0;padding:0;width:100%;height:100%;}
            #wrap_main{background-color:gray;position:fixed;top:0;left:0;right:0;bottom:0;z-index:10;}
            #wrap_bottom_left{background-color:aqua;width:50%;float:left;}
            #wrap_bottom_right{background-color:green;width:50%;float:right;}

JavaScript

var isMenuOpen = false;
    $(document).ready(function()
    {
    //code
    });
    $('#menu_left_trigger').click(function(e)
    {
        e.preventDefault();
        var $mainEle = $('#wrap_main');
        if(isMenuOpen == false)
        {
            isMenuOpen = true;
            $mainEle.animate({marginLeft:"10%"}, 1000);
        }
        else
        {
            isMenuOpen = false;
            $mainEle.animate({marginLeft:"0"}, 1000);
        }
    });
    $('#menu_right_trigger').click(function(e)
    {
        e.preventDefault();
        var $mainEle = $('#wrap_main');
        if(isMenuOpen == false)
        {
            isMenuOpen = true;
            $mainEle.animate({marginRight:"10%"}, 1000);
        }
        else
        {
            isMenuOpen = false;
            $mainEle.animate({marginRight:"0"}, 1000);
        }
    });