InícioSuporte
InícioSuporteLinks
Entrar
  1. Formação em Vibe Coding
  3. Bubble - Design e Responsividade
  5. Design e Responsividade com Bubble
Menu Retrátil

Menu Retrátil 1 - Criando a lógica de encolher/expandir o menu Retrátil

Acesso Restrito

Faça login para acessar o conteúdo desta aula.

Fazer loginVoltar para o curso
AnteriorPróxima

Copyright ©2026 - Todos os direitos reservados
Feito com ☕ e alguns bilhões de tokens de IA

Design e Responsividade com Bubble
Progresso do Módulo
0 de 132 aulas concluídas
5 Princípios Básicos de Design de Aplicativos
Grids
Wireframes
Espaçamentos
Tabelas de Cores
Tipografia - Tipos, onde achar, melhores fontes e tamanhos
Tipografia - Boas práticas e acessibilidade
Mapa mental do aplicativo
Ferramentas e extensões úteis para o design
Buscando Inspiração
O layout que vamos criar
Posicionando os grupos para montar a estrutura do dashboard
Ajustando larguras e alturas das grupos
Configurando os Estilos - cores e fontes
Menu Lateral - Cor de fundo e espaçamento
Menu Lateral - Criando os botões
Menu Lateral - Efeito de hover nos botões
Menu Lateral - Botão Sair
Navbar - Logo, Cor de fundo e espaçamento
Conteúdo - Cor de fundo e espaçamento
Conteúdo - Posicionamento dos grupos
Conteúdo - Criando os cards superiores
Conteúdo - Estilizando os cards superiores (Parte 1)
Conteúdo - Estilizando os cards superiores (Parte 2)
Conteúdo - Criando o Card do Gráfico
Conteúdo - Criando Tabela com dados
Conteúdo - Criando Tabela com dados e estilizando
Conteúdo - Efeito Hover na tabela
Conteúdo - Ajustando a Tabela
Conteúdo - Criando Tabela 2 com dados
Conteúdo - Criando Tabela 2 com dados e estilizando
Conteúdo - Criando Cards de Notificação
Conteúdo - Estilizando os cards Notificação
Menu Retrátil - 2 opções para fazer
Menu Retrátil 1 - Botões de abrir e fechar
Menu Retrátil 1 - Criando o Custom States para abrir e fechar o menu
Menu Retrátil 1 - Criando a lógica de encolher/expandir o menu Retrátil
Menu Retrátil 1 - Ação de abrir e fechar menu
Menu Retrátil 1 - Condicional para Abrir e Fechar Menu
Menu Retrátil 1 - Condicional para esconder o texto
Menu Retrátil 1 - Condicional para Retirar o Padding
Menu Retrátil 1 - Condicional para Alinhar Ícones
Menu Retrátil 1 - Efeito na Transição do menu
Menu Retrátil 1 - Condicional para Retirar o Roundness
Menu Retrátil 1 - Efeito Hover no Ícone abrir fechar
Menu Retrátil 2 - Preparando a estrutura
Menu Retrátil 2 - Ação para Abrir e Fechar Menu
Menu Retrátil 2 - Recado importante
Convertendo Navbar em Reutilizável
Convertendo Menu Lateral Esquerdo em Reutilizável
Fixando Navbar
Fixando Menu Lateral Esquerdo
Ajustando Ação e Condicionais do Menu Retratil
Esconder menu lateral e Criar Botão
Ajustando Padding do Grupo
Ação Mostrar Menu Mobile
Ajustando Botão Menu Reutilizável
Ajuste geral Menu Mobile
Ajustes de Responsividade nos Cards Superiores (PARTE 1)
Ajustes de Responsividade nos Cards Superiores (PARTE 2)
Ajustando alguns Elementos na Responsividade
Grupo Repetidor e ajustes de Responsividade nas Tabelas
Scroll Horizontal e ajustes de Responsividade nas Tabelas (parte 1)
Scroll Horizontal e ajustes de Responsividade nas Tabelas (parte 2)
Ajustes de Responsividade nos Cards Inferiores
Criando Submenu Dropdown - Preparando a Estrutura
Criando Submenu Dropdown - Criando Custom States
Criando Submenu Dropdown - Abrir e fechar o Menu
Criando Submenu Dropdown - Ajustes
Menu Lateral Direito - Preparando a Estrutura
Menu Lateral Direito - Criando Estrutura no Reutilizável
Menu Lateral Direito - Criando Conteúdo do Menu
Menu Lateral Direito - Estilizando Conteúdo do Menu
Menu Lateral Direito - Criando Conteúdo 2 do Menu
Menu Lateral Direito - Criando Conteúdo 3 do Menu
Menu Lateral Direito - Função para Navegar pelo Conteúdo
Menu Lateral Direito - Visualizar o Menu na Index
Menu Lateral Direito - Estrutura Abrir e Fechar Menu
Menu Lateral Direito - Criando Custom States - Abrir e Fechar Menu
Menu Lateral Direito - Ajustes Ícones Configuração e Notificação
Criando Tela de Formulários - Reutilizável
Criando Tela de Formulários - Visualizar na Index
Criando Tela de Formulários - Cabeçalho
Criando Tela de Formulários - Grupo Usuário
Criando Tela de Formulários - Grupo Projetos
Criando Tela de Formulários - Grupo Rede Sociais
Criando Tela de Formulários - Grupo Concluído
Criando Tela de Formulários - Navegação
Criando Tela de Formulários - Navegação - custom states para o multi-step
Criando Tela de Formulários - Navegação - animação de transição
Criando Tela de Formulários - Navegação Dashboard Páginas
Criando Dropdown - Ajustando a estrutura
Criando Dropdown - Criando Grupo Focus e Grupo Repetidor
Criando Dropdown - Criando os Option Sets
Criando Dropdown - Criando Custom States
Criando Dropdown - Criando Ação Abrir e Fechar
Criando Dropdown - Puxando Custom States e Dados Option Sets
Criando Dropdown - Ajustando Botão abrir fechar
Criando Dropdown - Estilizando
Criando Tela de Formulários - Responsividade (parte 1)
Criando Tela de Formulários - Responsividade (parte 2)
Criando Tela de Lista (Grid) (parte 1)
Criando Tela de Lista (Grid) (parte 2)
Criando Tela de Lista (Grid) - Responsividade
Criando Tela de Lista (Grid) - Visualizando na Index
Criando Tela de Login (parte 1)
Criando Tela de Login (parte 2)
Criando Tela de Cadastre-se
Criando Tela de Redefinir Senha
Navegando entre as Telas (parte 1)
Navegando entre as Telas (parte 2)
Responsividade nas Telas - Login, Cadastre-se e Redefinir Senha
Popup de Formulário
Popup de Confirmação
Importando um Ícone Personalizado do Figma
Importando um Ícone de Bibliotecas
Criando Tabbar (parte 1)
Criando Tabbar (parte 2)
Adicionando plugin Scrollbar
Modo Dark - Criando o Botão
Modo Dark - Criando os Options Sets
Modo Dark - Criando os Atributos com as Cores
Modo Dark - Criando o Custom States
Modo Dark - Criando e puxando as Propriedades no Reutilizável
Modo Dark - Puxando os Atributos nos componentes (parte 1)
Modo Dark - Puxando os Atributos nos componentes (parte 2)
Modo Dark - Puxando os Atributos nos componentes (parte 3)
Modo Dark - Puxando os Atributos nos componentes (parte 4)
Modo Dark - Ajustes
Modo Dark - Opção 2 de fazer
Finalização do Módulo
Avaliação do Módulo