<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container-fluid"> <div class="row"> <div class="col-sm-3 aside-left"> <div class="nav-side-menu"> <div class="brand"><i class="fa fa-sliders fa-lg"></i> Gerenciador de Clientes </div> <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i> <div class="menu-list"> <ul id="menu-content" class="menu-content collapse out"> <li> <a href="#"> <i class="fa fa-dashboard fa-lg"></i> Painel </a> </li> <li data-toggle="collapse" data-target="#cadastros" class="collapsed"> <a href="#"><i class="fa fa-plus fa-lg"></i> Cadastros <span class="arrow"></span></a> </li> <ul class="sub-menu collapse" id="cadastros"> <li>Clientes</li> </ul> <ul class="sub-menu collapse" id="cadastros"> <li>Funcionários</li> </ul> <ul class="sub-menu collapse" id="cadastros"> <li>Fornecedores</li> </ul> <ul class="sub-menu collapse" id="cadastros"> <li>Transportadoras</li> </ul> <li data-toggle="collapse" data-target="#produtos" class="collapsed"> <a href="#"><i class="fa fa-list fa-lg"></i> Produtos <span class="arrow"></span></a> </li> <ul class="sub-menu collapse" id="produtos"> <li>Gerenciar Produtos</li> </ul> <ul class="sub-menu collapse" id="produtos"> <li>Pagamentos Pendentes</li> <li>Vendas Realizadas</li> </ul> <li data-toggle="collapse" data-target="#orcamentos" class="collapsed"> <a href="#"><i class="fa fa-check fa-lg"></i> Orçamentos <span class="arrow"></span></a> </li> <ul class="sub-menu collapse" id="orcamentos"> <li>Pendentes</li> <li>Concluídos</li> </ul> </ul> </div> </div> </div> <div class="col-sm-9"> <div class="row"> <aside class="col-sm-6"> <p>Clientes</p> <div class="card"> <div class="card-body mb-2 text-black-50"> <h5 class="card-title">Cadastros</h5> <p class="card-text mb-2"> <a href="#" class="btn btn-primary m-3"> Clientes </a> <a href="#" class="btn btn-primary m-3"> Funcionários </a> <a href="#" class="btn btn-primary m-3"> Fornecedores </a> <a href="#" class="btn btn-primary m-3"> Transportadoras </a> </p> </div> </div> <!-- card.// --> </aside> <!-- col.// --> <aside class="col-sm-6"> <p>Produtos</p> <div class="card"> <div class="card-body mb-2 text-black-50"> <h5 class="card-title">Produtos</h5> <p class="card-text"> <a href="#" class="btn btn-primary m-3"> Cadastro de produtos </a> <a href="#" class="btn btn-primary m-3"> Pagamentos pendentes </a> <a href="#" class="btn btn-primary m-3"> Vendas Realizadas </a> </p> </div> </div> <!-- card.// --> </aside> <!-- col.// --> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-12"> </div> </div> </div>

.nav-side-menu { overflow: auto; font-family: verdana; font-size: 12px; font-weight: 200; background-color: #2e353d; position: fixed; top: 0px; width: 24%; height: 100%; color: #e1ffff; margin-left: -15px; } .nav-side-menu .brand { background-color: #23282e; line-height: 50px; display: block; text-align: center; font-size: 14px; } .nav-side-menu .toggle-btn { display: none; } .nav-side-menu ul, .nav-side-menu li { list-style: none; padding: 0px; margin: 0px; line-height: 35px; cursor: pointer; /* .collapsed{ .arrow:before{ font-family: FontAwesome; content: "\f053"; display: inline-block; padding-left:10px; padding-right: 10px; vertical-align: middle; float:right; } } */ } .nav-side-menu ul :not(collapsed) .arrow:before, .nav-side-menu li :not(collapsed) .arrow:before { font-family: FontAwesome; content: "\f078"; display: inline-block; padding-left: 10px; padding-right: 10px; vertical-align: middle; float: right; } .nav-side-menu ul .active, .nav-side-menu li .active { border-left: 3px solid #d19b3d; background-color: #4f5b69; } .nav-side-menu ul .sub-menu li.active, .nav-side-menu li .sub-menu li.active { color: #d19b3d; } .nav-side-menu ul .sub-menu li.active a, .nav-side-menu li .sub-menu li.active a { color: #d19b3d; } .nav-side-menu ul .sub-menu li, .nav-side-menu li .sub-menu li { background-color: #181c20; border: none; line-height: 28px; border-bottom: 1px solid #23282e; margin-left: 0px; } .nav-side-menu ul .sub-menu li:hover, .nav-side-menu li .sub-menu li:hover { background-color: #020203; } .nav-side-menu ul .sub-menu li:before, .nav-side-menu li .sub-menu li:before { font-family: FontAwesome; content: "\f105"; display: inline-block; padding-left: 10px; padding-right: 10px; vertical-align: middle; } .nav-side-menu li { padding-left: 0px; border-left: 3px solid #2e353d; border-bottom: 1px solid #23282e; } .nav-side-menu li a { text-decoration: none; color: #e1ffff; } .nav-side-menu li a i { padding-left: 10px; width: 20px; padding-right: 20px; } .nav-side-menu li:hover { border-left: 3px solid #d19b3d; background-color: #4f5b69; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } @media (max-width: 767px) { .aside-left { padding: 0; } .nav-side-menu { position: relative; width: 100%; margin-bottom: 10px; margin-left: 0; } .nav-side-menu .toggle-btn { display: block; cursor: pointer; position: absolute; right: 10px; top: 10px; z-index: 10 !important; padding: 3px; background-color: #ffffff; color: #000; width: 40px; text-align: center; } .brand { text-align: left !important; font-size: 22px; padding-left: 20px; line-height: 50px !important; } } @media (min-width: 767px) { .nav-side-menu .menu-list .menu-content { display: block; } } body { margin: 0px; padding: 0px; }