Aprenda como criar um HEADER SIDEBAR responsivo com HTML, CSS e JAVASCRIPT

o Olá pessoal não sabonete que sejam muito bem vindos a mais um vídeo aqui nesse canal e no vídeo de hoje vai ser para vocês como fazer um simples é incrível River responsivo É isso mesmo com uma logo com os navegadores quando redimensiona tela e vai se adaptando tanto para iPad e iPhone qualquer levar esse Beleza então bora lá ó é muito bem já estou aqui no meu computador e olha só que legal que vai ficar o nosso menu então a esquerda eu tenho a minha logo e a direita tem algumas opções como o home que ele já está ativo ou seja ele tem essa coisinha de fundo que fica bem bacana nós temos cursos sobre nós e contato apenas afins no exemplo mesmo E conforme já comentamos início do vídeo esse aqui é o - 100% responsivo ou seja ele vai ser de quando conforma device que ele estiver então ele vai funcionar tanto para celulares iPads computadores notebooks e assim por diante Então vou mostrar pra vocês como é que funciona essa responsividade é aqui nesse me no olha só que legal que é a partir do momento quando eu vou diminuindo aqui o menu ele vai sumir e ele vai se jogado aqui para esse ícone porque porque quando eu clicar no ícone vejo que vai abrir o meu sai de bar digamos meu menu lateral onde o fundo fica aqui desfocado eu tenho as minhas opções e eu posso fechar tanto nesse xizinho aqui quanto o seu é simplesmente no conteúdo fora do menu Ok então isso aqui é um exemplo bem bacana para vocês adicionar no portfólio de vocês ou até mesmo utilizar alguns projetos pessoais aí então vamos para o código Eu Já criei esse arquivo index ponta HTML e posso começar abrir uma estrutura padrão HTML simplesmente com o. Exclamação vou adicionar o título para cima documento como um reader pode ser tudo maiúsculo pai higiênico é Gustavo neitzke e eu vou começar a criando aqui uma div que essa dia que vai ser nosso Líder simplesmente com ponto reader eles vai criar uma div com a Clécia reader e já vou aproveitar também para adicionar uma ide reader aqui para essa minha de ir aqui dentro dessa dividida que nós vamos adicionar todos os elementos que nós temos no nosso Líder então é essa logo esses links aqui esse ícone quando eu preciso abrir o meu menu lateral e também é Ciclone quando eu quero fechar o menu lateral então eu posso começar colocando aqui os elementos conforme o meu device que dono o que apenas a logo e esses links Então vou começar colocando uma diva para mim logo que vai ser chamar pode ser logo underline reader e aqui dentro eu vou deixar uma imagem e essa imagem eu já tenho aqui e ela se chama logo underline higiene ponto. png Então vou colocar exatamente o nome dela aqui no ssc logo bom underline higiene.

