React, Material UI 5 e Typescript: #08 - Criando menu lateral

Nessa aula vamos utilizar o componente de Drawer do Material UI. Vamos configurar a imagem de perfil de usuário e a lista de opções de menu.

Links mencionados no vídeo:

Outros cursos no canal:

Livros recomendados:

Conteúdo:
0:00 | Introdução
0:15 | Começando
0:50 | Documentação do Drawer
7:00 | Construindo o componente
12:00 | Drawer funcionando
13:37 | Variantes do Drawer
16:00 | Encaixando o Drawer no conteúdo
27:00 | Adicionado foto do perfil de usuário no menu
33:00 | Adicionado Divider
33:25 | Adicionando Lista de opções de menu
37:39 | Documentação da List para as opções de menu
41:45 | Dúvidas, sugestões e comentários

CODARSE - Menu lateral

#react #reactjs #cursodereact #typescript #cursotypescript #learningreactjs #javascript #cursodejavascript #reactetypescript #learningtypescript #learningjavascript #reactnative #materialui #materialdesign #mui #miu

[robsonoliveira]

Que aulão!!!
Lucas, você está de parabéns!
Este curso está sendo muito bom para mim.
Estou aprendendo muito mais com o modo que você ensinando neste curso.
Estou tirando muito proveito de cada aula.
Muito obrigado.

[juniormelo]

Sua dedicação/calma pra explicar é sensacional, sem contar com propriedade na hora de demostrar o conhecimento do assunto. Parabéns!

[pallomagualter]

Adorando as aulas. Como sempre cheio de dicas de boas práticas. Valew mesmo Lucas pelo curso.

[davidsousai]

Conteúdo sensacional! Baita professor!

[flaviorocha]

Curso espetacular. O melhor conteúdo da WEB em React e Material ui. Show!!

[danielesilva]

Seu conteúdo é muito bom!! OBRIGADA!!!!

[danieldossantos]

Kra, atualmente estou em um projeto com material e seu video salvou mto, obrigado demais ja ganhou um inscrito !

[lucamargo]

Suas recomendações são muito corretas ao meu ver, principalmente pq tô tentando seguir o passo a passo de todo o seu curso até este momento e a finalidade é seguir até o fim.

[reginaldobarrosdacunha]

Caro amigo, muito boas as suas aulas. Em tempo, o plural de pixel é pixels.

[oTelePato]

Em 30:53 é falado para usar o Box com um display="flex" e alignItens + justifyContent center, mas qual seria a diferença entre usar um Box com display flex, e um Stack sem o display flex com o alignItems e justifyContent center?

[luisrigaud]

Boa tarde, desde ja obrigado pelo contudo esta me ajudando muito, como faço para copntorna o bug na hora de colocar CHILDREN no export const Menueft: React.FC = ({children}) nao da certo apresenta um erro?

[luisrigaud]

Bom dia Lucas, olha eu aqui outra vez, sobre o icons do menu, eu não conseguir usar <Icon>Home</> quando deixo assim aparece nome do icon. mais uma vez parabéns as aulas estão incríveis.

[vieiramaicon]

Esse Box então funciona como se fosse um container? Uma div do html ou algo parecido.

[rafaelmichels]

Assim o component="nav" funciona, caso importar em outra pasta os menus não aparecem

Valeu

[thiagoamaralmaduro]

Suas aulas são fantásticas, estou adorando. Porem estou com um problema, meu Drawer não herda as mudanças de temas, ele fica sempre Dark, alguém poderia me ajudar?

[johnrodrigues]

Se alguém não conseguiu o type do sidebar coloca :ReactNode e importa do react, eu tava com esse erro

[andresinho]

No caso do box, não seria melhor usar um styled components? Com o styled do próprio material

[shagamu]

Olá Lucas, tudo bem? eu tenho uma duvida, eu sei que teve a atualização e mudou a children, como ficaria com a atualização?

export const LayoutBaseDePagina: { children: ReactNode }> = ({ children} ) => {

return (
<Box>
Teste

{children}
</Box>
);
};


tentei de varios jeitos encaixar o ILayoutDePagina de muitas formas mas nao foi, poderia me ajudar? excelente curso, obrigado!

[vieiramaicon]

Só relatando um problema que tive: coloquei o useTheme fora da função que retorna o componente, aí apagava tudo. hahahahah Passei um tempão para entender o motivo. Creio que o motivo seja que tava tentando pegar o thema, mas o thema estava no componente. Como usei o comando fora sem querer, deu pau. Quem passar por isso tb, veja se não é esse o motivo.

[MarcusSilva-rmer]

Cara teu projeto ta incrivel, mas to tento um problema com a parte do <list>, <lisitembutton>, etc... o button com o icone não aparece de jeito nenhum, não faço ideia do que seja, se alguém tiver alguma dica pf me fale