Desenvolvimento pelo figma da tela de layout, criação dos componentes header, sidebar.
No toogle button, apliquei props para criar estilos diferenciados quando houver necessidade, como botão toogle no componente sidebar mobile onde ao clicar para abrir a aba lateral o botão toogle tem um estilo diferente do header.
Ainda neste botão tive de implementar uma logica onde showText aplica o texto em dispositivos mobile, e com uso do tailwind escondo o texto no modo desktop.
O toggleText aplicara o texto do toogle mobile de acordo com tema, ele faz a verificação se estiver no light ele aplica o tema dark e vice & versa.
OnClick tem mesmo principio de logica, ao clicar no botão e feito a alternância do tema, se estiver no light ele aplica o tema dark e vice & versa.
Aqui faço uso do hook para gerenciar o menu, iniciando null todos menus fechados. Tive de criar dois, pois para gerenciar cada seção GET STARTED e LIBRARY, pois não sabia como fazer...
Ambas funções fazem essa verificação pelo onclick, de abrir e fechar o menu.
Em vários vídeos da internet vi que esta boa forma de criar os links do menu, criando um array depois usando map() para renderizar. No meu curso já definimos no NAV e LINK ou A, eu achei interessante o array, mas caso prefiram mudar só falar.
OBS: Eu não sabia qual layout seguir no mobile, visto que tinha 3 tipos diferentes, um deles na versão do link aplicado (button), ainda sim era outro layout.
Eu fiz da melhor forma que achei que deveria ser feito, caso não esteja de acordo, refaço sem problemas.
Desenvolvimento pelo figma da tela de layout, criação dos componentes header, sidebar.
No toogle button, apliquei props para criar estilos diferenciados quando houver necessidade, como botão toogle no componente sidebar mobile onde ao clicar para abrir a aba lateral o botão toogle tem um estilo diferente do header.
Ainda neste botão tive de implementar uma logica onde showText aplica o texto em dispositivos mobile, e com uso do tailwind escondo o texto no modo desktop.
O toggleText aplicara o texto do toogle mobile de acordo com tema, ele faz a verificação se estiver no light ele aplica o tema dark e vice & versa.
OnClick tem mesmo principio de logica, ao clicar no botão e feito a alternância do tema, se estiver no light ele aplica o tema dark e vice & versa.
Aqui faço uso do hook para gerenciar o menu, iniciando null todos menus fechados. Tive de criar dois, pois para gerenciar cada seção GET STARTED e LIBRARY, pois não sabia como fazer...
Ambas funções fazem essa verificação pelo onclick, de abrir e fechar o menu.
Em vários vídeos da internet vi que esta boa forma de criar os links do menu, criando um array depois usando map() para renderizar. No meu curso já definimos no NAV e LINK ou A, eu achei interessante o array, mas caso prefiram mudar só falar.
OBS: Eu não sabia qual layout seguir no mobile, visto que tinha 3 tipos diferentes, um deles na versão do link aplicado (button), ainda sim era outro layout.
Eu fiz da melhor forma que achei que deveria ser feito, caso não esteja de acordo, refaço sem problemas.