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:
github.com/Larissakich/sidebar
Redes sociais:
LinkedIn: / larissakich
Instagram: @dev_em_dev
E-mail:
[e-mail]
Tema do VSCode:
Omni Owl

[@robsonfernandes2692]

Que aula. Vc é perfeita. Umas das melhores didáticas do TH-cam. Parabéns.

[@febatera07]

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 😊

[@vitorhugo-zary]

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

[@rogermattes5397]

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

[@ratodorime2761]

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

[@DavidSilva01]

Muito top, parabéns 👏🏻👏🏻

[@mchaprao]

Parabéns pela aula!

[@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



Logout

[@Kaston3521]

muito obrigado, voces nos ajuda muito.

[@robsonfernandes2692]

Vc ganhou mais um inscrito. ❤

[@antonioalexandre9563]

muito boa sua aula parabens

[@digosSongs]

Top!

[@larissakich]

Muito obrigadaaa☺️

[@misternet1121]

Ficou show de bola... Muito obrigado por nos ensinar a fazer isso.
Uma pergunta: Como faço para criar sub-menus nele?

[@investindoemativos8690]

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

[@larissakich]

Muito obrigada haha ☺️

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

[@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 ?

[@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..

[@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.




SAIR

[@LuanRBarros]

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

[@robinsoncarrazzoni662]

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 !

[@dionioseuprofessordeingles4476]

😅😅😅😅😅 desculpa mas ri do seu comentário... Tamo na luta mano...

[@barejota6678]

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

[@AlexSoaresGtr]

Oi Lari!! Tudo bom?
Qual plataforma você usa ou usou para aprender a programar?

[@larissakich]

Oii, tudo bem e você? Fiz alguns cursos da Alura e alguns da b7web, recomendo os dois, são muito bons

[@WellingtonCoutto]

Não consigo acessar essa versão do GoogleFonts. Quando pesquiso só me direciona para uma nova versão.

[@larissakich]

Que estranhooo, tenta acessa esse link aqui: fonts.google.com/

[@jccarlos2025]

Minha flor de lotus voce ensina muito bem, ficou ótimo seu trabalho, porem fala muito rápido, e ensina muito rápido!! lembre-se existe pessoas que tem dificuldade para pega as coisa. God bless you

[@dionioseuprofessordeingles4476]

Uma boa dica nessas situações só usar a função velocidade do próprio youtube pra diminuir ou aumentar a velocidade do vídeo.

[@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!

[@jccarlos2025]

Esta parecendo narradora de jogo os torcedor so entende goooolll!! va mais de vaga, ensine com mais calma, ensinar e uma arte!! essa arte voce tem; todavia esta muito acelerada.

[@AndreOliveira-rn5dx]

Top!!! Queria ver se consegue remodelar meu site? Te mandei um inbox no seu Instagram

[@larissakich]

Oii, te respondi lá

[@AndreOliveira-rn5dx]

Blz, assim que possível dá uma verificada la