Navegação da app

Os ecrãs são as páginas; a navegação é o que leva as pessoas até elas. No Keplin ela não vive dentro de nenhum ecrã: é um documento próprio da app, desenhado num editor visual e servido à volta de qualquer ecrã que esteja aberto.

E é desenhado por dispositivo: a barra de topo do computador, a gaveta do telemóvel e a barra de acções do tablet são três desenhos independentes, cada um com os seus menus.

#Abrir o editor

Na barra lateral da app, separador UI, o primeiro item chama-se Navegação. Clica e abre num separador do espaço de trabalho.

O que se vê ao centro não é um formulário: é a página da app, desenhada como vai ficar. A barra em cima, o conteúdo do ecrã em baixo (Conteúdo do ecrã), a marca à esquerda. Editas mexendo nela.

Por baixo do título estão os controlos que mandam no que estás a ver:

Controlo	O que faz
Web (1280px) / Tablet (768px) / Mobile (390px)	Escolhe o dispositivo que estás a desenhar.
Modo (só tablet e telemóvel)	A forma da navegação nesse dispositivo.
Menu inicial	Qual dos menus abre quando alguém entra na app.

#Os gestos

Gesto	O que acontece
Clique num menu	Selecciona-o (e, num contexto, mostra a barra lateral dele).
Duplo clique num menu	Abre o modal Item seleccionado, onde se edita tudo.
Arrastar um menu	Move-o de zona ou reordena-o. Só larga onde é válido.
+	Acrescenta um menu naquele sítio.
× no canto de um menu	Remove-o.
Clique na marca	Abre o modal Logo da app.

#Os tipos de menu

O botão + de cada zona mostra os tipos que aquele sítio aceita:

Tipo	O que é
Menu	Leva a um ecrã da app. É o item normal.
Submenu	Agrupa outros menus — na gaveta e nas barras laterais.
Contexto (sidebar)	Um menu que, quando escolhido, activa uma barra lateral própria com os seus filhos. É como se dividisse a app em áreas.
Separador	Uma linha divisória.
Menu do utilizador	O avatar de quem está a usar, com as suas entradas e o Sair.
Notificações	O sino, com a contagem automática de não lidas.

Nem todos os tipos servem em todos os sítios, e o editor só oferece os válidos: um contexto não pode conter outro contexto, um submenu só leva itens, o menu do utilizador só leva itens e separadores, e a gaveta do telemóvel não tem contextos (usa submenus).

#As zonas da barra

Na barra de topo, os menus arrumam-se em três zonas, e a dica no editor diz o essencial: Arrasta os menus entre as zonas da barra (esquerda / centro / direita) para criares grupos.

Zona	Uso habitual
Grupo à esquerda	A navegação principal, a seguir à marca.
Grupo ao centro	Um grupo destacado. Se ficar vazia, não ocupa espaço.
Grupo à direita	O menu do utilizador, o sino, atalhos.

Dentro da barra lateral de um contexto — e na gaveta — as zonas são duas: Grupo do topo e Fundo (esta cola-se ao fundo, para "Definições" e "Ajuda" ficarem onde se espera).

#Criar um menu

1. Escolhe o dispositivo na barra de contexto.
2. Clica no + da zona onde o queres.
3. Escolhe o tipo.
4. O menu nasce com um nome genérico e fica seleccionado — faz-lhe duplo clique para abrir o modal Item seleccionado.
5. Preenche:

Campo	O que é
Ícone	Um ícone da biblioteca ou um SVG dos assets da app.
Nome do menu	O texto que aparece. É uma frase da app — entra nas traduções.
Ecrã…	O ecrã de destino (só em Menu).
(parâmetros)	Se o ecrã de destino tem parâmetros de rota, aparece um campo por parâmetro para lhe dares um valor fixo.
Só ícone (o nome fica em tooltip)	Deixa apenas o ícone na barra.

6. Fecha com Concluído e grava com Gravar.

O botão Eliminar item, no mesmo modal, apaga o menu.

#Contextos e barras laterais

Um Contexto (sidebar) é a forma de dar a uma área da app um menu próprio: escolhes "Vendas" na barra de topo e aparece à esquerda a barra lateral com os ecrãs de vendas. Os filhos do contexto são os itens dessa barra.

No modal do contexto, a secção Sidebar deste contexto afina-a:

Campo	Opções
Comportamento	Fixa (sempre aberta) · Retráctil (botão colapsa para ícones) · Mini (ícones; expande ao passar o rato) · Mini com painel (hover abre a árvore do menu)
Largura	Entre 180 e 400 píxeis.
Ao expandir (só no modo mini)	Sobrepõe o conteúdo ou Empurra o conteúdo.
Começa colapsada (só no modo retráctil)	Como abre da primeira vez.

#O menu do utilizador

O Menu do utilizador é um item como os outros — pode estar na barra de topo, dentro de um contexto, na gaveta ou na barra compacta. Seleccioná-lo abre o seu popup, e é aí que se acrescentam entradas com o + (Menu ou Separador).

No modal ficam as opções que não são visuais:

Opção	O que faz
Mostrar o nome	O nome de quem está a usar aparece no cabeçalho do menu.
Mostrar o utilizador (login)	Também o nome de utilizador.
Opção «Sair»	Inclui a saída no fim do menu.
Texto do «Sair»	Um texto próprio; vazio usa O do sistema (traduzido).

Sem ícone, o avatar mostra as iniciais do nome — e é isso que o selector de ícone chama Sem ícone (iniciais).

#Notificações

O item Notificações é o sino: só ícone, com a pill das não lidas a actualizar-se sozinha. O clique abre as últimas notificações e o Ver mais abre o painel com todas. No modal, Notificações na dropdown decide quantas aparecem de cada vez (entre 1 e 20).

#Pills de valor

Qualquer menu (excepto separadores e o sino) pode mostrar uma pill com um número vivo — as encomendas por processar ao lado de "Encomendas", os pedidos pendentes ao lado de "Aprovações".

1. No modal do item, liga Mostrar pill com valor.
2. Escolhe a API que traz os dados (Escolher API…).
3. Em Valor, escolhe Contagem (nº de registos) ou Campo do 1º registo — neste caso, indica também o Campo.
4. Esconder com valor vazio ou zero evita a pill a dizer "0".

A pill actualiza-se em tempo real: quando os dados mudam, o número muda — sem ninguém recarregar a página.

#O logo da app

Clica na marca, à esquerda da barra, para abrir o modal Logo da app:

Campo	O que faz
Ícone ou imagem	Escolhe um ícone da biblioteca ou um ficheiro dos assets da app.
Mostrar o nome da app	O nome ao lado da marca.
Enquadramento na barra	Só para SVG: Escala, Largura da caixa, e o posicionamento arrastando a imagem.
Ajustar à caixa	Repõe escala e posição.
Sem enquadramento	Desliga o enquadramento.

O enquadramento é a resposta ao logo que "não cabe": arrastas e escalas até ficar bem na barra, e o próprio modal garante que o ficheiro SVG fica intacto — o corte é só visual e reversível. Para outros formatos, a nota explica que o enquadramento só está disponível para SVG.

#Menu inicial

Menu inicial, no canto superior direito, decide por onde a app abre. Escolhe-se um dos menus (não um ecrã solto), e é escolhido por dispositivo — o telemóvel pode abrir num painel diferente do computador.

Se um dispositivo não tiver escolha própria, herda a do seguinte (telemóvel → tablet → web); e se não houver nenhuma, a app abre no primeiro menu que leve a um ecrã.

#Um desenho por dispositivo

O Web é sempre uma barra de topo. O tablet e o telemóvel têm um selector Modo:

Modo	Como fica
Barra de topo (só tablet)	Igual ao computador: marca, menus e contextos numa barra.
Menu hambúrguer	Uma barra compacta com o botão ☰, que abre a gaveta com a árvore de menus.
Barra de acções	Uma barra no fundo, estilo aplicação móvel, com até 5 entradas — e sem gaveta.

Nos modos compactos há ainda duas filas próprias:

• O Header — até 4 acções ao lado da marca (o menu do utilizador e o sino vivem bem aqui).
• A Barra de acções — até 5 entradas no fundo, cada uma um Botão ou um Menu de acções.

Quando o limite é atingido, a plataforma diz porquê: A barra de acções já tem 5 itens (máximo). / O header leva no máximo 4 acções.

#Quem vê o quê

O editor desenha; quem decide quem vê cada menu é Definições da app ▸ Permissões, no separador Menus — por papel e por dispositivo.

A regra vale a pena saber: ao contrário dos ecrãs, um menu é visível por omissão. A porta é o ecrã, e essa já está fechada; esconder o menu serve para tirar um grupo inteiro da vista, ou tirar o sino a quem não recebe nada. Esconder um grupo leva os filhos com ele, e um item que aponte para um ecrã inacessível desaparece sozinho.

#Porque não…?

• Porque é que as minhas alterações desapareceram? Não foram gravadas. A navegação tem botão Gravar — e avisa antes de fechares um separador com alterações por gravar.
• Porque não consigo largar o menu onde quero? Aquele sítio não aceita aquele tipo. Os alvos inválidos nem acendem: um contexto dentro de um contexto, um submenu dentro de um menu de utilizador, um separador na barra de topo.
• Porque não vejo os menus no telemóvel? O telemóvel tem árvore própria e pode estar vazia. Escolhe Mobile (390px) e desenha-a.
• Porque desapareceu um menu na app publicada? Ou foi escondido em Definições ▸ Permissões ▸ Menus para aquele papel, ou aponta para um ecrã a que essa pessoa não tem acesso.
• Porque é que o logo aparece cortado? Está com enquadramento. Abre o modal e usa Ajustar à caixa, ou Sem enquadramento.
• Porque é que não consigo mudar o tipo de um menu? Não se muda. Apaga e cria com o tipo certo — é a única operação que a plataforma não te deixa fazer a meio.
• Porque é que a pill mostra sempre 0? Liga Esconder com valor vazio ou zero, ou confirma que a API escolhida devolve mesmo registos.