Png Agora sim e o áudio pode ser um logo GM esse alto Lembrando que é um texto alternativo caso não consigo carregar a imagem e é claro que essa imagem vou estar deixando aqui no link do repositório no Git Hub que está aqui na descrição Mas você também pode utilizar qualquer outro imagem aí seja logo de vocês seja logo e um cliente e por aí vai e pra gente consegue visualizar um pouquinho melhor como está ficando a sua resultado eu já abri aqui o meu arquivo no Chrome no meu navegador utilizando extensão live-server que qualquer alteração que eu fizer aqui por exemplo outro senão a dá um teste live-server seu simplesmente salvar e ele já vai adicionar aqui para nosso o teste live-server ok vou retirar ele pois ele foi apenas afins e testes e vejo que nossa imagem já foi adicionado aqui com sucesso agora nós podemos adicionar esses outros elementos aqui que é os nossos navegadores os nossos links como home curso sobre nós e contato nós podemos ir tomando como base esse exemplo aqui que ele é bem bacana Ok então deixando bem igualzinho a ele eu posso colocar mais uma diva e essa dia vai ter a Class navigation navigation underline render Ok então navigation online Rio deixou esse creme certinho É isso aí mesmo e aqui dentro nós teremos o que estou aqui dentro você temos quatro links o primeiro link é o nosso home eu vou deixar sem nenhuma Action simplesmente com o jogo da velha aqui para o nosso HF e é home cursos sobre nós e contatos eu não me engano são quatro ou cinco links então cursos sobre nós a e contato contato dessa mulher vamos verificar se ele já tá aparecendo ó tá aqui embaixo Roma e curso sobre nós em contato exatamente que nós temos aqui no meu exemplo que a Roma e curso sobre nós e contato e agora com essa é a nossa primeira versão digamos assim do meu HTML é simplesmente com essas dez linhas eu já posso começar a trabalhar com os estilos então nós podemos deixar o nosso reader lá em cima com essa coisa de fundo os meus links aqui vejo que eles têm esse o ver essa cor aqui que é um roxinho bem bacana Então vamos começar a lidar nisso e agora Então logo após as nossas tags tá então eu posso abrir as minhas tags Style e eu vou fazendo tudo no mesmo arquivo mas caso vocês queiram colocar o CSS essa essa parte do estilos em outro arquivo não tem problema algum eu vou deixar tudo no mesmo arquivo mesmo por questões mais didáticas para mim não precisar ficar alternando entre um arquivo e outro e nós podemos tomar com um padrão para esse nosso projeto utilizar variáveis e cor mas Gus e eu crio variáveis de cor é muito simples e também é muito bacana então definir que o Ruth ele vai ter uma variável chamada if anything in Colour with white e essa minha color White ela vai fazer nada e simplesmente uma cor branca que é nada mais nada menos que um FF ou simplesmente White agora a minha segunda variável é um color Dark um e essa corda aqui um ela vai ter uma cor que se não me engano é 27 27 27 OK e eu terei cinco cores Dark então eu posso dar um control c control 1 2 3 4 5 possa renomeando aqui esses nomes para dar dois arq3 arq4 e Dark 5 e eu vou simplesmente copiar e colar aqui as cores que eu já tenho atribuídas para cada um desses Dark ok É claro que vocês podem ir também copiando e colando lá do repositório que a gente tem no Beach Run me lembrando que no repositório está aqui na descrição aqui o link dele bom então e agora para finalizar as nossas variáveis e cores Eu tenho simplesmente um roxo que eu posso assim aqui é um color purple e o roxo dele é exatamente isso hexadecimal que eu vou colar aqui para vocês muito bem e dessa maneira nós já temos as nossas sete variáveis de cor criadas com sucesso para utilizar aqui em nosso projeto e agora vou começar a dizendo que todo o nosso conteúdo eu vou remover as margens Então vou dizer que aqui que ele vai ter um margem zero e também vou dizer que ele vai ter um pede 0oc e é que houvesse hashtag é um asterisco para ele aplicar para todos os nossos elementos aqui da minha página feito isso eu vou começar dizendo que o bode ele vai ter um font-family Arial para deixar bem padrãozinho bem simples mesmo vejo que já mudou aqui a nossa fonte a família da fonte e também posso adicionar essa mesma cor de fundo que nós temos aqui no meu exemplo aqui essa cor de fundo se eu não me engano e ela Exatamente esse meu Dark e um ó eu vou copiar aqui essa minha variável e vou dizer que meu background-color ele vai ter a variável exatamente a que eu copiei e também já vou aproveitar para definir que o meu color que é a cor da minha fonte aqui da meu bordo toda minha página vai ser exatamente um branco e eu já tenho uma variável que chama uma cor branca OK tá aí agora você deve estar se perguntando porque que tu não coloca simplesmente White ou lexa decimal fff aqui Gustavo isso é porque se eu precisar utilizar vários brancos e depois eu pensar alterar eu vou ter que alterar diversas partes mas se utilizar variáveis eu posso simplesmente aqui mudar eu não quero mais que o branco seja branco eu quero que o branco seja um Grey então ele vai tirar em todos os momentos em todos os locais que que o branco está sendo utilizado que essa variável color White está sendo utilizada Ok acho que agora ficou um pouquinho mais claro para vocês entenderem o Real funcionamento dessas variáveis beleza e agora vamos começar a encaixar os alimentos beijo que essa minha imagem está super desproporcional ela tá muito maior então eu posso começar a definir uma largura para ela se ele vem com ie MG que a sua tag E lembrando que eu estou chamando diretamente MG pois eu só tenho uma imagem aqui nesse meu documento nesse moro aqui mas se você tiver mais imagens você pode vir aqui e adicionar uma classe ou simplesmente uma Edir por exemplo e MG logo líder e ao invés de você chamar a tag MG você coloca o ponto e MG logo reader que é o nome da sua classe ok vai dar na mesma e eu vou definir uma largura de 45 pixels péssima imagem vejo que a gente vai ficar bem pequenininha aqui é exatamente do mesmo tamanho que nós temos aqui nesse meu exemplo e também já vou dizer que meu reader que exatamente essa minha div nós vamos atribuir um Flex Box Black Box então eu posso colocar com display Flex Ok vejo que ele vai ficar na horizontal um do lado do outro mas eu posso estar manipulando isso o flex-direction ok se adicionar um flex-direction: verde que a direção vai ser em coluna então vai ficar um elemento abaixo do outro macho adicionar um flex-direction rouqueja é o deixou ele fica um ao lado do outro ok eu vou deixar o mesmo pois o nosso reader ele vai ser em linha assim como eu tenho aqui nesse meu exemplo Ok veja que está tudo em uma linha só não dá uma baixo do outro ok e também já vou definir aqui para ele um align-items-center olha só a diferença ele vai exatamente alinhar aqui na horizontal esses dois elementos Ok Veja a diferença novamente sem ele e agora com ele e até para vocês entender um pouquinho melhor o funcionamento desse align-items-center eu posso vir aqui no meu navegador com o botão direito inspecionar e com essa Flash aqui eu posso selecionar as minhas div reader ok Aqui está o meu online tem Center e olha só o que que tá fazendo na flechinha ali ele está alinhando na Oi Total naquela linha em roxo Ok novamente sem ele e agora com ele fica bem melhor alinhado na horizontal Ok acho que agora ficou um pouquinho mais fácil e vocês entenderem o seu funcionamento e também eu tava vendo aqui ó se exatamente essa minha classe navigation reader essa minha div ela tem os elementos que eles também vão ficar na horizontal alinhados então eu posso adicionar esse distriflex flex-direction Row e align-items-center também para a minha classe navigation header Ok vai funcionar da mesma maneira e fica bem mais fácil da gente conseguir ter o controle e manipular cada um desses elementos agora o próximo passo é definir uma cor de fundo aqui para o meu reader exatamente aquela cor de fundo que a gente consegue visualizar aqui numa documento Ok então essa cor de fundo você não me engano é um background aqui ó background e eu vou utilizar a minha variável color Dark 2 o certinho na sequência Verde vai ficar a mesma cor de fundo dos dois elementos aqui só que nesse meu exemplo vejam que ele tem uma sombrinha aqui que deixa um efeito bem bacana também podemos adicionar essa sombra aqui no meu projeto e eu posso colocar essa sombra com Box shadown um Pixel Gun Pixel 4 pixels e essa Sombra Vai utilizar a variável Ou seja a cor color Dark 4 Ok Então coloque quatro vez que vai adicionar a mesma sombrinha o mesmo sombreamento nesses meus dois exemplos agora acompanhando os dois aqui vejo que esse meu exemplo está um pouquinho maior e aqui tem um pouquinho menor o líder então eu vou adicionar uma altura pode ser de 3. 5 MM que amar unidade que nós temos poderia ser em pixels poderia ser e em eu vou utilizar e m mesmo mas se vocês querem usar em pixels Pode ser lá 3 x 5 a 16 Alexa 3,5 x 16 Então como Alexa já falou Para gente exatamente 56 pixels pois 1 m corresponde a 16 pixels Ok mas eu vou deixar 3. 5 mm para você saber essa diferença e do porquê usar ele ou não feito isso como o nosso reader ele já está com Flex Box eu posso adicionar aqui é um justify-content e o dias ficar contente é exatamente o meu Space between olha só a diferença como nós temos apenas dois elementos aqui dentro do meu reader nós temos essa dívida e essa div ele vai estar adicionando aos extremos Então tudo para a esquerda e tudo para a direita aqui esse dois elementos então ficou com a esquerda e outro ficou para a direita aqui com esse Space between se eu quiser me aprofundar mais um pouco nessas opções justify-content eu posso novamente vir aqui o podem ver aqui exatamente a minha logo está para esquerda e os meus navegadores estão para a direita mas se eu quiser alterar eu posso vir aqui no Space between e eu posso vendo diversas opções que nós temos aqui para estar adicionando ao menu Ok por enquanto eu tenho apenas o Space between que já nos atendem muito bem e eu posso estar adicionando para ele também um prédio de 10 e 10 por cento já explico para vocês o que que só que tá fazendo vejo que quando nos referimos apenas duas propriedades por pede o zero é para o top e para o Bottom e esse dez porcento aqui ele vai se aplicar tanto para a direita quanto para a esquerda Se eu colocar agora simplesmente um dez porcento ele vai se aplicar para cima para a direita para baixo e para a esquerda massa esse pede que é o espaçamento entre os elementos e a borda eu quero que ele seja feita apenas para a direita e para a esquerda então a gente faz dessa maneira que horas eram e dez porcento ok há dez porcento tanto na esquerda e dez porcento tanto na direita e agora vamos trabalhar com esses meus navegadores aqui com esses meus links vejo que eles estão todos aglomerados aqui tá bem difícil enxergar então eles estão dentro dessa classe navigation header e eu já disse aqui nos meus estilos que essa minha classe navigation Líder ela vai ter um display Flex ou seja ela está utilizando flex-box E se eu chamar ela aqui novamente você tá um GAP com esse GAP eu consigo atribuir um espaçamento Entre esses meus elementos então vejo que fica bem bacana que é o mês passamento que nós temos aqui no meu exemplo e agora para trabalhar com esses meus links como eles estão dentro da na classe navigation header eu posso chamar novamente essa classe massa atribuir esse alimento que é o elemento dos links esse azinho Ok eu vou conversar retirando como text-decoration None esse sublinhados que esses links tem e vou colocar uma cor aqui da fonte pode ser a minha um color purple rock tem um corpo para deixar esse meu roxinho purple né Assim como nós temos aqui nesse meu exemplo e agora o próximo passo é definir uma transition de um segundo para ele um segundo Essa transition vai ser aplicada quando nós passarmos o mouse por cima Então veja que no exemplo quando eu passo ele demora um segundo para colocar para mudar essa cor para branco e também eu vou definir para ele um Fontes em tibold tá deixar esse nossos textos esse nosso menos em Ficou bem legal bem bacana E olha só o tanto que a gente já conseguiu evoluir progredir aqui nesse nosso rir eu já tô começando a ficar bem parecido com o exemplo que nós queremos chegar é claro que ainda Temos vários detalhes para ajustar mas estamos no caminho Ok acredito que o próximo passo seja definir qual que é o menu ativo para fazer isso é muito simples eu posso definir qual que é o menu aqui se eles vende jogando um Class Active para ele e é claro que e o menu ativo terá uma rota também e essas lógicas vocês podem manipulando com JavaScript posteriormente Mas agora como é apenas afins para mostrar pra vocês como é que funciona eu vou definir aqui uma Class é que tive na mão mesmo start OK e eu vou dizer que duas vezes alimentos que terão essa classe é que tive eles vão ter um color com a variável Dark 3 Ok então será um background-color Na verdade tenho para dar aquela coisinha de fundo var um color Dark 3 Ok então vez que ele vai ter a cor de fundo aqui com Dark três deu certo mas ele tá muito pequeno então eu posso estar aumentando com um pede de 10 pixels para ele que fica bem legal e agora basta apenas arredondar essas bordas com border-radius também de 10 pixels Ok veja agora sim está exatamente igual esses meus dois menos ativos e acredito que agora a única coisa que falta entre esse nossos dois elementos na primeira versão digamos assim é exatamente esse meu conteúdo menu responsivo-Gustavo nesse aqui eu posso estar adicionando ele logo após essa nossa div reader eu vou adicionar uma nova de contente que irá agrupar todos os meus elementos todo o conteúdo digamos assim da minha página e vou colocar um h1ac menu responsivo Gustavo Leite aqui ok também vou aproveitar e colocar um Eyed contente aqui para ele para depois nós conseguimos manipular um pouquinho melhor com CSS e também com jardim E é claro que com s ss eu posso tá chamando simplesmente a sua classe Então vou chamar a classe mesmo contente aqui em cima definindo um text-align-center para ele para alinhar o centro Ok pois a gente está aqui é esquerda agora se eu salvar vejo que ele vai ficar ao centro também posso definir um pede top pode ser de 10 pixels para só dar um espaçamento aqui entre o elemento EA borda superior posso aumentar Vou colocar aqui para ele 5 m de uma vez Ok show de bola agora sim ficou bem melhor e também vou dizer que todo meu conteúdo ele vai ter uma altura de 100 vios Ok vejo que vai até ficar um pouquinho com escuro aqui mas não tem problema e após isso também eu colocar aqui uma transição zinha de um segundo para ele para que que vai servir essa transição vejam aqui no meu exemplo que quando eu clico nesse botãozinho para abrir o menu lateral ele demora o fundo aqui um segundo para deixar de sufocado Ok então é exatamente essa tarefa a transição para o meu conteúdo Agora sim podemos partir para ver são dois aqui desse meu menu desse meu sair de bar e o que que vai ter Nessa versão dois exatamente o que nós temos aqui que quando eu diminuir ele vai sumir o menu sumir entre aspas né e aparecer esse cone e quando eu clicar nele ele vai abrir o menu lateral aqui o sai de bar onde nós temos as opções de fechar tanto clicando no meu conteúdo aqui fora ou clicando nesse ícone Zinho aqui do X ok então para isso eu tenho que fazer alguns mexes aqui no meu HTML também adicionando mais alguns elementos o primeiro elemento que eu vou adicionar É exatamente esse meu ícone aqui E esse ícone querendo ou não ele está aqui como primeiro elemento aqui primeiro elemento então será um botão e esse meu botão ele terá uma Class Class btn-icon River ou seja ele é o meu botão que vai ter o ícone aqui no meu Reader eu comi ele será um svg eu posso pegar esse svg aqui em ícones Bootstrap icons eles tenham uma grande Gama de ícones aqui dentro e é simplesmente basta copiar o svg Deixa eu só achar aqui onde é que ele tá Que eu acho que está bem Aqui para baixo deixando uma procurada quando achar eu acho que eu volto aqui muito bem Acabei de encontrar o nosso ícone que é exatamente cinco nihilist então se você chegar aqui nesse Bootstrap icons ou se pode simplesmente dar um contra o f e pesquisar por lixo que ele vai chegar exatamente nesse meu english então clicando nele eu posso copiar o seu svg e colar dentro aqui dessas minhas tags do batom que ele já vai dar o ícone bem certinho aqui para esse meu botão Ok só vou ajeitar com esses tabs voltando aqui para minha página Vejam Só que eu já tenho o meu ícone com sucesso aqui no meu projeto e agora o segundo e último item HTML último ícone que eu necessito aqui né seu projeto e esse meu botãozinho aqui de fechar o meu menu lateral aqui então é esse ícone vocês podem simplesmente colocar um x ou procurar aqui o ícone que corresponde a esse xizinho aqui se eu não me engano seu você procurar simplesmente com um x Será que ele encontra isto em diversos aqui mas eu acho que ele é um dos últimos lá embaixo que então vou descendo eu vou descer mais um pouco cadê cadê cadê Aqui tem o mais ó só falta o x Cadê o X1 desse mais mais mais mais agora sim encontrei aqui ó eu vou pegar esse menorzinho tem o grandão que é o LG o Largo que provar mental nesse sentido mas eu vou pegar o menorzinho eu vou vir aqui vou copiar o seu svg e vou criar um novo botão aqui dentro da nossa navegação navigation reader Ok pois como aqui no nosso menu ele está junto com o nosso navigation reader vejo que ele abra na lateral então ele vai ficar um pouquinho acima do meu home é exatamente o que eu estou fazendo aqui eu vou criar um meu botão e aqui dentro e o svg dele ok só ajeitar os pezinhos e eu vou adicionar a mesma classe que eu tenho daquele meu outro ícone que exatamente a classe btn e com reader Ok Então adicionei a mesma classe para esses meus dois botões e agora podemos trabalhar aqui com CSS aqui com meus estilos exatamente para essa minha classe e pressione o botão Então vou começar definido aqui que esses botões vejo que como nós temos ele aqui na página eu não quero que eles apareçam assim já de primeira então eu vou começar retirando esses botões com display o nome ok display None vejo que ele vai remover esse botões mas como nós precisamos alterar seu estilo vou deixar comentado por enquanto essa minha opção e eu vou começar colocando um background color transparente para ele vejo que vai ficar transparente posso retirar essas bordas com um border None Ok vou colocar um color para ele aqui precisando uma variável Branca Ok então var color White e ele vai deixar bem certinho Branco esses meus ícones Ficou bem legal e também vou adicionar um cursor Pointer aqui para esse nos botões Ok feito isso eu acho que eles estão um pouco pequenos vocês não acham nós podemos aumentar a que indiretamente o svg ao invés de 6 eu vou colocar 20 para largura e 20 para altura a mesma coisa em cima outro ícone aqui ó invés 1620 para largura e 20 para altura agora sim já ficou um pouquinho melhor e eu posso estar desses comentando esse Meu display None quer tirando esses ícones momentaneamente aqui da minha página e agora vai entrar Nossa primeira regrinha aqui e essa regra é o seguinte quando eu vou diminuindo aqui ou quando o arquivo for menor ou igual a 768 pixels é claro que você pode deixar um número que vocês desejarem aí mas esse foi o número bacana assim que eu encontrei ou Sérgio quando chegar exatamente nesse 768 pixels verde que vai e esse meu menu aqui em cima e ele vai adicionar vai mostrar esse meu ícone aqui para abrir o meu menu lateral Ok eu posso estar fazendo isso com um arroba mídia que nós temos aqui que é uma propriedade no CSS onde meu scream.

