Jump to content
Sapinn

Montando Dashboard ajustes para templete e reponsividade

Recommended Posts

Fala galera, tudo blz? Então estou com uma dúvida um pouco boba mas que não consegui resolver o problema ainda. Estou desenvolvendo um site para agendamento de serviços e resolvi fazer a pagina principal como uma dashboard (área de administrador) onde seria muito mais fácil para o usuário registrar os serviços entre outras coisas, enfim, estou com um problema quanto ao layout da página. Normalmente o dashboard tem um menu à esquerda e o conteúdo  fica à direita quando ocorre o clique no botão hambúrguer( Aquele que tem três tracinhos) esse menu é recolhido e esse conteúdo que fica a direita fica centralizado, às vezes, em muitos dashboard esse menu só é um pouco recolhido ficando amostra apenas os ícones enquanto o conteúdo da direita fica um pouco mais centralizado. A pergunta é como eu posso fazer isso? Outra coisa, na responsividade quando a página diminui o menu da uma retraída e o conteúdo fica centralizado quando é clicado no botão hambúrguer o menu não afasta o conteúdo de volta e sim fica por cima desse conteúdo. Não sei como fazer isso, eu estou melhorando quando ao desenvolvimento front-end mas ainda não é muito a minha praia. Eu tentei fazer isso com css grid (que por sinal é algo que eu não tenho tanta pratica, já que eu sou melhor com flebox) mas não funcionou e o código só ficou ruim e confuso. Se alguém puder me ajudar ficaria muito grato

 

Não tem muito coisa ainda mas irei disponibilizar o código que desenvolvi até agora:

 

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sistema de Gerenciamento</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="icon" href="assets/images/icone-logo.png">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">
</head>
<body>
    <header>
        <div class="bar-header">
            <i class="bi bi-list"></i>
        </div>
    </header>
    <nav class="menu">
        <div class="user">
            <i class="bi bi-person-circle"></i>
            <p>Nome do Usuário</p>
        </div>
        <ul>
            <li class="active"><a href=""><i class="bi bi-house-fill"></i> Inicio</a></li>
            <li><a href=""><i class="bi bi-calendar-plus-fill"> </i>Adicionar Serviço</a></li>
            <li><a href=""><i class="bi bi-person-plus-fill"></i> Adicionar Admin</a></li>
            <li><a href=""><i class="bi bi-file-earmark-post-fill"></i> Configurações de Nota</a></li>
            <li><a href=""><i class="bi bi-file-person"></i> Configurações da Conta</a></li>
            <li><a href=""><i class="bi bi-box-arrow-right"></i> Sair</a></li>
        </ul>
    </nav>
    <main></main>
    <footer></footer>
</body>
</html>

 

 

*{
    padding: 0;
    margin: 0;
}
body{
    font-family: Arial, Helvetica, sans-serif;
    background-color: #e5e5e5;
}
.bar-header{
    background-color: #4285f4;
    position: fixed;
    color: #fff;
    width: 100%;
    height: 40px;
    font-size: 37px;
    padding: 8px 16px;
    z-index: 1;
}
.menu{
    background-color: #26353e;
    width: 260px;
    height: 100vh;
    position: fixed;
    padding-top: 65px;
}
.menu ul li{
    list-style: none;
    padding: 15px;
    cursor: pointer;
    border-bottom: 1px solid #26353e;
}
.menu ul li:hover{
    background-color: #4285f4;
    
}
.menu li a{
    color: #fff;
    font-size: 18px;
    text-decoration: none;
   
}
.menu i{
    font-size: 27px;
}
.menu .active{
    background-color: #4285f4;
}
.user{
    margin-left: 50px;
    padding-bottom:10px ;
}
.user i{
    font-size: 120px;
    color: #4285f4;
}
.user p{
    font-weight: bold;
    font-size: 18px;
    color: #fff;
}


 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Sapinn
      Pessoa de novo eu aqui kk. Acho que essa pergunta é simples mas eu não sei como fazer, já pesquisei em vários cantos mas só achei a resposta em Jquery e eu queria fazer em Javascript puro. Basicamente eu gostaria de transferir dados de uma tabela para um form eu já consegui fazer mas só funciona em um td e eu gostaria nos outros não funcionam. 
      <!DOCTYPE html> <html lang="pt-br"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title> </head> <body>     <table border="1px">         <tr>             <td>Nome</td>             <td>Endereço</td>             <td>Telefone</td>             <td>Adicionar</td>         </tr>         <tr>             <td id="nome_cliente" value="Sapien">Sapinn</td>             <td id="endereco_cliente" value="Rua 01">Rua 01</td>             <td id="tel_cliente" value="(88) 9 9999-9999">(88)9 9999-9999</td>             <td><button onclick="adicionar()">Adicionar</button></td>         </tr>         <tr>             <td id="nome_cliente" value="Sapien">Supremo</td>             <td id="endereco_cliente" value="Rua 01">Rua 05</td>             <td id="tel_cliente" value="(88) 9 9999-9999">(88)9 0000-0000</td>             <td><button onclick="adicionar()">Adicionar</button></td>         </tr>     </table><br><br>     Nome:<input type="text" name="nome" id="nome">     Telefone: <input type="text" name="telefone" id="telefone">     Endereço: <input type="text" name="endereco" id="endereco">     <script>         function adicionar(){                         let nome_cliente = document.getElementById("nome_cliente").innerHTML;             let endereco_cliente = document.getElementById("endereco_cliente").innerHTML;             let tel_cliente = document.getElementById("tel_cliente").innerHTML;             document.getElementById('nome').value = nome_cliente;             document.getElementById('telefone').value = tel_cliente;             document.getElementById('endereco').value = endereco_cliente;             console.log(nome_cliente, endereco_cliente, tel_cliente)                      }     </script> </body> </html>  
    • By jvb
      Olá povo do código, eu confesso que estou sem saber o pq de algumas propriedades do Bootstrap 4.2.1 como por exemplo:
      .img-fluid { max-width:100%; height: auto } não funcionar em outra folha de style, que não seja Bootstrap, a propriedade não esta dentro de @media, essa propriedade eu imaginava ser de uso geral.
      Vejamos que a Página continua linkando para o bootstrap, apenas algumas propriedades não terem efeito em outra folha de styles. 
    • By Sapinn
      Fala galera tudo beleza? Então alguém sabe como adicionar e remover campos de texto com js. Tipo teria um botão com um + "mais" para adicionar novos campos e junto a estes campos teria um ícone com um lixeira para remover, toda vez que fosse clicado nesse ícone o campo seria removido, apenas aquele campo. Encontrei um código para adicionar um campo mas a parte de remover ta dando dor de cabeça
      <!DOCTYPE html> <html lang="pt-br"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Pagina</title>     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"> </head> <body>     <form id="myForm">         <div id="lines"></div>         <button type="button" onclick="addInput('lines')">+</button>         <input type="submit" value="Enviar">       </form>             <script>           var formLine = 1;                 function addInput(divName) {                 var newdiv = document.createElement('div');                 newdiv.innerHTML += '<input type="text" name="produto" id='+formLine+'>';                 newdiv.innerHTML += ' <i class="bi bi-trash-fill"></i>';                 document.getElementById(divName).appendChild(newdiv);                 formLine++;             }         addInput('lines');       </script> </body> </html>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.