Criação do componente SideMenu #76
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Alecell
reviewed
Feb 21, 2024
Alecell
suggested changes
Feb 27, 2024
Alecell
reviewed
Mar 6, 2024
eu simplesmente retirei tudo de fonts e quando finalizei os testes eu coloquei novamente pq sei q vão atualizar e resolver. |
change move scroll to translationX
change line div to hr reduction search li tag change parameters name
diogocaronte
approved these changes
Mar 9, 2024
Entendi! beleza! |
DominMFD
pushed a commit
to DominMFD/pet-dex-frontend
that referenced
this pull request
Mar 27, 2024
* create sidemenu * change: component sidemenu change move scroll to translationX * update * add: title yourpet * update * update * PR revised, change to kebab-case, reduction the logic of functionality etc * change: change line div to hr, reduction search li change line div to hr reduction search li tag change parameters name * changed: changesidemenu logic passed to a utility * changed: index.scss * remove: comments * remove: base.scss --------- Co-authored-by: Alexandre Gomes <[email protected]>
DominMFD
pushed a commit
to DominMFD/pet-dex-frontend
that referenced
this pull request
Mar 27, 2024
* create sidemenu * change: component sidemenu change move scroll to translationX * update * add: title yourpet * update * update * PR revised, change to kebab-case, reduction the logic of functionality etc * change: change line div to hr, reduction search li change line div to hr reduction search li tag change parameters name * changed: changesidemenu logic passed to a utility * changed: index.scss * remove: comments * remove: base.scss --------- Co-authored-by: Alexandre Gomes <[email protected]>
DominMFD
pushed a commit
to DominMFD/pet-dex-frontend
that referenced
this pull request
Mar 27, 2024
* create sidemenu * change: component sidemenu change move scroll to translationX * update * add: title yourpet * update * update * PR revised, change to kebab-case, reduction the logic of functionality etc * change: change line div to hr, reduction search li change line div to hr reduction search li tag change parameters name * changed: changesidemenu logic passed to a utility * changed: index.scss * remove: comments * remove: base.scss --------- Co-authored-by: Alexandre Gomes <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #17
Feature
Criação de componente sidemenu responsivo com navbar e content, contendo as funções de abrir/fechar e hover/active nos links
Changelog
ALTERAÇÃO DA HEIGHT DA .home DE "100vh" PARA "100dvh"
Justificativa: "dvh" considera as barras de rolagem e barra de endereços da tela do usuário em dispositivos móveis, consequentemente tornando a página mais adaptável.
FUNCIONALIDADE DO COMPONENTE
A página em seu estado original está com duas grids de 100vw com o componente SideMenu no lado esquerdo, consequentemente ficando visível na tela ao final do carregamento, tendo em vista o carregamento ser da esquerda pra direita. Para burlar isso foi adicionado width: 200vw e transform: translateX(-100vw);
ABRIR MENU:
openMenu(): ao clicar no ícone "hamburger", adiciona a classe .open-menu alterando a width da .home para 100vw e o transform para translateX(0), consequentemente retornando ao estado inicial da página com a sidemenu visível, cumprindo o objetivo.
FECHAR MENU:
exitMenu(): ao clicar no ícone "exitmenu", remove a classe .open-menu e adiciona a classe .exit-menu alterando a width da .home para o estado inicial com width: 100vw e transform: translateX(-100vw).
ACTIVE MENU ITENS:
activeClassMenu(): ao clicar no item do menu adiciona um background para informar em qual item a página está no momento, alterando ao clicar em outros links do menu.
Obs: Foi necessário a criação de duas classes, pois se a animação transition fosse inserida diretamente na .home ela animaria no carregamento inicial da página, não sendo o objetivo que é de ocorrer apenas ao clicar nos itens de abrir e fechar o menu.
Visual evidences 🖼️
ABRIR e FECHAR MENU
EFEITO HOVER
ACTIVE MENU
Checklist