and a largura máxima então and entre parênteses o Max with OK amor largura máxima for 768 pixels Como comentei com vocês quando então a largura forma igual ou menor a 768 pixels eu quero que meu navigation um reader tenha um estilo e eu também quero aproveitar para mostrar exatamente os ícones aqui como mostrou esse ícone da lista e esse cone do xizinho aqui para mostrar os ícones eu posso estar chamando as suas classes que é exatamente btn-icon River e o invés do definir um display None pois spray nome ele retira o salão display Block Ok então display Block aqui para ele já podemos ir testando essas configurações então display Block salvei agora olha só aqui eu vou ir diminuindo e vejo que ele vai mostrar bem certinho quando chegar 768 pixels Ok então isso aqui já está funcionando e agora a única coisa que precisa é retirar esse menino Zinho aqui de cima e jogar aqui para lateral Ok e com isso nós podemos ir trabalhando exatamente nessa minha classe navigation header que é onde se encontram esses meus elementos aqui do meu reader passando agora assim para um sai do bar tem um menu lateral Então vou começar dizendo que eles vão ter um position Absolute Ok então position Absolute aqui para ele ou seja ele vai tomar com base o elemento anterior ao que ele vai ficar meio independente digamos assim eu vou dizer que seu flex-direction agora não vai mais ser um rolo não vai ser uma linha eu quero que eles ficam um elemento embaixo do outro e nós temos aqui no alimento lateral então eu posso definir um flex-direction qual um para ele ok muito bem vejo que ele já ficou aqui em uma coluna vou colocar um top 10 para ele ficar bem certinho aqui no início do meu topo ok e também vou colocar um background para ele vai ficar um de Collor EA variável vai ser o meu dar que cinco então color Dark 5 dessa maneira aqui veja só que nós já estamos conseguindo começar a montar o menu lateral posso dizer que também que só que vai ter uma altura de 100 porcento Ok vejo que ele vai ocupar todo espaço aqui toda a altura da minha tela e ele vai começar com uma largura de 35 35 views também aqui então VW eu consigo definir exatamente essa largura Ok vou dizer também que ele vai ter um pé de 1m 1 cm dessa menina aqui ou simplesmente 16 pixels que dá no mesmo resultado até começo a 16 pixels vejo que não mudou absolutamente nada ok E já podemos manipular na lógica aqui agora sim e quando eu clicar nesse botão ele vai abrir aqui da esquerda para a direita e quando eu fechar ele simplesmente vai sumir Ok eu vou definir que esse meu reader esse menino lateral ele vai ter uma animação maturação aqui animação de um segundo Ok então essa vai ser a duração da minha animação Ou seja quando eu clicar no botão ele vai demorar um segundo para vir da esquerda para a direita ok É claro que agora isso aqui ainda não está funcionando pois nós não adicionamos o JavaScript ainda aqui nesse meu projeto mas hoje eu escrevo que vai fazer o seguinte seu d-fine agora um margem left de menos 100 vídeos Olha que você que vai acontecer ele vai sumir mas o que que eu sumi ele foi bastante então aqui para a esquerda mas agora com JavaScript quando eu clicar exatamente nesse meu ícone eu quero ser tá ao invés um margem left sem envios eu quero que me dá um 10 - 10 então vejo que ele vai ficar exatamente aqui no início mas quando eu clicar no botãozinho de fechar o clicar fora do meu conteúdo eu quero que ele aplique novamente o margem left sem fios retirando entre "esse meu Sai de Baixo então eu posso até mesmo criar uma animação aqui ó dizendo que com keyframes dele aqui ó prefere Scotch e identificador eu vou criar uma animação chamada show Side bar ok e quando eu tiver essa show só de bar eu quero que tenha um from Ok então ele vai sair de alguma etapa indo para alguma outra etapa correto e qual que é etapa que ele vai estar e iniciando ele vai está iniciando então com margem left de menos 100 vios e eu quero que ele vá ao invés de menos 100 envios eu quero que ele vale sem para menos dez Ok dessa maneira quando eu chamar essa menino ação ele vai fazer com que o menino saia de menos o Bios para menos dez Rios fazendo com que ele apareça magicamente na tela assim começou mostrando para vocês nesse momento e dessa maneira finalizamos toda a parte de estilo aqui nessa nossa página já tá começando ficar uma coisa simplesmente fantástica muito profissional e agora para deixar mais profissional ainda podemos adicionar um pouquinho de script um pouquinho de assistir para quando eu clicar em um botão fazer tal coisa quando a largura foi cortar o tamanho eu quero que ele também outras coisas quero que ele mude uma variável de tupla falso e assim por diante e aqui dentro por incrível que pareça nós vamos trabalhar com apenas quatro variáveis a primeira variável e a variável reader que vai armazenar o estado aqui vai armazenar o elemento que ver se meu reader Ou seja eu posso pegar ele com document. Get a gente pede reader e como é que eu sei que exatamente ia ser the reader pois lá no início da ao Nós criamos aqui na minha div com aquelas reader também um AD reader muito bem então dessa maneira eu a Bíblia essa variável como esse no alimento que tem um eddi reader agora a minha segunda variável vai ser um navigation header dessa maneira aqui e ele também vai pegar o meu lado e deixa o líder eu tenho uma classe aqui ó nave deixam reler Mas eu também tenho criar uma exatamente com esse nome ok Por quê que eu estou colocando porque estou pegando mais depois eu acredito que seja mais fácil de manipular muito bem então um bilhete Element by ID o seu Exatamente esse navigation header show de bola e agora só falta mais duas variáveis a terceira variável aqui ó é um var contente essa variável vai pegar exatamente aqui o meu ardido conteúdo então document. Get Element by AD contente e a minha última variável finalmente é a variável que vai armazenar o estado no meu site bar se ele vai estar mostrando ou não simplesmente com um show sai de bar iniciando como fa e eu quero que ele inicie fechado feito isso vamos partir do seguinte princípio por exemplo Gustavo eu tô aqui redimensionando tô lá no meu iPhone mas quando eu clicar exatamente desse meu ícone aqui eu quero que ele Abra o menu lateral mas por enquanto ele não tá abrindo não tem nenhuma ação Ok então o que eu vou fazer exatamente nesse meu ícone aqui com um clique com um clique nesse meu ícone nesse meu botão eu quero que ele chame uma função chamada Toggle sidebar então Toggle sidebar é claro que os nomes vocês podem usar o que vocês quiserem não precisa ser exatamente específico como eu estou fazendo aqui e quando eu clicar naquele botão eu quero que ele chama essa função tu gosta de bar então consequentemente eu tenho que criar essa minha função dessa maneira como eu fiz aqui para vocês e quando eu chamar essa função eu quero que ele mude exatamente o meu meu show sai de bar até escrevi errado essa show sai de bar não sai de Nar Agora sim e quando eu clicar naquele botão eu quero que ele mude de falso e para tu ou de tro para falso dessa maneira eu consigo aplicar um tubo para ele ou seja vai alternar entre tro e falsi e eu vou apresentar no console aqui Exatamente Essa minha variável o estado dela ok então vindo com o botão direito aqui em inspecionar console e agora quando clicar no botão vejo que ele vai mostrar tro e agora falsa e tu falso e assim por Jennifer abrindo e fechando digamos assim o meu menu lateral OK então Com esses trofal se eu consigo aplicar um Infiel se aqui dentro simplesmente chamando aqui uma variável show só de bar se ela estiver aberto se ela estiver tro aqui eu quero que ele seco tem algumas linhas de código caso contrário ele vai cair no céu se tiver fechado eu quero que ele feche nessa ou no caso tiver aberto eu quero que ele fecha e se ele tiver fechado eu quero que ele abra mas agora eu tendo essa minha variável outro eu quero que ele abra esse é o menu e qual que é o conceito de abrir e tirar do menos 100 vios e aplicar um estilo de menos dez views Ok então eu vou dizer que meu navigation um reader ele vai aplicar um estilo para ele Style.

