Como fazer um MENU LATERAL responsivo (SIDEBAR) | HTML, CSS e JavaScript

Olá, pessoal!

Nesse vídeo, vou mostrar para você como fazer um menu lateral responsivo utilizando HTML, CSS e JavaScript. Vou te mostrar diversas funcionalidades do CSS, como FLEXBOX e GRID, além de demonstrar técnicas para posicionar elementos usando "position".

Repositório com o código:

Redes sociais:
Instagram: @dev_em_dev

E-mail:

Tema do VSCode:
Omni Owl

[EngenhariaBomRetiro]

Para alinhar a parte de Logout eu consegui fazer isso no final, com essas configurações deu certo, centralizou o icone com a sidebar aberta e fechada

<div style="justify-content: center;" id="logout">
<button style="height:3rem;width: 100%; align-items: center; justify-content: right;" id="logout_btn">
<i class="fa-solid fa-right-from-bracket"></i>
<span style="text-align: left;" class="item-description"> <a href="#">
Logout
</a></span>
</button>
</div>

[robsonfernandes]

Que aula. Vc é perfeita. Umas das melhores didáticas do YouTube. Parabéns.

[febatera]

Cara, sensacional... Eu uso esse recurso nativo do Bootstrap mas nunca tinha parado pra fazer na unha e, o teu, ficou muito filé. Parabéns, teu canal e teus vídeos são muito bons 😊

[BrianyCrisSousa]

Sobre o botão logout para alinhar: coloquei um espaçamento e resolveu :)
valeu demais.

#logout_btn i{
margin-left: 18px;
}

[viniciuseduardo]

Seus vídeos são ótimos. Nos ajudam demais!

[misternet]

Ficou show de bola... Muito obrigado por nos ensinar a fazer isso.

Uma pergunta: Como faço para criar sub-menus nele?

[robinsoncarrazzoni]

Eu sou como você desenvolvendo. A diferença é a emoção que eu tenho. Pq não sei o que tô fazendo, e cada vez que eu atualizo o css chega a escorrer lágrima dos olhos. A página parece que passou um trator por cima 😂
Quanto tempo de estudo você chegou nesse nível? Parabéns !

[rogermattes]

Me Ajudou muito esse layout, ficou perfeito para um projeto que estou fazendo aqui... Obrigado por compartilhar

[vitorhugo-zary]

Amém. Que vídeo lindo obrigado por sua ajuda 😀, muitissimo grato. Que Deus te abençoe, te guarde e te ilumine.

[ratodorime]

Muito obrigada professora 🎉, aprendi muito em suas aulas. Muito sucesso 🎉

[wocwoc]

tem como vc da aula de como colocar scripts de segurança no site antes de subir ele no servidor?
ótima aula.

queria entender como montar uma página onde quando logo, aparece o usuario logado como vc fez e ter todas informações do usuario, tipos coisas favoritas, e quando ele sair, fica limitado aos acessos de um usuario, como informações exclusivas .
acredito que seja em javaScript..

Larissa, Boa Noite. Parabéns pela aula. Eu estou iniciando agora pergunto Como faço uma ação ao clickar neste icones laterais, exemplo eu mostrar neste lado direito um CRUD e dados do usuário do firebase

[Kaston]

muito obrigado, voces nos ajuda muito.

[investindoemativos]

Um dia chegarei no seu nível! Muito top!

[fabioyugo]

Ficou massa a sidebar, gostei de como ficou a animação de abrir e fechar. Ali no botão de logout, se usar um visibility no span do texto será q resolve ?

[EngenhariaBomRetiro]

Para alinhar o icone de logout pelo css tambem não consegui, mas alterando o Style dele diretamente no html deu certo para mim dessa forma. Ficou alinhado o Siderbar aberto e fechado.
Se achar a forma pelo css me responda pfv.

<div id="logout">
<button style="height:3rem;width: 100%; align-items: center; justify-content: right;" id="logout_btn">
<i class="fa-solid fa-right-from-bracket"></i>
<span class="item-description"> <a href="login.html">
SAIR
</a></span>
</button>
</div>

[dellconte]

Gostei, mais algumas coisas vc faz rápido e quem esta aprendendo e complicado acompanhar... E quem sabe não precisa ver... pensa nisso!

[RafaelDamasceno-rl]

me ajudem, quando eu adiciono o conteudo da pagina ele fica em baixo da barra lateral e caso u coloque do lado, a barra lateral desfixa da lateral...

[barejota]

Larissa e como ficaria o codigo para que pudesse mudar o elemento que esta selecionado com o mouse clicando, sem ser colocando aquele "active" na class

[LuanRBarros]

e como faz sub menu ?Tipo, clicando em uma opção aparece outra em baixo