Ir para conteúdo

POWERED BY:

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;
}


 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Rafael_Ferreira
      Não consigo carregar a imagem do captcha do meu formulário. Foi testado com o xampp e easyphp. Também não carregou a imagem de outros captcha. 
       
       
    • Por luiz monteiro
      Olá.
      Estou atualizando meu conhecimento com Front-End e me deparei com o seguinte problema.
      Criei um sistema para fazer o upload de imagens e alguns campos text.
      Algo bem simples para depois começar a estudar javascript para mostrar a miniatura....
      Mas quando saio do navegador Chrome ou da aba por mais de 3 minutos, ao retornar o navegador as vezes atualiza ou nem chega atualizar mas limpa os campos.
      Estou usando um Smart Motorola com Android, mas um amigo testou no iPhone e acontece a mesma coisa.
      Gostaria de saber se há como usar javascript para evitar isso?
      Agradeço desde já.

      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>Uploader</title>
      </head>
      <body>
          <form action="?" method="post" enctype="multipart/form-data">
              <br><br>
              <div>selecione a imagem 1</div>
              <input type="file" name="foto1" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem1">
              
              <br><br>
              <input type="file" name="foto2" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem2">
              
              <br><br>

              <input type="file" name="foto3" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem3">
              
              <br><br>
              <input type="submit" value="Enviar">
              <br><br>
          </form>
      <?php
      if ($_SERVER['REQUEST_METHOD'] == 'POST')
      {
          vardump ($_FILES);
      }
      ?>
      </body>
      </html>
       
       
       
    • Por belann
      Olá!
       
      Estou usando o nextjs versão 15.2.3 e criei uma navbar que quando é carregado o programa aparece com a home, mas na hora de clicar na página produtos desaparece a navbar.
      A navbar esta sendo chamada no layout.tsx estou usando typescript
      e fica dessa forma
      <div>           <Navbar/>             <main>{children}</main>             </div>  
    • Por ILR master
      Fala pessoal, tudo bem?
       
      Eu tenho o seguinte código:
       
      <script>
         $(function(){
      var jElement = $('.fixar_banner');
      $(window).scroll(function(){
          if ( $(this).scrollTop() > 120 ){
              jElement.css({
                  'position':'fixed',
                  'top':'10px'
              });
          }else{
              jElement.css({
                  'position':'relative',
                  'top':'auto'
              });
          }
      });
      });
      </script>
       
      Porém, eu quero que a div fique fixa até que outro elemento apareça na tela, tipo o rodapé da página por exemplo. É mais ou menos como a página de notícia do uol.
      https://noticias.uol.com.br/internacional/ultimas-noticias/2025/01/19/sonho-americano-brasileiros-moram-em-carro-e-buscam-comida-no-lixo-nos-eua.htm
       
      Espero ter sido claro.
       
      Obrigado :)
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.