JSFiddle - React, Tailwind, and code Playground

by msmini5

HTML

<body>
    <form method="post" action="MyPage.aspx" id="ctl01">
        
        <div id="main">
            <div id="sidebar">
		        <div id="link-menu-sidebar">                    
			        <a href="#" onclick="return false;" class="link-menu">
                        <span class="icon icon-sidebar-menu">MENU</span></a>
		        </div>
                <div id="sideMenuScroller" class="sidebarContainer"><div class="ftscroller_container">
                    <div class="ftscroller_y ftscroller_hwaccelerated" style="transform: translate3d(0px, -514px, 0px);">
                    <ul class="menu-sidebar">
			                <li class="menu">
                                <a href="MyPage.aspx" id="MenuRepeater_menuLink_0" class="main-link home-link icon-neighborhood">                          
                                    <span id="MenuRepeater_Lbl_Menu_0">Homepage</span>                                    
                                </a>
                            </li>
                            

			                <li class="menu">
                                <a id="MenuRepeater_menuLink_1" class="main-link cursor">   
                                    <span id="MenuRepeater_Lbl_Menu_1">Option1</span>
                                    <div class="icon icon-dropdown"></div>
                                </a>  
                            </li>                            
			                <li class="menu">
                                <a id="MenuRepeater_menuLink_1" class="main-link cursor">   
                                    <span id="MenuRepeater_Lbl_Menu_1">Option2</span>
                                    <div class="icon icon-dropdown"></div>
                                </a>  
                            </li>
			                <li class="menu">
                                <a id="MenuRepeater_menuLink_1" class="main-link cursor">   
                                    <span...

CSS

*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body, html {
    height: 100%;
    width: 100%;
}
body
{
    margin: 0;
    font-family: 'Roboto', Segoe UI, sans-serif !important;
    font-size: 14px;
    height: 100%;
    min-height: 100%;
    background-color: #ECF0F3;
}
html, body, ul, li {
    padding: 0;
    margin: 0;
}

#main {
    width: 100%;
    min-height: 100%;
    position: relative;
    overflow: hidden;
    min-height: 100%;
}
#sidebar, #sidebar>#link-menu-sidebar {
    background-color: wheat;
}
#sidebar{
    position: fixed;
    width: 100px;
    overflow: visible;
    -webkit-backface-visibility: hidden;
    z-index: 1050;
    height: 100%;
    min-width: 100px;
}
#sidebar:not(.active){
    max-width: 100px;
}
#sidebar.active {
    overflow: hidden;
    width: 250px;
    z-index: 1050;
}
#sidebar>#link-menu-sidebar {
    max-width: 100px;
    width: 100px;
    position: fixed;
    top: 0;
    z-index: 9;
    height: 55px;
    display: block;
    clear: both;
    padding-top: 15px;
    text-align: center;
}
#sidebar>.sidebarContainer {
    position: absolute;
    top: 0;
    margin-top: 55px;
    bottom: 0;
    width: 100%;
    overflow: hidden;
}
#link-menu-sidebar .span-menu {
    float: left;
    padding: 0 15px;
}
#main:not(.active) #sidebar .link-menu {
    text-align: center;
    margin: 0 auto;
    display: table;
    float: none;
}
.ftscroller_container {
    overflow: hidden;
    position: relative;
    max-height: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -ms-touch-action: none;
}
.ftscroller_x, .ftscroller_y {
    position: relative;
    min-width: 100%;
    min-height: 100%;
    overflow: hidden;
}
.ftscroller_hwaccelerated {
    transform: translateZ(0);
}
#main:not(.active) #sidebar>.sidebarContainer ul.menu-sidebar {
    max-width: 100px;
    width: 100px;
}
#sidebar>.sidebarContainer ul.menu-sidebar {
    width:...

JavaScript

/*Menu lateral*/
$(document).ready(function () {
    
    //Apaga menu right vazio
    $(".menu ul.submenu-bottom li").each(function () {
        if (!$(this).hasClass('has-submenu-right')) {
            $($(this).find('div.icon')).detach();
            $($(this).find('ul.submenu-right')).detach();
        }
    });

    $("ul.menu-sidebar .home-link").each(function () {
        $($(this).find('div.icon')).detach();
        $($(this).closest(".menu").find('ul')).detach();
    });

    $("ul.menu-sidebar .menu ul").each(function () {
        if($(this).children().length <= 0)
            $(this).detach();
    });

    $(".menu-sidebar .main-link").each(function () {
        if (!exists($(this).closest("li").find('ul li'))) {
            $($(this).find('div.icon')).detach();
            $($(this).closest("li").find('ul')).detach();
        }
    });

    $('ul.menu-sidebar .submenu-bottom').addClass('active');

    $("#link-menu-sidebar .link-menu").click(function () { abreMenu(this, true); });

    $("#link-menu-sidebar-xs .toggle-offscreen").click(function () { abreMenuXs(this); });
    
    $('.menu-sidebar li.menu .main-link').click(function () { abreSubmenu(this); });

    $('.menu-sidebar li.has-submenu-right .link').click(function () { abreSubmenuLateral(this); });

    $('.menu-sidebar li .link-submenu-right').click(function () {
        $('.menu-sidebar .submenu-right').removeClass('active');
        $(this).closest(".submenu-right").addClass('active');
    });

    $('.menu-sidebar li .link').click(function () {
        if (!$(this).parent().hasClass('has-submenu-right')) {
            $('.menu-sidebar li').removeClass('active');
            $(this).parent().addClass('active');

            $('.menu-sidebar .submenu-right').removeClass('active');
        }
    });

});

function abreSubmenuLateral(bt)
{
    $($(bt).closest("li")).find('.submenu-right').toggleClass('active');
    $(bt).closest("li").toggleClass('active');

    //Link submenu-right abrir...