Início

Menu Lateral Direito - Preparando a Estrutura | Formação em Vibe Coding | ibe.IA

Formação em Vibe Coding
Bubble - Design e Responsividade
Design e Responsividade com Bubble

Menu lateral direito

Menu Lateral Direito - Preparando a Estrutura

Crie um menu lateral direito flutuante e aprenda a estruturar sua interface de forma prática e reutilizável, garantindo uma navegação eficiente e intuitiva para seus usuários.

Acesso Restrito

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

Fazer login Voltar para o curso

Anterior Pró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 Aplicativos8 min

Wireframes2 min

Espaçamentos3 min

Tabelas de Cores5 min

Tipografia - Tipos, onde achar, melhores fontes e tamanhos10 min

Tipografia - Boas práticas e acessibilidade8 min

Mapa mental do aplicativo3 min

Ferramentas e extensões úteis para o design7 min

Buscando Inspiração4 min

O layout que vamos criar4 min

Posicionando os grupos para montar a estrutura do dashboard9 min

Ajustando larguras e alturas das grupos3 min

Configurando os Estilos - cores e fontes9 min

Menu Lateral - Cor de fundo e espaçamento4 min

Menu Lateral - Criando os botões7 min

Menu Lateral - Efeito de hover nos botões9 min

Menu Lateral - Botão Sair4 min

Navbar - Logo, Cor de fundo e espaçamento10 min

Conteúdo - Cor de fundo e espaçamento2 min

Conteúdo - Posicionamento dos grupos3 min

Conteúdo - Criando os cards superiores9 min

Conteúdo - Estilizando os cards superiores (Parte 1)12 min

Conteúdo - Estilizando os cards superiores (Parte 2)10 min

Conteúdo - Criando o Card do Gráfico11 min

Conteúdo - Criando Tabela com dados8 min

Conteúdo - Criando Tabela com dados e estilizando11 min

Conteúdo - Efeito Hover na tabela3 min

Conteúdo - Ajustando a Tabela3 min

Conteúdo - Criando Tabela 2 com dados7 min

Conteúdo - Criando Tabela 2 com dados e estilizando4 min

Conteúdo - Criando Cards de Notificação5 min

Conteúdo - Estilizando os cards Notificação10 min

Menu Retrátil - 2 opções para fazer1 min

Menu Retrátil 1 - Botões de abrir e fechar2 min

Menu Retrátil 1 - Criando o Custom States para abrir e fechar o menu1 min

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

Menu Retrátil 1 - Ação de abrir e fechar menu2 min

Menu Retrátil 1 - Condicional para Abrir e Fechar Menu3 min

Menu Retrátil 1 - Condicional para esconder o texto2 min

Menu Retrátil 1 - Condicional para Retirar o Padding3 min

Menu Retrátil 1 - Condicional para Alinhar Ícones2 min

Menu Retrátil 1 - Efeito na Transição do menu1 min

Menu Retrátil 1 - Condicional para Retirar o Roundness3 min

Menu Retrátil 1 - Efeito Hover no Ícone abrir fechar2 min

Menu Retrátil 2 - Preparando a estrutura4 min

Menu Retrátil 2 - Ação para Abrir e Fechar Menu6 min

Menu Retrátil 2 - Recado importante1 min

Convertendo Navbar em Reutilizável4 min

Convertendo Menu Lateral Esquerdo em Reutilizável9 min

Fixando Navbar3 min

Fixando Menu Lateral Esquerdo2 min

Ajustando Ação e Condicionais do Menu Retratil10 min

Esconder menu lateral e Criar Botão6 min

Ajustando Padding do Grupo2 min

Ação Mostrar Menu Mobile6 min

Ajustando Botão Menu Reutilizável9 min

Ajuste geral Menu Mobile9 min

Ajustes de Responsividade nos Cards Superiores (PARTE 1)11 min

Ajustes de Responsividade nos Cards Superiores (PARTE 2)9 min

Ajustando alguns Elementos na Responsividade7 min

Grupo Repetidor e ajustes de Responsividade nas Tabelas7 min

Scroll Horizontal e ajustes de Responsividade nas Tabelas (parte 1)9 min

Scroll Horizontal e ajustes de Responsividade nas Tabelas (parte 2)3 min

