JSFiddle - React, Tailwind, and code Playground

by Felype Rennan

HTML

<div class="navtabs">
                <section>
                    <header>
                        Admin
                    </header>
                    <div>
                        <a href="@ViewBag.AppUrl/Admin/Empresas/">Empresas</a>
                    </div>
                </section>
            <section>
                <header>
                    Manutenção
                </header>
                <div>
                    <a href="@ViewBag.AppUrl/Manutencao/OrdensServico/Nova">Nova OS</a>
                    <a href="@ViewBag.AppUrl/Manutencao/OrdensServico/">Pesquisar OS</a>
                    <a href="@ViewBag.AppUrl/Manutencao/Servicos">Serviços</a>
                </div>
            </section>
            <section>
                <header>
                    Cadastros
                </header>
                <div>
                    <a href="@ViewBag.AppUrl/Cadastros/Clientes/">Clientes</a>
                    <a href="@ViewBag.AppUrl/Cadastros/Usuarios/">Usuarios</a>
                </div>
            </section>
        </div>

SCSS

.navtabs {
    position: relative;
    padding-top: 80px;
    section 
    {
        header {
            transition: 0.4s ease-out;
            font-size: 18px;
            padding: 22px;
            margin: 8px;
            border: 1px solid #0082C8;
            position: relative;
            left: 0;
        }
        div {
            transition: 0.4s ease-out;
            position: absolute;
            left: 100%;
            top: 0;
            padding: 22px;
            font-size: 10px;
            margin-top: 70px;
        }
    }
    &.abrir {
        section > header {
            left: -100%;    
        }
        section.abrir > div {
            top: 0;
            left: 0;    
        }
    }
}

JavaScript

$(".navtabs > section > header").click(function (e) {
    e.preventDefault();
    e.stopPropagation();
    $(this).parent().siblings().removeClass("abrir");
    $(this).parent().toggleClass("abrir");
    if ($(this).parent().hasClass("abrir"))
        $(".dodger").addClass("expandir");
    else
        $(".dodger").removeClass("expandir");
    if($(".navtabs").find(".abrir"))
        $(".navtabs").addClass("abrir");
    else 
        $(".navtabs").removeClass("abrir");
});
$(".navtabs > section > content > button").click(function (e) {
    e.stopPropagation();
});