Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Criação do componente SideMenu #76

Merged
merged 13 commits into from
Mar 10, 2024
Merged

Criação do componente SideMenu #76

merged 13 commits into from
Mar 10, 2024

Conversation

JonasGz
Copy link
Contributor

@JonasGz JonasGz commented Feb 16, 2024

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
open and exit

EFEITO HOVER
efeito hover

ACTIVE MENU
active menu

Checklist
  • [ x ] Issue linked
  • [ x ] Build working correctly
  • [ x ] Tests created

Copy link
Contributor

@Alecell Alecell left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

O role do dvh me parece problemático, vamos ficar com ele por agora, mas vamos revisar isso no futuro!

Não existe necessidade de alterar a width do container quando alterar o translate

src/home/components/SideMenu/index.scss Outdated Show resolved Hide resolved
src/home/components/navigation/index.js Outdated Show resolved Hide resolved
src/home/index.js Outdated Show resolved Hide resolved
src/home/index.js Outdated Show resolved Hide resolved
src/home/index.js Outdated Show resolved Hide resolved
src/home/index.js Outdated Show resolved Hide resolved
src/home/index.js Outdated Show resolved Hide resolved
src/home/index.scss Show resolved Hide resolved
src/home/index.scss Outdated Show resolved Hide resolved
Copy link
Contributor

@Alecell Alecell left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seu PR trouxe muitos arquivos que não sao do seu PR, precisa ajustar

.prettierrc Outdated Show resolved Hide resolved
.storybook/main.js Outdated Show resolved Hide resolved
src/home/components/SideMenu/index.scss Outdated Show resolved Hide resolved
src/home/components/SideMenu/index.scss Show resolved Hide resolved
src/home/index.html Outdated Show resolved Hide resolved
@JonasGz JonasGz marked this pull request as draft March 4, 2024 21:03
@JonasGz JonasGz marked this pull request as ready for review March 4, 2024 23:08
Copy link
Contributor

@Alecell Alecell left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Não consegui rodar sua branch localmente, constantemente tomando erro no fonts.scss. Como vc ta conseguindo codar?

src/home/components/SideMenu/index.scss Outdated Show resolved Hide resolved
@JonasGz
Copy link
Contributor Author

JonasGz commented Mar 6, 2024

Não consegui rodar sua branch localmente, constantemente tomando erro no fonts.scss. Como vc ta conseguindo codar?

eu simplesmente retirei tudo de fonts e quando finalizei os testes eu coloquei novamente pq sei q vão atualizar e resolver.

@Alecell
Copy link
Contributor

Alecell commented Mar 10, 2024

Não consegui rodar sua branch localmente, constantemente tomando erro no fonts.scss. Como vc ta conseguindo codar?

eu simplesmente retirei tudo de fonts e quando finalizei os testes eu coloquei novamente pq sei q vão atualizar e resolver.

Entendi! beleza!

Copy link
Contributor

@Alecell Alecell left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Brabo!

@Alecell Alecell merged commit 7add13f into devhatt:main Mar 10, 2024
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
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Menu e itens
3 participants