Marge left left esquerdo dessa maneira aqui e menos dez Rios porque menos dez vio se porque menos envios vocês lembram que quando o mesmo não está aparecendo é porque ele está com menos sem vírus ou seja bem para a esquerda mas quando eu clicar no botão eu vou colocar um menos dez Rios Ok então se eu quero abrir eu vou clicar um menos dez vios mas eu queres é fechar eu vou explicar para ele um menos 100 vídeos OK então agora quando eu vier aqui clicar no botão verde que ele já está abrindo com sucesso com seus atualizar e abre de novo tá funcionando muito bem isso aqui é muito bacana nem visualizar toda essa construção mas agora também quando eu clicar nesse molde ícone Zinho aqui de X Eu também quero que ele e esse menino ou seja lá naquele meu ícone que é exatamente aqui em cima o botão com um Clique nele eu quero que ele chama essa minha função Toggle sidebar e agora quando eu clicar aqui ele vai sentar com o outro mas quando eu clicar no botão sinicone ele também vai sentar como falso Ok então já tá funcionando muito bem mas agora eu quero que você não uma animaçãozinha para deixar isso aqui mais fluido demorar um pouquinho vindo daqui da esquerda para direita para mostrar para o usuário para apresentar para ele é uma experiência um pouquinho diferente uma coisa mais bacana OK e eu posso fazer isso você tá dando um animation-name e qual que é a um nome dessa minha animação exatamente animação Que Nós criamos o tratamento e que essa aqui ó Show say the Baroque que vai dos menos 100 para os menos 10 com um animation-duration de um segundo então animação vai durar um segundo e ela vai exatamente do menos sem par ou menos dez de uma forma bem flueza ok o que é que é um show sai de bar para ele agora quando eu clicar no botão vejo que já dá uma experiência muito melhor isso aqui dá uma outra cara para o nosso projeto mas agora vejo que seu executar sessão uma vez e eu fechar e abrir de novo vejo que ele tá indo de soco novamente depois ele só executa uma vez cada animação digamos assim então quando eu mandar fechar esse Sai de Baixo Eu também quero retirar essa animação Ok eu posso simplesmente passar uma string vazia algo nesse sentido e agora quando eu clicar no botão ele vai aplicar em Mação quando eu fechar e abrir de novo animação vai estar ali novamente isso é que funciona muito bem agora o próximo passo vejo Quando eu abro o menu aqui nesse meu exemplo vejo que todo meu conteúdo ele fica aqui com de certa forma meio borrado fica com Blur então eu vou adicionar aqui para o meu conteúdo um filterblade 3 pixels então contente style. com é igual a um blue-winged 3 pixels pode ser um dois pixels mesmo então 2 pixels agora assim quando eu abri o menu vejo o que que vai acontecer com todo meu conteúdo aqui da página clique aqui olha só ele ficou bem legal fica bem melhor de visualizar mas ele tá esperando aqui por cima aqui do lateral como é que eu faço para resolver isso todos elementos nossa página é esse Funciona igual camadas então eu posso dizer que meu conteúdo Ele está na camada um O meu sai de baile está na camada 2 o meu reader aqui em cima estragar mata 3 e assim por diante ou seja eu consigo manipulando e dizendo que não vai estar acima ou abaixo do outro e para gente conseguir resolver especificamente esse nosso problema é só dizer aqui ó que meu navigation o reader que exatamente esse meu sai de bar ele vai ter um z-index que a nossa camada 2 OK agora se eu salvar e clicar aqui no botãozinho Vejam Só que o todo meu conteúdo está baixo e que está acima então ele vai ser a primeira coisa que vai estar por cima vai estar mostrando apresentando para usuário e já nos resolveu esse problema mas também temos um detalhe aqui agora se eu fechar esse negócio de bar veja o que ele continua borrado Mas isso não pode acontecer então aqui eu também quando eu fechar o sai de bar eu quero que ele remova esse filtro aqui do meu conteúdo ou seja do meu contente Agora sim quando eu clicar vejam que ele aplica e quando eu fechar ele remove muito bom esse aqui tá ficando Fantástico e agora para as um passo é um passo que o particularmente gosto para caramba que utilizam muito no site no dia a dia que é o seguinte quando eu abro o meu site bar e eu clico no conteúdo fora eu quero que ele fecha o sai de bar então eu vou clicar fora o sai de baixo' vejo só que ele fechou com sucesso mas no projeto que nós estamos trabalhando isso aqui ainda não está funcionando OK e para fazer isso eu vou definir aqui ok com um clique nessa medida contente com um clique nela eu quero que ela chama uma Oi Rose sai do bar muito bem e só que lembrando pra vocês que uma div não é um botão não ao input ou seja não é algo clicável Se eu tentar clicar aqui nessa devia ela não vai chamar essa função com o chá de bar bastante deixar essa dica clicável basta adicionar um PABX zero dessa maneira ela consegue chamar essa minha função Close sai de Bar só que a carga nós temos que criar essa na função Close sai de bar Beleza então aqui dentro eu vou começar a verificando-se meu sai de bar realmente está aberto eu consigo verificar isso através do estado aqui dessa variar o show sai de bar e tendo isso aqui é só chamar o meu minha função tu gostar de bar Beleza então se tiver aberto eu quero que ele fecha show de bola então eu sei que ele vai estar tro Quando ele chegar no meu show no meu tudo só de bar ele vai mudar para falso e vai cair aqui no céu se fechando Agora sim e se não sai do bar podemos testar agora eu cliquei para abrir o site bar cliquei fora ele fechou com sucesso então isso aqui é mais um exemplo muito bacana para você utilizar em nos projetos pessoais e vocês aí e agora a única coisa que falta para gente finalizar essa aula finalizar se rir ele sai de barco com sucesso vejo que nós temos um última detalhezinho que a gente precisa corrigir Só quando eu vou diminuindo aqui e eu clico por exemplo para abrir o meu sai de bar e eu não fecho ele mas eu ir redimensionando até que seja maior que em 768 pixels que ele a738 vão chegar nele 768 pixels agora assim for maior vejo que todo meu conteúdo aqui ele continua aqui com aquele Blue com aquela borra ação digamos assim e quando eu mando diminuir ele vem como aberto e vou sair de bar Mas eu não quero isso eu quero que quando eu aumentar aqui ele volte meu conteúdo ao normal e quando eu voltar novamente ele venha com o estado e se não sai the Baroque para corrigir isso também é bem simples basta eu verificar coloca o tamanho aquele a minha tela então eu posso adicionar Window. AD event listener e eu quero ouvir qual o evento eu quero ouvir o rio size ou seja toda vez que o aumentar ou diminuir essa minha tela aqui ó dessa maneira estão aumentando ou diminuindo ele vai estar chegando aqui dentro dessa minha função aqui então eu vou diminuir aqui para mostrar para vocês como fazer isso eu vou criar semi a função ela vai estar recebendo um evento mas a gente não vai utilizar esse evento aqui por de for e olha só que legal toda vez que eu aumentar ou diminuir o tamanho da minha tela redimensionar é ela eu quero que ele deu um conselho.

Log Oi beleza então toda vez que aumentar a diminuir aqui dentro olha só que legal que vai aparecer aqui no meu console e olha só quantas vezes ele está colocando aqui esse olho no meu consolo já colocou 166 vezes e toda vez que eu diminuir ou aumentar ele está chamando essa função pois ele está ouvindo exatamente ursais da minha página Ok e agora tá fazer funcionar esse nosso detalhes é só o verificar se a largura da minha página com Window.