Overlay na página quando a search-bar estiver ativa

Olá, boa tarde.

Estou precisando inserir um overlay na página quando clico na search-bar. Basicamente a ideia seria replicar esse comportamento:

Tentei criar esse efeito por CSS e também através da criação de um modal, mas nenhuma fica boa. Busquei na documentação da app vtex.search algo que pudesse me oferecer essa propriedade, mas não encontrei. Sabem de alguma alternativa para essa solução ou minha única saída é desenvolver um app custom?

Olá @Amanda_Haase !

Infelizmente me parece que a alternativa mais fácil é criando um componente custom mesmo… nós temos um componente exportado pela app vtex.store-drawer (só como componente React, mas não como bloco) que faz o nosso efeito de Overlay no minicart por exemplo. Você poderia usar ele mesmo, ou criar uma versão sua. Mas de qualquer maneira teria q controlar ele através de um componente custom.

2 Likes

Oi @Amanda_Haase , adicionando mais um pouco a resposta do @victor.miranda

Adicionando aqui uma imagem de referência sobre a drawer com o add de uma div com overlay, importante citar que as classes fazem um papel bastante importante para o comportamento do overlay, com visible ou não:

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.