Ajustes de Responsividade nos Cards Inferiores3 min

Criando Submenu Dropdown - Preparando a Estrutura4 min

Criando Submenu Dropdown - Criando Custom States1 min

Criando Submenu Dropdown - Abrir e fechar o Menu3 min

Criando Submenu Dropdown - Ajustes9 min

Menu Lateral Direito - Preparando a Estrutura2 min

Menu Lateral Direito - Criando Estrutura no Reutilizável7 min

Menu Lateral Direito - Criando Conteúdo do Menu10 min

Menu Lateral Direito - Estilizando Conteúdo do Menu7 min

Menu Lateral Direito - Criando Conteúdo 2 do Menu7 min

Menu Lateral Direito - Criando Conteúdo 3 do Menu7 min

Menu Lateral Direito - Função para Navegar pelo Conteúdo6 min

Menu Lateral Direito - Visualizar o Menu na Index6 min

Menu Lateral Direito - Estrutura Abrir e Fechar Menu3 min

Menu Lateral Direito - Criando Custom States - Abrir e Fechar Menu8 min

Menu Lateral Direito - Ajustes Ícones Configuração e Notificação3 min

Criando Tela de Formulários - Reutilizável2 min

Criando Tela de Formulários - Visualizar na Index3 min

Criando Tela de Formulários - Cabeçalho10 min

Criando Tela de Formulários - Grupo Usuário8 min

Criando Tela de Formulários - Grupo Projetos9 min

Criando Tela de Formulários - Grupo Rede Sociais4 min

Criando Tela de Formulários - Grupo Concluído4 min

Criando Tela de Formulários - Navegação9 min

Criando Tela de Formulários - Navegação - custom states para o multi-step10 min

Criando Tela de Formulários - Navegação - animação de transição3 min

Criando Tela de Formulários - Navegação Dashboard Páginas10 min

Criando Dropdown - Ajustando a estrutura2 min

Criando Dropdown - Criando Grupo Focus e Grupo Repetidor5 min

Criando Dropdown - Criando os Option Sets3 min

Criando Dropdown - Criando Custom States2 min

Criando Dropdown - Criando Ação Abrir e Fechar2 min

Criando Dropdown - Puxando Custom States e Dados Option Sets5 min

Criando Dropdown - Ajustando Botão abrir fechar2 min

Criando Dropdown - Estilizando10 min

Criando Tela de Formulários - Responsividade (parte 1)14 min

Criando Tela de Formulários - Responsividade (parte 2)9 min

Criando Tela de Lista (Grid) (parte 1)10 min

Criando Tela de Lista (Grid) (parte 2)4 min

Criando Tela de Lista (Grid) - Responsividade4 min

Criando Tela de Lista (Grid) - Visualizando na Index9 min

Criando Tela de Login (parte 1)10 min

Criando Tela de Login (parte 2)9 min

Criando Tela de Cadastre-se4 min

Criando Tela de Redefinir Senha3 min

Navegando entre as Telas (parte 1)10 min

Navegando entre as Telas (parte 2)2 min

Responsividade nas Telas - Login, Cadastre-se e Redefinir Senha5 min

Popup de Formulário10 min

Popup de Confirmação11 min

Importando um Ícone Personalizado do Figma3 min

Importando um Ícone de Bibliotecas4 min

Criando Tabbar (parte 1)11 min

Criando Tabbar (parte 2)6 min

Adicionando plugin Scrollbar4 min

Modo Dark - Criando o Botão5 min

Modo Dark - Criando os Options Sets6 min

Modo Dark - Criando os Atributos com as Cores5 min

Modo Dark - Criando o Custom States1 min

Modo Dark - Criando e puxando as Propriedades no Reutilizável6 min

Modo Dark - Puxando os Atributos nos componentes (parte 1)12 min

Modo Dark - Puxando os Atributos nos componentes (parte 2)10 min

Modo Dark - Puxando os Atributos nos componentes (parte 3)8 min

Modo Dark - Puxando os Atributos nos componentes (parte 4)7 min

Modo Dark - Ajustes7 min

Modo Dark - Opção 2 de fazer5 min

Finalização do Módulo1 min

Avaliação do Módulo