Navegação · DiSco

Visão geral

Início

Feed

Coleção

A

Perfil

Anatomia

1

3

Início

2

Feed

4

Coleção

5

A

Perfil

1

Container

fixed bottom-0 inset-x-0 bg-[#0f0f0f] border-t border-[#1a1a1a] pb-safe z-20

2

Tab item

flex flex-col items-center gap-1 flex-1 · ícone 22×22 + label 9px · tap target 48×48

3

Estado ativo

Ícone stroke="#f5f5f5" + label text-[#f5f5f5]. Sem underline ou ponto — cor é o único diferenciador.

4

FAB de adição

bg-[#C8F53C] rounded-[14px] w-12 h-10 · ícone + stroke="#0f0f0f" · sem label · abre fluxo de Adicionar disco

5

Tab de Perfil

Avatar do usuário logado (não ícone Lucide) · w-[22px] rounded-full · label exibe display_name truncado

Itens

Início

Lucide Home. Destino: tela Home com Feed dos seguidos e destaques.

Feed

Lucide AlignLeft. Feed global de postagens recentes de toda a comunidade.

+ Adicionar

FAB central. Abre o fluxo de adição de disco. Não é uma tab de navegação — não tem rota própria nem label.

Coleção

Lucide Grid2x2. Coleção pessoal do usuário logado + Listas.

Perfil

A

Avatar do usuário logado (não ícone Lucide). Label exibe display_name truncado. Destino: Perfil, seguidores e notificações.

Badge de notificação

A

3

com contagem

A

apenas ponto

Badge com número

absolute -top-1 -right-1.5
w-4 h-4 bg-[#C8F53C] text-[#0f0f0f]
text-[9px] font-bold rounded-full
flex items-center justify-center

Badge ponto

absolute top-0 right-0
w-[9px] h-[9px] bg-[#C8F53C]
rounded-full border-[1.5px] border-[#0f0f0f]

Estados

Ativo

Início

stroke="#f5f5f5" · text-[#f5f5f5] font-semibold · sem opacity modifier

Inativo

Feed

opacity-40 no container do item · stroke="#888" · text-[#888]

Pressed

Coleção

active:opacity-60 — feedback tátil no toque

FAB pressed

active:bg-[#a8cf1e] — verde ligeiramente mais escuro no toque

Do / Don't

Início

Feed

Coleção

A

Perfil

Faça Sempre ícone + label em todas as tabs. FAB central sem label — sua forma e cor são auto-explicativas.

Evite Tabs sem label dependem de memória muscular. Usuários novos não sabem o destino de cada ícone.

FAB abre modal/sheet de adição

Não navega para uma rota fixa

Faça O FAB dispara uma ação (sheet de Adicionar disco). Não é um destino de navegação.

FAB navega para /adicionar

FAB fica ativo como tab

Evite Tratar o FAB como tab cria estado ativo no centro da nav e quebra a hierarquia visual.

Specs

Propriedade	Valor
Posição	`fixed bottom-0 inset-x-0`
Background	`#0f0f0f`
Border top	`1px solid #1a1a1a`
Padding	`py-2 px-3`
Padding bottom	`pb-safe` → `env(safe-area-inset-bottom)`
z-index	`z-20`
Ícone das tabs	Lucide · `22×22 px` · stroke 2
Label das tabs	`text-[9px] font-medium` (ativo: `font-semibold`)
Tab ativa	`stroke="#f5f5f5" text-[#f5f5f5]` · sem opacity
Tab inativa	`stroke="#888" text-[#888] opacity-40`
Avatar (Perfil)	`w-[22px] h-[22px] rounded-full`
FAB background	`#C8F53C` · pressed: `#a8cf1e`
FAB dimensões	`w-12 h-10 rounded-[14px]` (48×40px)
FAB ícone	`+` Lucide · `22×22` · `stroke="#0f0f0f"` · `strokeWidth 2.5`
Badge (notificação)	`w-4 h-4 bg-[#C8F53C] text-[#0f0f0f] rounded-full text-[9px] font-bold`