From 33817d55879fc2ec6c20d4e61b4e559cf1fb87f3 Mon Sep 17 00:00:00 2001
From: Rodrigo Castro <tec.rodrigocastro@gmail.com>
Date: Wed, 4 Nov 2026 22:54:28 -0300
Subject: [PATCH] =?UTF-8?q?Adiciona=20layout=20base=20do=20painel:=20menu?=
 =?UTF-8?q?=20lateral,=20barra=20superior=20e=20seletor=20de=20edi=C3=A7?=
 =?UTF-8?q?=C3=A3o=20(#52)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Menu lateral de 264 px com seções e item ativo, barra superior com seletor de
edição, busca, ver site, notificações e menu do usuário, gaveta em telas
estreitas, guarda de rota (login com retorno e 403 por papel), página de erro
global (404, 403, 500) e docs/LAYOUT.md. O painel passa a rodar como SPA.
---
 front-admin/CLAUDE.md                         |   7 +-
 .../app/application/locales/pt-br/index.ts    |   2 +
 .../shared/components/layout/AppTopbar.vue    |  41 ++++++
 .../components/layout/EditionSwitcher.vue     |  48 ++++++
 .../shared/components/layout/MenuPopover.vue  |  59 ++++++++
 .../components/layout/MobileMenu.test.ts      |  20 +++
 .../shared/components/layout/MobileMenu.vue   |  32 ++++
 .../shared/components/layout/SideNav.test.ts  |  62 ++++++++
 .../shared/components/layout/SideNav.vue      |  74 ++++++++++
 .../shared/components/layout/Topbar.test.ts   |  94 ++++++++++++
 .../shared/components/layout/UserMenu.vue     |  32 ++++
 .../shared/composables/useEdition.test.ts     |  60 +++++++-
 .../shared/composables/useEdition.ts          |  76 +++++++++-
 .../shared/composables/useLogout.ts           |   2 +
 .../shared/composables/usePermissions.test.ts |  39 +++++
 .../shared/composables/usePermissions.ts      |  22 +++
 .../application/shared/layout/access.test.ts  |  39 +++++
 .../app/application/shared/layout/access.ts   |  33 +++++
 .../shared/layout/navigation.test.ts          |  41 ++++++
 .../application/shared/layout/navigation.ts   |  62 ++++++++
 front-admin/app/assets/css/main.css           |  12 ++
 front-admin/app/error.test.ts                 |  26 ++++
 front-admin/app/error.vue                     |  33 +++++
 front-admin/app/layouts/blank.vue             |   6 +
 front-admin/app/layouts/default.vue           |  25 +++-
 front-admin/app/middleware/auth.global.ts     |  37 +++++
 .../app/modules/shell/locales/pt-br/index.ts  |  62 ++++++++
 .../modules/shell/services/editionService.ts  |  21 +++
 front-admin/app/modules/shell/types/index.ts  |   2 +
 front-admin/app/pages/_dev/componentes.vue    |   2 +
 front-admin/app/pages/index.vue               |  27 +---
 front-admin/app/pages/login.vue               |   2 +
 front-admin/app/stores/editionStore.ts        |  29 +++-
 front-admin/docs/LAYOUT.md                    |  37 +++++
 front-admin/e2e/login.spec.ts                 |   2 +-
 front-admin/e2e/shell.spec.ts                 | 137 ++++++++++++++++++
 front-admin/nuxt.config.ts                    |   4 +
 37 files changed, 1269 insertions(+), 40 deletions(-)
 create mode 100644 front-admin/app/application/shared/components/layout/AppTopbar.vue
 create mode 100644 front-admin/app/application/shared/components/layout/EditionSwitcher.vue
 create mode 100644 front-admin/app/application/shared/components/layout/MenuPopover.vue
 create mode 100644 front-admin/app/application/shared/components/layout/MobileMenu.test.ts
 create mode 100644 front-admin/app/application/shared/components/layout/MobileMenu.vue
 create mode 100644 front-admin/app/application/shared/components/layout/SideNav.test.ts
 create mode 100644 front-admin/app/application/shared/components/layout/SideNav.vue
 create mode 100644 front-admin/app/application/shared/components/layout/Topbar.test.ts
 create mode 100644 front-admin/app/application/shared/components/layout/UserMenu.vue
 create mode 100644 front-admin/app/application/shared/composables/usePermissions.test.ts
 create mode 100644 front-admin/app/application/shared/composables/usePermissions.ts
 create mode 100644 front-admin/app/application/shared/layout/access.test.ts
 create mode 100644 front-admin/app/application/shared/layout/access.ts
 create mode 100644 front-admin/app/application/shared/layout/navigation.test.ts
 create mode 100644 front-admin/app/application/shared/layout/navigation.ts
 create mode 100644 front-admin/app/error.test.ts
 create mode 100644 front-admin/app/error.vue
 create mode 100644 front-admin/app/layouts/blank.vue
 create mode 100644 front-admin/app/middleware/auth.global.ts
 create mode 100644 front-admin/app/modules/shell/locales/pt-br/index.ts
 create mode 100644 front-admin/app/modules/shell/services/editionService.ts
 create mode 100644 front-admin/app/modules/shell/types/index.ts
 create mode 100644 front-admin/docs/LAYOUT.md
 create mode 100644 front-admin/e2e/shell.spec.ts

diff --git a/front-admin/CLAUDE.md b/front-admin/CLAUDE.md
index 952abc3..46e7436 100644
--- a/front-admin/CLAUDE.md
+++ b/front-admin/CLAUDE.md
@@ -8,6 +8,8 @@ Design/protótipo das telas: [claude.ai/artifact/3B7ZWqjBQPDFZ5vhGgNs4N](https:/
 
 Kit de UI do tema Sertão (componentes `Ph*`, tokens, acessibilidade): [`docs/UI-KIT.md`](docs/UI-KIT.md). Use-o antes de criar markup próprio.
 
+Layout do painel (menu, barra superior, papéis, guarda de rota, erro global): [`docs/LAYOUT.md`](docs/LAYOUT.md).
+
 Full layer rules live in [`docs/ARCHITECTURE.md`](docs/ARCHITECTURE.md) — read that first, it's the actual convention document, not a summary. `.claude/rules/` covers what's specific to this being a template (which module is the reference, why `HttpClient` is shaped the way it is, the two different reasons something is "shared").
 
 `app/modules/login/` is the reference module — a complete, working example of every layer, with tests for each. Imitate its shape when creating a new module.
@@ -85,12 +87,11 @@ Tokens oficiais em `../docs/design/tema-sertao-tokens.png`, aplicados em `app/as
 - **Tipos gerados do contrato**: `npm run api:gen` lê `http://localhost:8000/docs/api.json` (backend rodando) e escreve `app/infrastructure/http/api-types.d.ts`, commitado — mudar o contrato da API sem rodar `api:gen` de novo quebra o typecheck do front. Ver `app/application/shared/services/pingService.ts` como referência de serviço tipado a partir de `operations['<nome>']`.
 - **401 em requisição autenticada** chama o handler registrado por `httpClient.setUnauthorizedHandler()` — hoje só `app/plugins/auth.client.ts` registra (limpa `authStore`, navega pro `/login`). Um 401 sem token (ex.: login errado) não dispara isso — `HttpClient` só decide que a sessão expirou quando *tinha* token.
 - **Token Bearer, não cookie httpOnly** — decisão registrada em `docs/adr/0005-token-bearer-no-client.md` (o app mobile também consome a mesma API com o mesmo token).
-- `useEdition()` (`app/application/shared/composables/useEdition.ts`) guarda a edição ativa — hoje só em memória, sem API por trás; liga no módulo Community quando ele existir.
+- `useEdition()` (`app/application/shared/composables/useEdition.ts`) guarda a edição ativa (store `edition`), a lista de edições da pessoa e o papel dela (`load`, `select`, `role`). Consome `GET /editions` (ainda não existe no backend; sai do OpenAPI/`api:gen` quando o módulo Community expuser). Ver `docs/LAYOUT.md`.
 
 ## Roadmap (not built yet)
 
 - No generator/skill scaffolding a new module — creating one is by hand, following `login`'s shape and `docs/ARCHITECTURE.md`.
 - `register` (the natural second consumer of `useAuthSubmit`, alongside `login`) isn't built.
-- No navigation chrome (sidebar/navbar) yet.
 - `backend`'s Sanctum-shaped `/auth/login`/`/auth/logout` endpoints don't exist yet — needed for this app to talk to a real backend instead of just having the client-side shape ready.
-- `useEdition()` não tem fonte de dados real (ver acima).
+- `GET /editions` não existe no backend: sem ele o menu mostra só a Visão geral (ver `docs/LAYOUT.md`).
diff --git a/front-admin/app/application/locales/pt-br/index.ts b/front-admin/app/application/locales/pt-br/index.ts
index f09b385..1c2d763 100644
--- a/front-admin/app/application/locales/pt-br/index.ts
+++ b/front-admin/app/application/locales/pt-br/index.ts
@@ -1,9 +1,11 @@
 import login from '../../../modules/login/locales/pt-br'
 import ui from './ui'
+import shell from '../../../modules/shell/locales/pt-br'
 
 // Every module's locale is registered here — see docs/ARCHITECTURE.md,
 // "Registro obrigatório". Add one import + one key per new module.
 export default {
   login,
+  shell,
   ui,
 }
diff --git a/front-admin/app/application/shared/components/layout/AppTopbar.vue b/front-admin/app/application/shared/components/layout/AppTopbar.vue
new file mode 100644
index 0000000..491c0a8
--- /dev/null
+++ b/front-admin/app/application/shared/components/layout/AppTopbar.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { Bell, Menu, Search } from '@lucide/vue'
+import { useId } from 'vue'
+import { useEdition } from '@/application/shared/composables/useEdition'
+import locale from '@/modules/shell/locales/pt-br'
+
+const emit = defineEmits<{ 'open-menu': [] }>()
+
+const { current } = useEdition()
+const searchId = `ph-${useId()}-search`
+</script>
+
+<template>
+  <header class="flex flex-wrap items-center gap-3 border-b border-base-300 bg-(--ph-bg) px-4 py-3.5 lg:gap-4 lg:px-10">
+    <button type="button" class="ph-topbtn lg:hidden" :aria-label="locale.openMenu" @click="emit('open-menu')">
+      <Menu class="size-5" :stroke-width="1.75" aria-hidden="true" />
+    </button>
+
+    <EditionSwitcher />
+
+    <form role="search" class="relative order-last w-full flex-[1_1_320px] lg:order-none lg:max-w-[520px]" @submit.prevent>
+      <Search class="pointer-events-none absolute left-3.5 top-3 size-5 text-(--ph-ink-3)" :stroke-width="1.75" aria-hidden="true" />
+      <label :for="searchId" class="sr-only">{{ locale.search }}</label>
+      <input :id="searchId" type="search" class="input w-full pl-10" :placeholder="locale.searchPlaceholder">
+    </form>
+
+    <div class="ml-auto flex items-center gap-3">
+      <a
+        v-if="current?.siteUrl"
+        :href="current.siteUrl"
+        class="ph-topbtn hidden px-4 sm:inline-flex"
+        target="_blank"
+        rel="noopener noreferrer"
+      >{{ locale.viewSite }}</a>
+      <button type="button" class="ph-topbtn" :aria-label="locale.notifications">
+        <Bell class="size-5" :stroke-width="1.75" aria-hidden="true" />
+      </button>
+      <UserMenu />
+    </div>
+  </header>
+</template>
diff --git a/front-admin/app/application/shared/components/layout/EditionSwitcher.vue b/front-admin/app/application/shared/components/layout/EditionSwitcher.vue
new file mode 100644
index 0000000..7f7f81e
--- /dev/null
+++ b/front-admin/app/application/shared/components/layout/EditionSwitcher.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { Check, ChevronDown } from '@lucide/vue'
+import { useEdition } from '@/application/shared/composables/useEdition'
+import locale from '@/modules/shell/locales/pt-br'
+
+const { editions, current, status, select, load } = useEdition()
+
+async function choose(id: number, close: () => void) {
+  close()
+  await select(id)
+}
+</script>
+
+<template>
+  <MenuPopover :label="locale.switchEdition" align="start">
+    <template #trigger="{ open }">
+      <span class="flex size-7 items-center justify-center rounded-lg bg-(--ph-brand) text-xs font-semibold text-(--ph-on-brand)" aria-hidden="true">{{ current?.yearBadge ?? '–' }}</span>
+      <span class="flex flex-col text-left leading-tight">
+        <span class="text-sm font-semibold">{{ current?.name ?? locale.noEdition }}</span>
+        <span class="text-xs font-normal text-(--ph-ink-3)">{{ current ? `${current.city} · ${current.state}` : '' }}</span>
+      </span>
+      <ChevronDown class="size-4 transition-transform" :class="{ 'rotate-180': open }" aria-hidden="true" />
+    </template>
+    <template #default="{ close }">
+      <p v-if="status === 'error'" role="alert" class="p-2 text-sm">
+        {{ locale.editionsError }}
+        <button type="button" class="link" @click="load()">{{ locale.retry }}</button>
+      </p>
+      <p v-else-if="editions.length === 0" class="p-2 text-sm text-(--ph-ink-2)">{{ locale.noEditionHint }}</p>
+      <ul v-else :aria-label="locale.editionList" class="flex flex-col gap-0.5">
+        <li v-for="edition in editions" :key="edition.id">
+          <button
+            type="button"
+            class="flex min-h-11 w-full items-center gap-3 rounded-lg px-3 text-left text-sm hover:bg-base-200"
+            :aria-current="edition.id === current?.id ? 'true' : undefined"
+            @click="choose(edition.id, close)"
+          >
+            <span class="flex flex-col leading-tight">
+              <span class="font-medium">{{ edition.name }}</span>
+              <span class="text-xs text-(--ph-ink-3)">{{ edition.city }} · {{ edition.state }}</span>
+            </span>
+            <Check v-if="edition.id === current?.id" class="ml-auto size-4" aria-hidden="true" />
+          </button>
+        </li>
+      </ul>
+    </template>
+  </MenuPopover>
+</template>
diff --git a/front-admin/app/application/shared/components/layout/MenuPopover.vue b/front-admin/app/application/shared/components/layout/MenuPopover.vue
new file mode 100644
index 0000000..00353a3
--- /dev/null
+++ b/front-admin/app/application/shared/components/layout/MenuPopover.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { onBeforeUnmount, ref, useId, watch } from 'vue'
+
+defineProps<{ label: string; align?: 'start' | 'end' }>()
+
+const open = ref(false)
+const root = ref<HTMLElement | null>(null)
+const trigger = ref<HTMLButtonElement | null>(null)
+const panelId = `ph-${useId()}-panel`
+
+function close(returnFocus = true) {
+  open.value = false
+  if (returnFocus) trigger.value?.focus()
+}
+
+function onDocumentClick(event: MouseEvent) {
+  if (root.value && !root.value.contains(event.target as Node)) close(false)
+}
+
+function onKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape' && open.value) {
+    event.stopPropagation()
+    close()
+  }
+}
+
+watch(open, (value) => {
+  if (value) document.addEventListener('click', onDocumentClick)
+  else document.removeEventListener('click', onDocumentClick)
+})
+onBeforeUnmount(() => document.removeEventListener('click', onDocumentClick))
+
+defineExpose({ close })
+</script>
+
+<template>
+  <div ref="root" class="relative" @keydown="onKeydown">
+    <button
+      ref="trigger"
+      type="button"
+      class="ph-topbtn"
+      :aria-label="label"
+      :aria-expanded="open"
+      :aria-controls="panelId"
+      aria-haspopup="true"
+      @click="open = !open"
+    >
+      <slot name="trigger" :open="open" />
+    </button>
+    <div
+      v-show="open"
+      :id="panelId"
+      class="absolute top-full z-40 mt-2 min-w-64 rounded-box border border-base-300 bg-base-100 p-2 shadow-lg"
+      :class="align === 'end' ? 'right-0' : 'left-0'"
+    >
+      <slot :close="close" />
+    </div>
+  </div>
+</template>
diff --git a/front-admin/app/application/shared/components/layout/MobileMenu.test.ts b/front-admin/app/application/shared/components/layout/MobileMenu.test.ts
new file mode 100644
index 0000000..4823631
--- /dev/null
+++ b/front-admin/app/application/shared/components/layout/MobileMenu.test.ts
@@ -0,0 +1,20 @@
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { describe, expect, it } from 'vitest'
+import MobileMenu from './MobileMenu.vue'
+
+describe('MobileMenu', () => {
+  it('abre e fecha com v-model e tem botão de fechar nomeado', async () => {
+    const wrapper = await mountSuspended(MobileMenu, { props: { modelValue: false } })
+    const dialog = wrapper.find('dialog')
+    expect((dialog.element as HTMLDialogElement).open).toBe(false)
+    await wrapper.setProps({ modelValue: true })
+    expect((dialog.element as HTMLDialogElement).open).toBe(true)
+    await wrapper.find('button[aria-label="Fechar menu"]').trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([false])
+  })
+
+  it('só aparece em telas estreitas', async () => {
+    const wrapper = await mountSuspended(MobileMenu, { props: { modelValue: false } })
+    expect(wrapper.find('dialog').classes()).toContain('lg:hidden')
+  })
+})
diff --git a/front-admin/app/application/shared/components/layout/MobileMenu.vue b/front-admin/app/application/shared/components/layout/MobileMenu.vue
new file mode 100644
index 0000000..3cf13b7
--- /dev/null
+++ b/front-admin/app/application/shared/components/layout/MobileMenu.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { X } from '@lucide/vue'
+import { useDialog } from '@/application/shared/composables/useDialog'
+import locale from '@/modules/shell/locales/pt-br'
+
+const open = defineModel<boolean>({ default: false })
+const dialog = ref<HTMLDialogElement | null>(null)
+useDialog(dialog, open)
+</script>
+
+<template>
+  <dialog
+    ref="dialog"
+    class="modal modal-start lg:hidden"
+    :aria-label="locale.mainNav"
+    @close="open = false"
+    @click.self="open = false"
+  >
+    <div class="modal-box relative h-full max-h-none w-[min(18rem,85vw)] max-w-none rounded-none p-0" style="background: var(--ph-ink)">
+      <button
+        type="button"
+        class="btn btn-ghost btn-square absolute right-2 top-2 z-10 text-(--ph-side-text)"
+        :aria-label="locale.closeMenu"
+        @click="open = false"
+      >
+        <X class="size-5" aria-hidden="true" />
+      </button>
+      <SideNav @navigate="open = false" />
+    </div>
+  </dialog>
+</template>
diff --git a/front-admin/app/application/shared/components/layout/SideNav.test.ts b/front-admin/app/application/shared/components/layout/SideNav.test.ts
new file mode 100644
index 0000000..1a1818f
--- /dev/null
+++ b/front-admin/app/application/shared/components/layout/SideNav.test.ts
@@ -0,0 +1,62 @@
+import { mountSuspended, mockNuxtImport } from '@nuxt/test-utils/runtime'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import editionService from '@/modules/shell/services/editionService'
+import { useEdition } from '@/application/shared/composables/useEdition'
+import SideNav from './SideNav.vue'
+
+const { path } = vi.hoisted(() => ({ path: { value: '/' } }))
+mockNuxtImport('useRoute', () => () => ({ path: path.value }))
+
+async function asRole(role: string) {
+  vi.spyOn(editionService, 'list').mockResolvedValue({
+    data: [{ id: 1, slug: 'ed-1', name: 'PHPeste 2027', city: 'João Pessoa', state: 'PB', year: 2027, site_url: null, role }],
+  })
+  await useEdition().load()
+}
+
+beforeEach(() => {
+  vi.restoreAllMocks()
+  path.value = '/'
+  useEdition().reset()
+})
+
+describe('SideNav', () => {
+  it('organizador vê as 5 seções e os 17 itens, num <nav> nomeado', async () => {
+    await asRole('organizador')
+    const wrapper = await mountSuspended(SideNav)
+    expect(wrapper.find('nav').attributes('aria-label')).toBe('Principal')
+    expect(wrapper.findAll('nav h2').map((h) => h.text())).toEqual(['Edição', 'Conteúdo', 'Vendas', 'Organização', 'Sistema'])
+    expect(wrapper.findAll('nav a')).toHaveLength(17)
+  })
+
+  it('esconde o que o papel não permite (e seções vazias)', async () => {
+    await asRole('financeiro')
+    const wrapper = await mountSuspended(SideNav)
+    const labels = wrapper.findAll('nav a').map((a) => a.text())
+    expect(labels).toEqual(['Visão geral', 'Ingressos', 'Pedidos', 'Pagamentos', 'Finanças'])
+    expect(wrapper.text()).not.toContain('Configurar CFP')
+    expect(wrapper.findAll('nav h2').map((h) => h.text())).toEqual(['Edição', 'Vendas', 'Organização'])
+  })
+
+  it('marca só o item ativo com aria-current, o mais específico', async () => {
+    await asRole('organizador')
+    path.value = '/cfp/avaliacao'
+    const wrapper = await mountSuspended(SideNav)
+    const current = wrapper.findAll('[aria-current="page"]')
+    expect(current).toHaveLength(1)
+    expect(current[0]!.text()).toBe('Avaliar propostas')
+  })
+
+  it('mostra a edição ativa no rodapé', async () => {
+    await asRole('organizador')
+    const wrapper = await mountSuspended(SideNav)
+    expect(wrapper.text()).toContain('PHPeste 2027 · João Pessoa')
+  })
+
+  it('avisa a gaveta para fechar ao navegar', async () => {
+    await asRole('organizador')
+    const wrapper = await mountSuspended(SideNav)
+    await wrapper.find('nav a').trigger('click')
+    expect(wrapper.emitted('navigate')).toHaveLength(1)
+  })
+})
diff --git a/front-admin/app/application/shared/components/layout/SideNav.vue b/front-admin/app/application/shared/components/layout/SideNav.vue
new file mode 100644
index 0000000..0c05e16
--- /dev/null
+++ b/front-admin/app/application/shared/components/layout/SideNav.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { NAV_GROUPS, type NavItem } from '@/application/shared/layout/navigation'
+import { usePermissions } from '@/application/shared/composables/usePermissions'
+import { useEdition } from '@/application/shared/composables/useEdition'
+import locale from '@/modules/shell/locales/pt-br'
+
+const emit = defineEmits<{ navigate: [] }>()
+
+const route = useRoute()
+const { visibleItems } = usePermissions()
+const { current } = useEdition()
+
+const groups = computed(() =>
+  NAV_GROUPS.map((group) => ({ group, items: visibleItems.value.filter((i) => i.group === group) })).filter((g) => g.items.length > 0),
+)
+
+// O item mais específico vence: /cfp/avaliacao não acende "Configurar CFP".
+function isActive(item: NavItem): boolean {
+  const path = route.path.replace(/\/+$/, '') || '/'
+  if (item.to === '/') return path === '/'
+  if (!(path === item.to || path.startsWith(`${item.to}/`))) return false
+  return !visibleItems.value.some((o) => o.to.length > item.to.length && (path === o.to || path.startsWith(`${o.to}/`)))
+}
+</script>
+
+<template>
+  <div class="ph-side flex min-h-full w-full flex-col">
+    <div class="flex items-center gap-3 px-5 pb-2 pt-6">
+      <div class="flex size-10 items-center justify-center rounded-[10px] bg-(--ph-accent) text-[15px] font-semibold text-(--ph-ink)" aria-hidden="true">PH</div>
+      <div class="flex flex-col leading-tight">
+        <span class="text-[17px] font-semibold text-(--ph-on-brand)">{{ locale.brandName }}</span>
+        <span class="text-xs text-(--ph-side-muted)">{{ locale.brandSubtitle }}</span>
+      </div>
+    </div>
+
+    <nav :aria-label="locale.mainNav" class="flex-1 px-3">
+      <template v-for="g in groups" :key="g.group">
+        <h2 class="mx-3.5 mb-1.5 mt-5 text-[11px] font-medium uppercase tracking-[.09em] text-(--ph-side-muted)">{{ locale.groups[g.group] }}</h2>
+        <ul class="flex flex-col gap-0.5">
+          <li v-for="item in g.items" :key="item.key">
+            <NuxtLink
+              :to="item.to"
+              class="ph-nav"
+              :class="{ 'is-active': isActive(item) }"
+              :aria-current="isActive(item) ? 'page' : undefined"
+              @click="emit('navigate')"
+            >
+              <component :is="item.icon" class="size-5 shrink-0" :stroke-width="1.75" aria-hidden="true" />
+              {{ locale.nav[item.key] }}
+            </NuxtLink>
+          </li>
+        </ul>
+      </template>
+    </nav>
+
+    <p class="px-5 pb-4 pt-5 text-xs text-(--ph-side-muted)">
+      {{ locale.activeEdition }}<br>
+      <span class="font-medium text-(--ph-side-text)">{{ current ? `${current.name} · ${current.city}` : locale.noEdition }}</span>
+    </p>
+    <PhStripe />
+  </div>
+</template>
+
+<style scoped>
+.ph-side { background: var(--ph-ink); color: var(--ph-side-text); }
+.ph-nav {
+  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px;
+  border-radius: 10px; color: var(--ph-side-text); text-decoration: none; font-size: 14px; font-weight: 500;
+}
+.ph-nav:hover { background: color-mix(in srgb, var(--ph-side-text) 10%, transparent); color: var(--ph-on-brand); }
+.ph-nav.is-active { background: var(--ph-accent); color: var(--ph-ink); }
+.ph-nav:focus-visible { outline-color: var(--ph-accent); }
+</style>
diff --git a/front-admin/app/application/shared/components/layout/Topbar.test.ts b/front-admin/app/application/shared/components/layout/Topbar.test.ts
new file mode 100644
index 0000000..b9e62d5
--- /dev/null
+++ b/front-admin/app/application/shared/components/layout/Topbar.test.ts
@@ -0,0 +1,94 @@
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import editionService from '@/modules/shell/services/editionService'
+import { useAuthStore } from '@/stores/authStore'
+import { useEdition } from '@/application/shared/composables/useEdition'
+import AppTopbar from './AppTopbar.vue'
+import EditionSwitcher from './EditionSwitcher.vue'
+import UserMenu from './UserMenu.vue'
+
+const editions = [
+  { id: 1, slug: 'ed-1', name: 'PHPeste 2027', city: 'João Pessoa', state: 'PB', year: 2027, site_url: 'https://phpeste.dev', role: 'organizador' },
+  { id: 2, slug: 'ed-2', name: 'PHPeste 2026', city: 'Recife', state: 'PE', year: 2026, site_url: null, role: 'financeiro' },
+]
+
+beforeEach(async () => {
+  vi.restoreAllMocks()
+  useEdition().reset()
+  document.cookie = 'ph_edition=; Max-Age=0; path=/'
+  vi.spyOn(editionService, 'list').mockResolvedValue({ data: editions })
+  await useEdition().load()
+  useAuthStore().setSession({ id: 1, name: 'Nome Sobrenome', email: 'n@s.dev', avatarUrl: null }, 't')
+})
+
+describe('AppTopbar', () => {
+  it('tem busca com rótulo, link do site, notificações e menu do usuário', async () => {
+    const wrapper = await mountSuspended(AppTopbar)
+    const input = wrapper.find('input[type="search"]')
+    expect(wrapper.find(`label[for="${input.attributes('id')}"]`).text()).toBe('Buscar')
+    expect(wrapper.find('form').attributes('role')).toBe('search')
+    const link = wrapper.find('a[href="https://phpeste.dev"]')
+    expect(link.text()).toBe('Ver site da edição')
+    expect(link.attributes('rel')).toContain('noopener')
+    expect(wrapper.find('button[aria-label="Notificações"]').exists()).toBe(true)
+    expect(wrapper.find('button[aria-label="Menu do usuário"]').exists()).toBe(true)
+  })
+
+  it('o botão do menu (telas estreitas) avisa o layout', async () => {
+    const wrapper = await mountSuspended(AppTopbar)
+    await wrapper.find('button[aria-label="Abrir menu"]').trigger('click')
+    expect(wrapper.emitted('open-menu')).toHaveLength(1)
+  })
+
+  it('esconde "Ver site" quando a edição não tem site', async () => {
+    await useEdition().select(2)
+    const wrapper = await mountSuspended(AppTopbar)
+    expect(wrapper.text()).not.toContain('Ver site da edição')
+  })
+})
+
+describe('EditionSwitcher', () => {
+  it('mostra a edição atual e lista as outras ao abrir', async () => {
+    const wrapper = await mountSuspended(EditionSwitcher)
+    const trigger = wrapper.find('button[aria-label="Trocar de edição"]')
+    expect(trigger.attributes('aria-expanded')).toBe('false')
+    expect(trigger.text()).toContain('PHPeste 2027')
+    await trigger.trigger('click')
+    expect(trigger.attributes('aria-expanded')).toBe('true')
+    expect(wrapper.findAll('ul button')).toHaveLength(2)
+    expect(wrapper.find('[aria-current="true"]').text()).toContain('PHPeste 2027')
+  })
+
+  it('escolher outra edição troca a atual', async () => {
+    const wrapper = await mountSuspended(EditionSwitcher)
+    await wrapper.find('button[aria-label="Trocar de edição"]').trigger('click')
+    await wrapper.findAll('ul button')[1]!.trigger('click')
+    await vi.waitFor(() => expect(useEdition().current.value?.id).toBe(2))
+  })
+
+  it('Esc fecha o menu', async () => {
+    const wrapper = await mountSuspended(EditionSwitcher)
+    const trigger = wrapper.find('button[aria-label="Trocar de edição"]')
+    await trigger.trigger('click')
+    await wrapper.find('div').trigger('keydown', { key: 'Escape' })
+    expect(trigger.attributes('aria-expanded')).toBe('false')
+  })
+
+  it('sem edição mostra o aviso', async () => {
+    useEdition().reset()
+    const wrapper = await mountSuspended(EditionSwitcher)
+    await wrapper.find('button[aria-label="Trocar de edição"]').trigger('click')
+    expect(wrapper.text()).toContain('Você ainda não participa de nenhuma edição.')
+  })
+})
+
+describe('UserMenu', () => {
+  it('mostra iniciais, nome e papel, e oferece sair', async () => {
+    const wrapper = await mountSuspended(UserMenu)
+    expect(wrapper.text()).toContain('NS')
+    expect(wrapper.text()).toContain('Nome Sobrenome')
+    expect(wrapper.text()).toContain('Organizador')
+    await wrapper.find('button[aria-label="Menu do usuário"]').trigger('click')
+    expect(wrapper.text()).toContain('Sair')
+  })
+})
diff --git a/front-admin/app/application/shared/components/layout/UserMenu.vue b/front-admin/app/application/shared/components/layout/UserMenu.vue
new file mode 100644
index 0000000..f7b0238
--- /dev/null
+++ b/front-admin/app/application/shared/components/layout/UserMenu.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { LogOut } from '@lucide/vue'
+import { useAuthStore } from '@/stores/authStore'
+import { useEdition } from '@/application/shared/composables/useEdition'
+import { useLogout } from '@/application/shared/composables/useLogout'
+import locale from '@/modules/shell/locales/pt-br'
+
+const auth = useAuthStore()
+const { role } = useEdition()
+const { logout } = useLogout()
+
+const initials = computed(() =>
+  (auth.user?.name ?? '').split(/\s+/).filter(Boolean).slice(0, 2).map((p) => p[0]!.toUpperCase()).join(''),
+)
+</script>
+
+<template>
+  <MenuPopover :label="locale.userMenu" align="end">
+    <template #trigger>
+      <span class="flex size-8 items-center justify-center rounded-full bg-(--ph-accent) text-xs font-semibold text-(--ph-ink)" aria-hidden="true">{{ initials }}</span>
+      <span class="hidden flex-col text-left leading-tight sm:flex">
+        <span class="text-[13px] font-medium">{{ auth.user?.name }}</span>
+        <span class="text-[11px] font-normal text-(--ph-ink-3)">{{ role ? locale.roles[role] : '' }}</span>
+      </span>
+    </template>
+    <p class="px-3 py-2 text-xs text-(--ph-ink-2)">{{ auth.user?.email }}</p>
+    <button type="button" class="flex min-h-11 w-full items-center gap-3 rounded-lg px-3 text-left text-sm hover:bg-base-200" @click="logout">
+      <LogOut class="size-4" aria-hidden="true" />
+      {{ locale.logout }}
+    </button>
+  </MenuPopover>
+</template>
diff --git a/front-admin/app/application/shared/composables/useEdition.test.ts b/front-admin/app/application/shared/composables/useEdition.test.ts
index 3bc4ea4..82e5e80 100644
--- a/front-admin/app/application/shared/composables/useEdition.test.ts
+++ b/front-admin/app/application/shared/composables/useEdition.test.ts
@@ -1,16 +1,21 @@
-import { createPinia, setActivePinia } from 'pinia'
-import { beforeEach, describe, expect, it } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import editionService from '@/modules/shell/services/editionService'
 import { useEdition } from './useEdition'
 
+const payload = [
+  { id: 1, slug: 'phpeste-2027', name: 'PHPeste 2027', city: 'João Pessoa', state: 'PB', year: 2027, site_url: 'https://phpeste.dev', role: 'organizador' },
+  { id: 2, slug: 'phpeste-2026', name: 'PHPeste 2026', city: 'Recife', state: 'PE', year: 2026, site_url: null, role: 'financeiro' },
+  { id: 3, slug: 'x', name: 'Papel inválido', city: 'X', state: 'XX', year: 2025, site_url: null, role: 'hacker' },
+]
+
 beforeEach(() => {
-  setActivePinia(createPinia())
+  vi.restoreAllMocks()
+  useEdition().clear()
 })
 
 describe('useEdition', () => {
   it('começa sem edição atual', () => {
-    const { current } = useEdition()
-
-    expect(current.value).toBeNull()
+    expect(useEdition().current.value).toBeNull()
   })
 
   it('guarda e limpa a edição atual', () => {
@@ -22,4 +27,47 @@ describe('useEdition', () => {
     clear()
     expect(current.value).toBeNull()
   })
+
+  it('carrega, traduz e ignora papéis desconhecidos', async () => {
+    vi.spyOn(editionService, 'list').mockResolvedValue({ data: payload })
+    const edition = useEdition()
+    await edition.load()
+    expect(edition.status.value).toBe('ready')
+    expect(edition.editions.value.map((e) => e.id)).toEqual([1, 2])
+    expect(edition.current.value?.yearBadge).toBe('27')
+    expect(edition.role.value).toBe('organizador')
+  })
+
+  it('troca de edição, muda o papel e recarrega os dados', async () => {
+    vi.spyOn(editionService, 'list').mockResolvedValue({ data: payload })
+    const edition = useEdition()
+    await edition.load()
+    await edition.select(2)
+    expect(edition.current.value?.id).toBe(2)
+    expect(edition.role.value).toBe('financeiro')
+  })
+
+  it('ignora troca para edição inexistente', async () => {
+    vi.spyOn(editionService, 'list').mockResolvedValue({ data: payload })
+    const edition = useEdition()
+    await edition.load()
+    await edition.select(99)
+    expect(edition.current.value?.id).toBe(1)
+  })
+
+  it('marca erro quando a API falha e não fica com papel', async () => {
+    vi.spyOn(editionService, 'list').mockRejectedValue(new Error('offline'))
+    const edition = useEdition()
+    await edition.load()
+    expect(edition.status.value).toBe('error')
+    expect(edition.role.value).toBeNull()
+  })
+
+  it('ensureLoaded só busca uma vez', async () => {
+    const spy = vi.spyOn(editionService, 'list').mockResolvedValue({ data: payload })
+    const edition = useEdition()
+    await edition.ensureLoaded()
+    await edition.ensureLoaded()
+    expect(spy).toHaveBeenCalledTimes(1)
+  })
 })
diff --git a/front-admin/app/application/shared/composables/useEdition.ts b/front-admin/app/application/shared/composables/useEdition.ts
index f6b7c1b..fc00f4c 100644
--- a/front-admin/app/application/shared/composables/useEdition.ts
+++ b/front-admin/app/application/shared/composables/useEdition.ts
@@ -1,19 +1,81 @@
+import { computed } from 'vue'
 import { storeToRefs } from 'pinia'
-import { useEditionStore } from '@/stores/editionStore'
+import editionService, { type EditionPayload } from '@/modules/shell/services/editionService'
+import type { EditionRole } from '@/modules/shell/types'
+import { useEditionStore, type CurrentEdition } from '@/stores/editionStore'
+
+const ROLES: EditionRole[] = ['organizador', 'financeiro', 'avaliador', 'checkin', 'voluntario']
+
+function translate(payload: EditionPayload): CurrentEdition | null {
+  const role = ROLES.find((r) => r === payload.role)
+  if (!role) return null
+  return {
+    id: payload.id,
+    slug: payload.slug,
+    name: payload.name,
+    city: payload.city,
+    state: payload.state,
+    yearBadge: String(payload.year).slice(-2),
+    siteUrl: payload.site_url,
+    role,
+  }
+}
 
 /**
- * Edição atual do painel. Hoje só guarda em memória o que foi setado
- * explicitamente (ex.: seletor de edição) — passa a vir do backend
- * (`GET /api/v1/editions/current` ou equivalente) quando o módulo
- * Community existir. Ver docs/adr/, decisão de Identity/Community.
+ * Edição atual do painel (store `edition`) + a lista de edições da pessoa e o
+ * papel dela na edição ativa. O id escolhido fica num cookie (não é segredo).
  */
 export function useEdition() {
   const store = useEditionStore()
-  const { current } = storeToRefs(store)
+  const { current, editions, status } = storeToRefs(store)
+  const cookie = useCookie<number | null>('ph_edition', { default: () => null, sameSite: 'lax' })
+
+  const role = computed<EditionRole | null>(() => current.value?.role ?? null)
+
+  async function load(): Promise<void> {
+    store.setStatus('loading')
+    try {
+      const response = await editionService.list()
+      const list = response.data.map(translate).filter((e): e is CurrentEdition => e !== null)
+      store.setEditions(list)
+      const chosen = list.find((e) => e.id === cookie.value) ?? list[0]
+      if (chosen) store.setCurrent(chosen)
+      store.setStatus('ready')
+    } catch {
+      store.clear()
+      store.setStatus('error')
+    }
+  }
+
+  async function ensureLoaded(): Promise<void> {
+    if (status.value === 'idle') await load()
+  }
+
+  /** Troca a edição, descarta os dados em cache e recarrega a rota atual. */
+  async function select(id: number): Promise<void> {
+    const next = editions.value.find((e) => e.id === id)
+    if (!next || current.value?.id === id) return
+    cookie.value = id
+    store.setCurrent(next)
+    clearNuxtData()
+    await refreshNuxtData()
+  }
+
+  function clear() {
+    store.clear()
+    cookie.value = null
+  }
 
   return {
     current,
+    editions,
+    status,
+    role,
     setCurrent: store.setCurrent,
-    clear: store.clear,
+    clear,
+    reset: clear,
+    load,
+    ensureLoaded,
+    select,
   }
 }
diff --git a/front-admin/app/application/shared/composables/useLogout.ts b/front-admin/app/application/shared/composables/useLogout.ts
index 46cc86e..f2eb42f 100644
--- a/front-admin/app/application/shared/composables/useLogout.ts
+++ b/front-admin/app/application/shared/composables/useLogout.ts
@@ -1,5 +1,6 @@
 import { useAuthStore } from '@/stores/authStore'
 import authService from '../services/authService'
+import { useEdition } from './useEdition'
 
 /**
  * Reused by every piece of navigation chrome (sidebar, navbar, mobile top
@@ -19,6 +20,7 @@ export function useLogout() {
     }
 
     authStore.clearSession()
+    useEdition().reset()
     await navigateTo('/login')
   }
 
diff --git a/front-admin/app/application/shared/composables/usePermissions.test.ts b/front-admin/app/application/shared/composables/usePermissions.test.ts
new file mode 100644
index 0000000..da6d0ed
--- /dev/null
+++ b/front-admin/app/application/shared/composables/usePermissions.test.ts
@@ -0,0 +1,39 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import editionService from '@/modules/shell/services/editionService'
+import { useEdition } from './useEdition'
+import { usePermissions } from './usePermissions'
+
+async function asRole(role: string) {
+  vi.spyOn(editionService, 'list').mockResolvedValue({
+    data: [{ id: 1, slug: 'ed-1', name: 'E', city: 'C', state: 'PB', year: 2027, site_url: null, role }],
+  })
+  await useEdition().load()
+}
+
+beforeEach(() => {
+  vi.restoreAllMocks()
+  useEdition().reset()
+})
+
+describe('usePermissions', () => {
+  it('financeiro enxerga vendas e não enxerga CFP', async () => {
+    await asRole('financeiro')
+    const { can, canOpen, visibleItems } = usePermissions()
+    expect(can('orders')).toBe(true)
+    expect(can('cfp')).toBe(false)
+    expect(canOpen('/pedidos/10')).toBe(true)
+    expect(canOpen('/cfp')).toBe(false)
+    expect(visibleItems.value.some((i) => i.key === 'cfp')).toBe(false)
+  })
+
+  it('sem edição carregada nada é permitido', () => {
+    const { can, visibleItems } = usePermissions()
+    expect(can('overview')).toBe(false)
+    expect(visibleItems.value).toHaveLength(0)
+  })
+
+  it('rota fora do menu não é bloqueada por papel', async () => {
+    await asRole('voluntario')
+    expect(usePermissions().canOpen('/qualquer-coisa')).toBe(true)
+  })
+})
diff --git a/front-admin/app/application/shared/composables/usePermissions.ts b/front-admin/app/application/shared/composables/usePermissions.ts
new file mode 100644
index 0000000..b0bf6dc
--- /dev/null
+++ b/front-admin/app/application/shared/composables/usePermissions.ts
@@ -0,0 +1,22 @@
+import { computed } from 'vue'
+import { canSee, findNavItem, NAV_ITEMS, type NavKey } from '@/application/shared/layout/navigation'
+import { useEdition } from './useEdition'
+
+/** O que o papel da pessoa, na edição atual, pode ver e abrir. */
+export function usePermissions() {
+  const { role } = useEdition()
+
+  const visibleItems = computed(() => NAV_ITEMS.filter((item) => canSee(item, role.value)))
+
+  function can(key: NavKey): boolean {
+    const item = NAV_ITEMS.find((i) => i.key === key)
+    return item ? canSee(item, role.value) : false
+  }
+
+  function canOpen(path: string): boolean {
+    const item = findNavItem(path)
+    return item === null || canSee(item, role.value)
+  }
+
+  return { role, visibleItems, can, canOpen }
+}
diff --git a/front-admin/app/application/shared/layout/access.test.ts b/front-admin/app/application/shared/layout/access.test.ts
new file mode 100644
index 0000000..99f367d
--- /dev/null
+++ b/front-admin/app/application/shared/layout/access.test.ts
@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest'
+import { decideAccess } from './access'
+
+const base = { isAuthenticated: true, isPublicPage: false, path: '/', fullPath: '/', role: 'organizador' as const }
+
+describe('decideAccess', () => {
+  it('sem token manda ao login guardando a rota de origem (com query)', () => {
+    expect(decideAccess({ ...base, isAuthenticated: false, path: '/pedidos', fullPath: '/pedidos?status=pago' }))
+      .toEqual({ type: 'login', redirect: '/pedidos?status=pago' })
+  })
+
+  it('sem token na raiz não guarda origem', () => {
+    expect(decideAccess({ ...base, isAuthenticated: false })).toEqual({ type: 'login', redirect: null })
+  })
+
+  it('página pública abre sem token', () => {
+    expect(decideAccess({ ...base, isAuthenticated: false, isPublicPage: true, path: '/login' })).toEqual({ type: 'allow' })
+  })
+
+  it('logado que abre o login volta para a raiz', () => {
+    expect(decideAccess({ ...base, isPublicPage: true, path: '/login' })).toEqual({ type: 'home' })
+  })
+
+  it('papel permitido abre; não permitido recebe 403', () => {
+    expect(decideAccess({ ...base, role: 'financeiro', path: '/pedidos' })).toEqual({ type: 'allow' })
+    expect(decideAccess({ ...base, role: 'financeiro', path: '/cfp' })).toEqual({ type: 'forbidden' })
+    expect(decideAccess({ ...base, role: 'avaliador', path: '/cfp/avaliacao/3' })).toEqual({ type: 'allow' })
+    expect(decideAccess({ ...base, role: 'avaliador', path: '/cfp' })).toEqual({ type: 'forbidden' })
+  })
+
+  it('sem papel conhecido só a visão geral abre', () => {
+    expect(decideAccess({ ...base, role: null, path: '/' })).toEqual({ type: 'allow' })
+    expect(decideAccess({ ...base, role: null, path: '/pedidos' })).toEqual({ type: 'forbidden' })
+  })
+
+  it('rota fora do menu segue para o 404 do Nuxt', () => {
+    expect(decideAccess({ ...base, role: 'voluntario', path: '/nao-existe' })).toEqual({ type: 'allow' })
+  })
+})
diff --git a/front-admin/app/application/shared/layout/access.ts b/front-admin/app/application/shared/layout/access.ts
new file mode 100644
index 0000000..2fe0a7f
--- /dev/null
+++ b/front-admin/app/application/shared/layout/access.ts
@@ -0,0 +1,33 @@
+import type { EditionRole } from '@/modules/shell/types'
+import { canSee, findNavItem } from './navigation'
+
+export type AccessDecision =
+  | { type: 'allow' }
+  | { type: 'login'; redirect: string | null }
+  | { type: 'home' }
+  | { type: 'forbidden' }
+
+interface AccessInput {
+  isAuthenticated: boolean
+  isPublicPage: boolean
+  path: string
+  fullPath: string
+  role: EditionRole | null
+}
+
+/** Decide o que fazer ao entrar numa rota. Pura: o middleware só aplica o resultado. */
+export function decideAccess(input: AccessInput): AccessDecision {
+  if (!input.isAuthenticated) {
+    if (input.isPublicPage) return { type: 'allow' }
+    return { type: 'login', redirect: input.fullPath === '/' ? null : input.fullPath }
+  }
+
+  if (input.path === '/login') return { type: 'home' }
+  if (input.isPublicPage) return { type: 'allow' }
+
+  // Rota fora do menu cai no 404 do Nuxt. A visão geral abre para qualquer papel,
+  // mesmo sem edição carregada.
+  const item = findNavItem(input.path)
+  if (item && item.key !== 'overview' && !canSee(item, input.role)) return { type: 'forbidden' }
+  return { type: 'allow' }
+}
diff --git a/front-admin/app/application/shared/layout/navigation.test.ts b/front-admin/app/application/shared/layout/navigation.test.ts
new file mode 100644
index 0000000..ab1d4f2
--- /dev/null
+++ b/front-admin/app/application/shared/layout/navigation.test.ts
@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest'
+import { canSee, findNavItem, NAV_GROUPS, NAV_ITEMS } from './navigation'
+import locale from '@/modules/shell/locales/pt-br'
+
+describe('navegação do painel', () => {
+  it('segue os grupos e a ordem do design', () => {
+    expect(NAV_GROUPS).toEqual(['edition', 'content', 'sales', 'organization', 'system'])
+    expect(NAV_ITEMS.map((i) => i.key)).toEqual([
+      'overview', 'identity', 'team', 'cfp', 'review', 'speakers', 'schedule', 'tickets', 'orders',
+      'payments', 'checkin', 'sponsors', 'suppliers', 'finance', 'tasks', 'comms', 'settings',
+    ])
+  })
+
+  it('todo item tem rótulo e rota únicos', () => {
+    for (const item of NAV_ITEMS) expect(locale.nav[item.key]).toBeTruthy()
+    expect(new Set(NAV_ITEMS.map((i) => i.to)).size).toBe(NAV_ITEMS.length)
+  })
+
+  it('organizador vê tudo; papel desconhecido não vê nada', () => {
+    expect(NAV_ITEMS.every((i) => canSee(i, 'organizador'))).toBe(true)
+    expect(NAV_ITEMS.some((i) => canSee(i, null))).toBe(false)
+  })
+
+  it.each([
+    ['financeiro', ['overview', 'tickets', 'orders', 'payments', 'finance']],
+    ['avaliador', ['overview', 'review']],
+    ['checkin', ['overview', 'checkin']],
+    ['voluntario', ['overview', 'checkin']],
+  ] as const)('papel %s só vê os itens permitidos', (role, keys) => {
+    expect(NAV_ITEMS.filter((i) => canSee(i, role)).map((i) => i.key)).toEqual(keys)
+  })
+
+  it('acha o item mais específico da rota', () => {
+    expect(findNavItem('/')?.key).toBe('overview')
+    expect(findNavItem('/cfp')?.key).toBe('cfp')
+    expect(findNavItem('/cfp/avaliacao')?.key).toBe('review')
+    expect(findNavItem('/cfp/avaliacao/42')?.key).toBe('review')
+    expect(findNavItem('/pedidos/')?.key).toBe('orders')
+    expect(findNavItem('/inexistente')).toBeNull()
+  })
+})
diff --git a/front-admin/app/application/shared/layout/navigation.ts b/front-admin/app/application/shared/layout/navigation.ts
new file mode 100644
index 0000000..b163e15
--- /dev/null
+++ b/front-admin/app/application/shared/layout/navigation.ts
@@ -0,0 +1,62 @@
+import {
+  CalendarDays, ClipboardCheck, Columns3, CreditCard, FileText, House, Mail, Mic, Palette,
+  Receipt, ScanLine, SlidersHorizontal, Star, Ticket, Truck, Users, Wallet,
+} from '@lucide/vue'
+import type { Component } from 'vue'
+import type { EditionRole } from '@/modules/shell/types'
+
+export type NavGroup = 'edition' | 'content' | 'sales' | 'organization' | 'system'
+
+export type NavKey =
+  | 'overview' | 'identity' | 'team' | 'cfp' | 'review' | 'speakers' | 'schedule'
+  | 'tickets' | 'orders' | 'payments' | 'checkin' | 'sponsors' | 'suppliers'
+  | 'finance' | 'tasks' | 'comms' | 'settings'
+
+export interface NavItem {
+  key: NavKey
+  to: string
+  group: NavGroup
+  icon: Component
+  /** Papéis que enxergam o item. O organizador vê tudo. */
+  roles: EditionRole[]
+}
+
+const ALL: EditionRole[] = ['organizador', 'financeiro', 'avaliador', 'checkin', 'voluntario']
+
+// Ordem e agrupamento iguais ao componente Sidebar do design.
+export const NAV_ITEMS: NavItem[] = [
+  { key: 'overview', to: '/', group: 'edition', icon: House, roles: ALL },
+  { key: 'identity', to: '/identidade', group: 'edition', icon: Palette, roles: ['organizador'] },
+  { key: 'team', to: '/equipe', group: 'edition', icon: Users, roles: ['organizador'] },
+  { key: 'cfp', to: '/cfp', group: 'content', icon: FileText, roles: ['organizador'] },
+  { key: 'review', to: '/cfp/avaliacao', group: 'content', icon: ClipboardCheck, roles: ['organizador', 'avaliador'] },
+  { key: 'speakers', to: '/palestrantes', group: 'content', icon: Mic, roles: ['organizador'] },
+  { key: 'schedule', to: '/grade', group: 'content', icon: CalendarDays, roles: ['organizador'] },
+  { key: 'tickets', to: '/ingressos', group: 'sales', icon: Ticket, roles: ['organizador', 'financeiro'] },
+  { key: 'orders', to: '/pedidos', group: 'sales', icon: Receipt, roles: ['organizador', 'financeiro'] },
+  { key: 'payments', to: '/pagamentos', group: 'sales', icon: CreditCard, roles: ['organizador', 'financeiro'] },
+  { key: 'checkin', to: '/participantes', group: 'sales', icon: ScanLine, roles: ['organizador', 'checkin', 'voluntario'] },
+  { key: 'sponsors', to: '/patrocinadores', group: 'organization', icon: Star, roles: ['organizador'] },
+  { key: 'suppliers', to: '/fornecedores', group: 'organization', icon: Truck, roles: ['organizador'] },
+  { key: 'finance', to: '/financas', group: 'organization', icon: Wallet, roles: ['organizador', 'financeiro'] },
+  { key: 'tasks', to: '/tarefas', group: 'organization', icon: Columns3, roles: ['organizador'] },
+  { key: 'comms', to: '/comunicacao', group: 'system', icon: Mail, roles: ['organizador'] },
+  { key: 'settings', to: '/configuracoes', group: 'system', icon: SlidersHorizontal, roles: ['organizador'] },
+]
+
+export const NAV_GROUPS: NavGroup[] = ['edition', 'content', 'sales', 'organization', 'system']
+
+export function canSee(item: NavItem, role: EditionRole | null): boolean {
+  return role !== null && item.roles.includes(role)
+}
+
+/** Item cuja rota é o prefixo mais específico de `path` (ou null). */
+export function findNavItem(path: string): NavItem | null {
+  const clean = path.replace(/\/+$/, '') || '/'
+  let best: NavItem | null = null
+  for (const item of NAV_ITEMS) {
+    const match = item.to === '/' ? clean === '/' : clean === item.to || clean.startsWith(`${item.to}/`)
+    if (match && (!best || item.to.length > best.to.length)) best = item
+  }
+  return best
+}
diff --git a/front-admin/app/assets/css/main.css b/front-admin/app/assets/css/main.css
index c39903f..ba9bb94 100644
--- a/front-admin/app/assets/css/main.css
+++ b/front-admin/app/assets/css/main.css
@@ -30,6 +30,8 @@
   --ph-ink-2: #6f4a38; /* texto secundário */
   --ph-ink-3: #7f5a47; /* legendas */
   --ph-on-brand: #fff8e8; /* texto sobre marca */
+  --ph-side-text: #f3e3c0; /* texto do menu lateral */
+  --ph-side-muted: #d9bf94; /* títulos de seção do menu lateral */
 
   /* Estados (texto / fundo) */
   --ph-ok: #4b6a24;
@@ -98,3 +100,13 @@ body {
   font-family: var(--ph-font-heading);
   font-variant-numeric: tabular-nums;
 }
+
+/* Botões da barra superior (seletor de edição, notificações, menu do usuário). */
+.ph-topbtn {
+  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
+  min-width: 44px; min-height: 44px; padding: 0 8px;
+  border: 1px solid var(--ph-line); border-radius: var(--ph-radius);
+  background: var(--ph-surface); color: var(--ph-ink);
+  font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none;
+}
+.ph-topbtn:hover { background: var(--ph-surface-2); }
diff --git a/front-admin/app/error.test.ts b/front-admin/app/error.test.ts
new file mode 100644
index 0000000..363bd63
--- /dev/null
+++ b/front-admin/app/error.test.ts
@@ -0,0 +1,26 @@
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { describe, expect, it } from 'vitest'
+import ErrorPage from './error.vue'
+
+function error(statusCode: number) {
+  return { statusCode, statusMessage: 'x', message: 'x', fatal: false, unhandled: false } as never
+}
+
+describe('página de erro global', () => {
+  it.each([
+    [404, 'Página não encontrada', 'Ir para a visão geral'],
+    [403, 'Sem permissão', 'Ir para a visão geral'],
+    [500, 'Algo deu errado', 'Tentar de novo'],
+  ])('%s mostra título e ação', async (code, title, action) => {
+    const wrapper = await mountSuspended(ErrorPage, { props: { error: error(code) } })
+    expect(wrapper.find('h1').text()).toBe(title)
+    expect(wrapper.text()).toContain(`Erro ${code}`)
+    expect(wrapper.text()).toContain('Voltar')
+    expect(wrapper.text()).toContain(action)
+  })
+
+  it('qualquer outro código é tratado como 500', async () => {
+    const wrapper = await mountSuspended(ErrorPage, { props: { error: error(502) } })
+    expect(wrapper.find('h1').text()).toBe('Algo deu errado')
+  })
+})
diff --git a/front-admin/app/error.vue b/front-admin/app/error.vue
new file mode 100644
index 0000000..8fb1c06
--- /dev/null
+++ b/front-admin/app/error.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { FileQuestion, ServerCrash, ShieldAlert } from '@lucide/vue'
+import type { NuxtError } from '#app'
+import locale from '@/modules/shell/locales/pt-br'
+
+const props = defineProps<{ error: NuxtError }>()
+
+const code = computed<404 | 403 | 500>(() => (props.error.statusCode === 404 ? 404 : props.error.statusCode === 403 ? 403 : 500))
+const text = computed(() => locale.errors[code.value])
+const icon = computed(() => (code.value === 404 ? FileQuestion : code.value === 403 ? ShieldAlert : ServerCrash))
+
+function goBack() {
+  if (window.history.length > 1) clearError().then(() => window.history.back())
+  else clearError({ redirect: '/' })
+}
+</script>
+
+<template>
+  <main class="flex min-h-dvh items-center justify-center bg-(--ph-bg) p-6">
+    <div class="flex w-full max-w-md flex-col items-center gap-4 rounded-box border border-base-300 bg-base-100 p-8 text-center">
+      <component :is="icon" class="size-10 text-(--ph-brand)" :stroke-width="1.5" aria-hidden="true" />
+      <p class="text-sm font-medium text-(--ph-ink-3)">Erro {{ code }}</p>
+      <h1 class="text-2xl font-semibold">{{ text.title }}</h1>
+      <p class="text-sm text-(--ph-ink-2)">{{ text.description }}</p>
+      <div class="flex flex-wrap justify-center gap-3">
+        <PhButton variant="secondary" @click="goBack">{{ locale.errors.back }}</PhButton>
+        <PhButton v-if="code === 500" @click="clearError({ redirect: $route.fullPath })">{{ locale.errors.reload }}</PhButton>
+        <PhButton v-else @click="clearError({ redirect: '/' })">{{ locale.errors.home }}</PhButton>
+      </div>
+    </div>
+  </main>
+</template>
diff --git a/front-admin/app/layouts/blank.vue b/front-admin/app/layouts/blank.vue
new file mode 100644
index 0000000..8af4614
--- /dev/null
+++ b/front-admin/app/layouts/blank.vue
@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <slot />
+    <PhToastHost />
+  </div>
+</template>
diff --git a/front-admin/app/layouts/default.vue b/front-admin/app/layouts/default.vue
index 8af4614..b5c4d5b 100644
--- a/front-admin/app/layouts/default.vue
+++ b/front-admin/app/layouts/default.vue
@@ -1,6 +1,27 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import locale from '@/modules/shell/locales/pt-br'
+
+const menuOpen = ref(false)
+const route = useRoute()
+watch(() => route.fullPath, () => { menuOpen.value = false })
+</script>
+
 <template>
-  <div>
-    <slot />
+  <div class="min-h-dvh bg-(--ph-bg)">
+    <a href="#conteudo" class="sr-only focus:not-sr-only focus:absolute focus:left-2 focus:top-2 focus:z-50 focus:rounded-lg focus:bg-base-100 focus:px-4 focus:py-2">{{ locale.skipToContent }}</a>
+    <div class="flex min-h-dvh">
+      <aside class="hidden w-[264px] shrink-0 lg:block">
+        <div class="sticky top-0 h-dvh overflow-y-auto"><SideNav /></div>
+      </aside>
+      <div class="flex min-w-0 flex-1 flex-col">
+        <AppTopbar @open-menu="menuOpen = true" />
+        <main id="conteudo" tabindex="-1" class="flex-1 px-4 py-6 focus:outline-none lg:px-10">
+          <slot />
+        </main>
+      </div>
+    </div>
+    <MobileMenu v-model="menuOpen" />
     <PhToastHost />
   </div>
 </template>
diff --git a/front-admin/app/middleware/auth.global.ts b/front-admin/app/middleware/auth.global.ts
new file mode 100644
index 0000000..9e3b9ae
--- /dev/null
+++ b/front-admin/app/middleware/auth.global.ts
@@ -0,0 +1,37 @@
+import { decideAccess } from '@/application/shared/layout/access'
+import { useAuthStore } from '@/stores/authStore'
+import { useEdition } from '@/application/shared/composables/useEdition'
+
+// A sessão vive no navegador (localStorage), então a guarda só roda no cliente.
+// Páginas públicas declaram `definePageMeta({ auth: false })`.
+export default defineNuxtRouteMiddleware(async (to) => {
+  if (import.meta.server) return
+
+  const auth = useAuthStore()
+  const edition = useEdition()
+  const isPublicPage = to.meta.auth === false
+
+  // O papel só é necessário em páginas protegidas.
+  if (auth.isAuthenticated && !isPublicPage) await edition.ensureLoaded()
+
+  const decision = decideAccess({
+    isAuthenticated: auth.isAuthenticated,
+    isPublicPage,
+    path: to.path,
+    fullPath: to.fullPath,
+    role: edition.role.value,
+  })
+
+  if (decision.type === 'login') {
+    return navigateTo({ path: '/login', query: decision.redirect ? { redirect: decision.redirect } : undefined })
+  }
+  if (decision.type === 'home') return navigateTo('/')
+  if (decision.type === 'forbidden') throw createError({ statusCode: 403, statusMessage: 'Sem permissão' })
+})
+
+declare module '#app' {
+  interface PageMeta {
+    /** `false` libera a página para quem não está logado (ex.: login). */
+    auth?: boolean
+  }
+}
diff --git a/front-admin/app/modules/shell/locales/pt-br/index.ts b/front-admin/app/modules/shell/locales/pt-br/index.ts
new file mode 100644
index 0000000..5a5d68e
--- /dev/null
+++ b/front-admin/app/modules/shell/locales/pt-br/index.ts
@@ -0,0 +1,62 @@
+export default {
+  brandName: 'PHPeste',
+  brandSubtitle: 'Painel da organização',
+  mainNav: 'Principal',
+  skipToContent: 'Ir para o conteúdo',
+  openMenu: 'Abrir menu',
+  closeMenu: 'Fechar menu',
+  switchEdition: 'Trocar de edição',
+  editionList: 'Edições',
+  noEdition: 'Nenhuma edição',
+  noEditionHint: 'Você ainda não participa de nenhuma edição.',
+  activeEdition: 'Edição ativa',
+  search: 'Buscar',
+  searchPlaceholder: 'Buscar pedidos, propostas e pessoas',
+  viewSite: 'Ver site da edição',
+  notifications: 'Notificações',
+  userMenu: 'Menu do usuário',
+  logout: 'Sair',
+  editionsError: 'Não foi possível carregar as edições.',
+  retry: 'Tentar de novo',
+  groups: {
+    edition: 'Edição',
+    content: 'Conteúdo',
+    sales: 'Vendas',
+    organization: 'Organização',
+    system: 'Sistema',
+  },
+  roles: {
+    organizador: 'Organizador',
+    financeiro: 'Financeiro',
+    avaliador: 'Avaliador',
+    checkin: 'Check-in',
+    voluntario: 'Voluntário',
+  },
+  nav: {
+    overview: 'Visão geral',
+    identity: 'Identidade visual',
+    team: 'Equipe e papéis',
+    cfp: 'Configurar CFP',
+    review: 'Avaliar propostas',
+    speakers: 'Palestrantes',
+    schedule: 'Grade',
+    tickets: 'Ingressos',
+    orders: 'Pedidos',
+    payments: 'Pagamentos',
+    checkin: 'Participantes e check-in',
+    sponsors: 'Patrocinadores',
+    suppliers: 'Fornecedores',
+    finance: 'Finanças',
+    tasks: 'Tarefas',
+    comms: 'Comunicação',
+    settings: 'Configurações',
+  },
+  errors: {
+    back: 'Voltar',
+    home: 'Ir para a visão geral',
+    reload: 'Tentar de novo',
+    404: { title: 'Página não encontrada', description: 'O endereço não existe ou foi movido.' },
+    403: { title: 'Sem permissão', description: 'Seu papel nesta edição não permite abrir esta página.' },
+    500: { title: 'Algo deu errado', description: 'O problema é nosso. Nada foi perdido; tente de novo em instantes.' },
+  },
+}
diff --git a/front-admin/app/modules/shell/services/editionService.ts b/front-admin/app/modules/shell/services/editionService.ts
new file mode 100644
index 0000000..d7777a0
--- /dev/null
+++ b/front-admin/app/modules/shell/services/editionService.ts
@@ -0,0 +1,21 @@
+import { httpClient } from '@/infrastructure/http/HttpClient'
+
+const EDITIONS_URL = '/editions'
+
+export interface EditionPayload {
+  slug: string
+  id: number
+  name: string
+  city: string
+  state: string
+  year: number
+  site_url: string | null
+  role: string
+}
+
+export default {
+  /** Edições em que a pessoa logada tem algum papel. Devolve o payload cru. */
+  async list(): Promise<{ data: EditionPayload[] }> {
+    return httpClient.get<{ data: EditionPayload[] }>(EDITIONS_URL)
+  },
+}
diff --git a/front-admin/app/modules/shell/types/index.ts b/front-admin/app/modules/shell/types/index.ts
new file mode 100644
index 0000000..48b9cf0
--- /dev/null
+++ b/front-admin/app/modules/shell/types/index.ts
@@ -0,0 +1,2 @@
+// Papéis de uma pessoa dentro de uma edição.
+export type EditionRole = 'organizador' | 'financeiro' | 'avaliador' | 'checkin' | 'voluntario'
diff --git a/front-admin/app/pages/_dev/componentes.vue b/front-admin/app/pages/_dev/componentes.vue
index 5a088c0..90b6acc 100644
--- a/front-admin/app/pages/_dev/componentes.vue
+++ b/front-admin/app/pages/_dev/componentes.vue
@@ -3,6 +3,8 @@ import { ref } from 'vue'
 import { Inbox } from '@lucide/vue'
 import { useToast } from '@/application/shared/composables/useToast'
 
+definePageMeta({ layout: 'blank', auth: false })
+
 // Catálogo do kit de UI. Só existe em desenvolvimento (ou com NUXT_PUBLIC_UI_CATALOG=true,
 // usado pelos testes e2e): em produção devolve 404.
 if (!import.meta.dev && !useRuntimeConfig().public.uiCatalog) {
diff --git a/front-admin/app/pages/index.vue b/front-admin/app/pages/index.vue
index 1224cf1..fe99918 100644
--- a/front-admin/app/pages/index.vue
+++ b/front-admin/app/pages/index.vue
@@ -1,28 +1,17 @@
 <script setup lang="ts">
 import { useAuthStore } from '@/stores/authStore'
-import { useLogout } from '@/application/shared/composables/useLogout'
+import { useEdition } from '@/application/shared/composables/useEdition'
 
 const authStore = useAuthStore()
-const { logout } = useLogout()
+const { current } = useEdition()
 </script>
 
 <template>
-  <div class="flex min-h-dvh flex-col items-center justify-center gap-4 p-6 text-center">
-    <h1 class="text-2xl font-semibold">base_nuxt_modular</h1>
-    <p v-if="authStore.isAuthenticated" class="text-sm text-base-content/70">
-      Signed in as {{ authStore.user?.name }} ({{ authStore.user?.email }})
+  <section class="flex flex-col gap-2">
+    <h1 class="text-3xl font-semibold">Visão geral</h1>
+    <p class="text-sm text-(--ph-ink-2)">
+      Olá, {{ authStore.user?.name }}.
+      <template v-if="current">Você está em {{ current.name }}.</template>
     </p>
-    <p v-else class="text-sm text-base-content/70">
-      Not signed in.
-      <NuxtLink to="/login" class="link link-primary font-medium">Log in</NuxtLink>
-    </p>
-    <button
-      v-if="authStore.isAuthenticated"
-      type="button"
-      class="btn btn-outline btn-sm"
-      @click="logout"
-    >
-      Log out
-    </button>
-  </div>
+  </section>
 </template>
diff --git a/front-admin/app/pages/login.vue b/front-admin/app/pages/login.vue
index 9afa36a..d99df02 100644
--- a/front-admin/app/pages/login.vue
+++ b/front-admin/app/pages/login.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import LoginView from '~/modules/login/views/LoginView.vue'
+
+definePageMeta({ layout: 'blank', auth: false })
 </script>
 
 <template>
diff --git a/front-admin/app/stores/editionStore.ts b/front-admin/app/stores/editionStore.ts
index f19a87c..c920d19 100644
--- a/front-admin/app/stores/editionStore.ts
+++ b/front-admin/app/stores/editionStore.ts
@@ -1,24 +1,39 @@
 import { defineStore } from 'pinia'
+import type { EditionRole } from '@/modules/shell/types'
 
 export interface CurrentEdition {
   id: number
   slug: string
   name: string
+  // Detalhes vindos de GET /editions; opcionais porque `setCurrent` também aceita só o essencial.
+  city?: string
+  state?: string
+  /** Últimos dois dígitos do ano, mostrados no selo ("27"). */
+  yearBadge?: string
+  siteUrl?: string | null
+  /** Papel da pessoa logada nesta edição. */
+  role?: EditionRole
 }
 
+type LoadStatus = 'idle' | 'loading' | 'ready' | 'error'
+
 interface EditionState {
   current: CurrentEdition | null
+  /** Edições em que a pessoa tem algum papel (seletor do topo). */
+  editions: CurrentEdition[]
+  status: LoadStatus
 }
 
 /**
  * Edição ativa do painel — lida por quase toda tela (seletor no topo,
  * chamadas de API escopadas por edição), por isso é store global e não
- * estado de um módulo só. Ainda não é alimentada por API nenhuma: o
- * módulo Community não existe no backend. Ver useEdition().
+ * estado de um módulo só. Alimentada por useEdition().load().
  */
 export const useEditionStore = defineStore('edition', {
   state: (): EditionState => ({
     current: null,
+    editions: [],
+    status: 'idle',
   }),
 
   actions: {
@@ -26,8 +41,18 @@ export const useEditionStore = defineStore('edition', {
       this.current = edition
     },
 
+    setEditions(editions: CurrentEdition[]) {
+      this.editions = editions
+    },
+
+    setStatus(status: LoadStatus) {
+      this.status = status
+    },
+
     clear() {
       this.current = null
+      this.editions = []
+      this.status = 'idle'
     },
   },
 })
diff --git a/front-admin/docs/LAYOUT.md b/front-admin/docs/LAYOUT.md
new file mode 100644
index 0000000..d10cc4e
--- /dev/null
+++ b/front-admin/docs/LAYOUT.md
@@ -0,0 +1,37 @@
+# Layout base do painel (issue #52)
+
+Estrutura que envolve todas as telas autenticadas, igual aos componentes Sidebar e Topbar do design.
+
+## Peças
+
+| Peça | Onde |
+| --- | --- |
+| Layout autenticado (menu + barra + conteúdo) | `app/layouts/default.vue` |
+| Layout sem moldura (login, catálogo dev) | `app/layouts/blank.vue` |
+| Menu lateral de 264 px (`SideNav`), gaveta em telas estreitas (`MobileMenu`) | `app/application/shared/components/layout/` |
+| Barra superior: `AppTopbar`, `EditionSwitcher`, `UserMenu` | idem |
+| Itens do menu, grupos e papéis que enxergam cada um | `app/application/shared/layout/navigation.ts` |
+| Decisão de acesso por rota (pura, testada) | `app/application/shared/layout/access.ts` |
+| Guarda global (login + 403) | `app/middleware/auth.global.ts` |
+| Edição atual e papel | `app/application/shared/composables/useEdition.ts` |
+| Permissões derivadas do papel | `app/application/shared/composables/usePermissions.ts` |
+| Página de erro global (404, 403, 500) | `app/error.vue` |
+| Textos | `app/modules/shell/locales/pt-br` |
+
+## Como adicionar uma tela ao menu
+
+1. Inclua o item em `NAV_ITEMS` (`navigation.ts`) com rota, grupo, ícone e os papéis que podem vê-lo.
+2. Adicione o rótulo em `app/modules/shell/locales/pt-br` (`nav.<key>`).
+3. Crie a página em `app/pages/`. O menu, o item ativo e o 403 já passam a valer para ela.
+
+## Regras
+
+- **Guarda de rota:** sem token, vai para `/login?redirect=<rota>` e volta depois de entrar. Páginas públicas declaram `definePageMeta({ auth: false })`.
+- **Papéis:** `organizador` vê tudo; os demais veem só os itens listados em `roles`. Item não permitido não aparece e a rota devolve 403.
+- **Troca de edição:** guarda o id da edição num cookie, descarta o cache de dados (`clearNuxtData`) e recarrega (`refreshNuxtData`) mantendo a mesma rota. Composables de dados devem usar `useAsyncData`/`useFetch` para serem recarregados.
+- **SPA:** o painel roda com `ssr: false`. A sessão vive no navegador, então não há o que renderizar no servidor, e assim o 403 da guarda roda antes de qualquer 404.
+- **Acessibilidade:** `<nav aria-label="Principal">`, `aria-current="page"` no item ativo, link "Ir para o conteúdo", seletor e menu do usuário fecham com Esc devolvendo o foco, gaveta é `<dialog>` nativo.
+
+## Dependência da API
+
+`useEdition` consome `GET /editions` (lista de `{ id, slug, name, city, state, year, site_url, role }`), tipado à mão em `editionService` até o endpoint existir no OpenAPI (`npm run api:gen`). Sem edição carregada só a visão geral aparece. O token segue Bearer no cliente (ADR 0005).
diff --git a/front-admin/e2e/login.spec.ts b/front-admin/e2e/login.spec.ts
index 0812721..ac66e24 100644
--- a/front-admin/e2e/login.spec.ts
+++ b/front-admin/e2e/login.spec.ts
@@ -76,6 +76,6 @@ test.describe('Login', () => {
     await page.getByRole('button', { name: 'Entrar' }).click()
 
     await expect(page).toHaveURL(/\/$/)
-    await expect(page.getByText('Ada Lovelace')).toBeVisible()
+    await expect(page.getByRole('button', { name: 'Menu do usuário' })).toContainText('Ada Lovelace')
   })
 })
diff --git a/front-admin/e2e/shell.spec.ts b/front-admin/e2e/shell.spec.ts
new file mode 100644
index 0000000..39d7857
--- /dev/null
+++ b/front-admin/e2e/shell.spec.ts
@@ -0,0 +1,137 @@
+import { expect, test } from '@nuxt/test-utils/playwright'
+import type { Page } from '@playwright/test'
+
+const EDITIONS_API = '**/api/v1/editions'
+const LOGIN_API = '**/api/v1/auth/login'
+
+const editions = [
+  { id: 1, slug: 'ed-1', name: 'PHPeste 2027', city: 'João Pessoa', state: 'PB', year: 2027, site_url: 'https://phpeste.dev', role: 'organizador' },
+  { id: 2, slug: 'ed-2', name: 'PHPeste 2026', city: 'Recife', state: 'PE', year: 2026, site_url: null, role: 'financeiro' },
+]
+
+const session = {
+  user: { id: 1, name: 'Nome Sobrenome', email: 'n@s.dev', avatarUrl: null },
+  token: 'e2e-token',
+}
+
+async function signIn(page: Page, data = editions) {
+  await page.addInitScript((value) => localStorage.setItem('app.auth', JSON.stringify(value)), session)
+  await page.route(EDITIONS_API, (route) => route.fulfill({ status: 200, json: { data } }))
+}
+
+test.describe('Layout base do painel', () => {
+  test('mostra menu lateral com seções, item ativo e rodapé da edição', async ({ page, goto }) => {
+    await signIn(page)
+    await goto('/', { waitUntil: 'hydration' })
+
+    const nav = page.getByRole('navigation', { name: 'Principal' })
+    await expect(nav).toBeVisible()
+    for (const group of ['Edição', 'Conteúdo', 'Vendas', 'Organização', 'Sistema']) {
+      await expect(nav.getByRole('heading', { name: group })).toBeVisible()
+    }
+    await expect(nav.getByRole('link', { name: 'Visão geral' })).toHaveAttribute('aria-current', 'page')
+    await expect(nav.getByRole('link')).toHaveCount(17)
+    const width = await page.locator('aside').evaluate((el) => el.getBoundingClientRect().width)
+    expect(width).toBe(264)
+    await expect(page.locator('aside').getByText('PHPeste 2027 · João Pessoa')).toBeVisible()
+  })
+
+  test('barra superior: seletor de edição, busca, ver site, notificações e usuário', async ({ page, goto }) => {
+    await signIn(page)
+    await goto('/', { waitUntil: 'hydration' })
+
+    await expect(page.getByRole('button', { name: 'Trocar de edição' })).toContainText('PHPeste 2027')
+    await expect(page.getByRole('searchbox', { name: 'Buscar' })).toBeVisible()
+    await expect(page.getByRole('link', { name: 'Ver site da edição' })).toHaveAttribute('href', 'https://phpeste.dev')
+    await expect(page.getByRole('button', { name: 'Notificações' })).toBeVisible()
+    await expect(page.getByRole('button', { name: 'Menu do usuário' })).toContainText('Nome Sobrenome')
+  })
+
+  test('trocar de edição muda o papel, o menu e mantém a rota', async ({ page, goto }) => {
+    await signIn(page)
+    await goto('/', { waitUntil: 'hydration' })
+    const nav = page.getByRole('navigation', { name: 'Principal' })
+
+    await page.getByRole('button', { name: 'Trocar de edição' }).click()
+    await page.getByRole('list', { name: 'Edições' }).getByRole('button', { name: /PHPeste 2026/ }).click()
+
+    await expect(page).toHaveURL(/\/$/)
+    await expect(page.getByRole('button', { name: 'Trocar de edição' })).toContainText('PHPeste 2026')
+    await expect(nav.getByRole('link')).toHaveCount(5)
+    await expect(nav.getByRole('link', { name: 'Configurar CFP' })).toHaveCount(0)
+    await expect(page.getByRole('button', { name: 'Menu do usuário' })).toContainText('Financeiro')
+  })
+
+  test('papel sem permissão não vê o item e a rota devolve 403 com ação de voltar', async ({ page, goto }) => {
+    await signIn(page, [{ ...editions[1]! }])
+    await goto('/', { waitUntil: 'hydration' })
+    await expect(page.getByRole('navigation', { name: 'Principal' }).getByRole('link', { name: 'Pedidos' })).toBeVisible()
+
+    await page.goto('/cfp')
+    await expect(page.getByRole('heading', { name: 'Sem permissão' })).toBeVisible()
+    await expect(page.getByRole('button', { name: 'Voltar' })).toBeVisible()
+    await page.getByRole('button', { name: 'Ir para a visão geral' }).click()
+    await expect(page.getByRole('heading', { name: 'Visão geral' })).toBeVisible()
+  })
+
+  test('rota inexistente mostra 404', async ({ page, goto }) => {
+    await signIn(page)
+    await goto('/nao-existe', { waitUntil: 'hydration' })
+    await expect(page.getByRole('heading', { name: 'Página não encontrada' })).toBeVisible()
+  })
+
+  test('sem token redireciona ao login e volta para a rota depois de entrar', async ({ page, goto }) => {
+    await page.route(EDITIONS_API, (route) => route.fulfill({ status: 200, json: { data: editions } }))
+    await page.route(LOGIN_API, (route) =>
+      route.fulfill({
+        status: 200,
+        json: { user: { id: 1, name: 'Nome Sobrenome', email: 'n@s.dev', avatar_url: null, created_at: '2026-01-01' }, token: 'e2e-token' },
+      }))
+
+    await goto('/pedidos', { waitUntil: 'hydration' })
+    await expect(page).toHaveURL(/\/login\?redirect=(%2F|\/)pedidos$/)
+
+    await page.getByLabel('Email').fill('n@s.dev')
+    await page.getByLabel('Senha', { exact: true }).fill('segredo123')
+    await page.getByRole('button', { name: 'Entrar' }).click()
+
+    await expect(page).toHaveURL(/\/pedidos$/)
+  })
+
+  test('em tela estreita o menu vira gaveta aberta por botão', async ({ page, goto }) => {
+    await page.setViewportSize({ width: 390, height: 844 })
+    await signIn(page)
+    await goto('/', { waitUntil: 'hydration' })
+
+    await expect(page.locator('aside')).toBeHidden()
+    const opener = page.getByRole('button', { name: 'Abrir menu' })
+    await opener.click()
+    const drawer = page.getByRole('dialog', { name: 'Principal' })
+    await expect(drawer).toBeVisible()
+    await expect(drawer.getByRole('link', { name: 'Visão geral' })).toBeVisible()
+    await page.keyboard.press('Escape')
+    await expect(drawer).toBeHidden()
+    await expect(opener).toBeFocused()
+  })
+
+  test('navegação completa por teclado: pular ao conteúdo, menu e seletor', async ({ page, goto }) => {
+    await signIn(page)
+    await goto('/', { waitUntil: 'hydration' })
+
+    await page.keyboard.press('Tab')
+    await expect(page.getByRole('link', { name: 'Ir para o conteúdo' })).toBeFocused()
+
+    const edition = page.getByRole('button', { name: 'Trocar de edição' })
+    await edition.focus()
+    await page.keyboard.press('Enter')
+    await expect(edition).toHaveAttribute('aria-expanded', 'true')
+    await page.keyboard.press('Escape')
+    await expect(edition).toHaveAttribute('aria-expanded', 'false')
+    await expect(edition).toBeFocused()
+
+    const first = page.getByRole('navigation', { name: 'Principal' }).getByRole('link').first()
+    await first.focus()
+    await page.keyboard.press('Tab')
+    await expect(page.getByRole('navigation', { name: 'Principal' }).getByRole('link', { name: 'Identidade visual' })).toBeFocused()
+  })
+})
diff --git a/front-admin/nuxt.config.ts b/front-admin/nuxt.config.ts
index 678950f..ce8f760 100644
--- a/front-admin/nuxt.config.ts
+++ b/front-admin/nuxt.config.ts
@@ -4,11 +4,15 @@ import tailwindcss from '@tailwindcss/vite'
 export default defineNuxtConfig({
   compatibilityDate: '2025-07-15',
   devtools: { enabled: true },
+  // Painel autenticado: a sessão vive no navegador (localStorage), então não há o que
+  // renderizar no servidor. SPA evita 404 de SSR antes da guarda de rota (403) rodar.
+  ssr: false,
   modules: ['@pinia/nuxt', '@nuxt/eslint'],
   css: ['~/assets/css/main.css'],
   // Kit de UI do tema Sertão: <PhButton>, <PhInput>, <PhCard>… (ver app/application/shared/components/ui)
   components: [
     { path: '~/application/shared/components/ui', pathPrefix: false, prefix: 'Ph' },
+    { path: '~/application/shared/components/layout', pathPrefix: false },
     { path: '~/components', pathPrefix: false },
   ],
   vite: {