← voltar

Menu mobile

O menu abre pelo hambúrguer acima — sem nenhuma tag <mobile-menu-wc> declarada nesta página. A página é alta de propósito: o scroll do fundo fica travado enquanto o menu está aberto.

mobile-menu-wc é um componente global: o próprio loader injeta a tag sozinho em toda página, igual auth-wc/checkout-wc. Você não precisa declarar nada no HTML — só um elemento-gatilho:

<button id="mobile-menu-wc-open">☰</button>

Para mais de um gatilho na mesma página (ex.: hambúrguer duplicado em variantes desktop/mobile), use class em vez de id — id deve ser único, class não:

<button class="mobile-menu-wc-open">☰</button>
<button class="mobile-menu-wc-open">☰</button>

Os botões "Comprar"/"Reservar", a navegação da Minha Conta e o "Acesso rápido" usam window.__WC_CONFIG__ como fonte — configure uma vez no header/footer do site, vale para toda página, sem declarar a tag em lugar nenhum:

window.__WC_CONFIG__ = {
  site: {
    myAccountUrl: '/minha-conta',
    packagePageUrl: '/planos',
    bookPageUrl: '/agenda',
  },
  mobileMenu: {
    pages: [
      { icon: 'home-internal-icon', label: 'Início', page: '/' }
    ],
  },
}

Precisa de mais controle (largura do painel, ou URLs/"Acesso rápido" diferentes do resto do site nesta página específica)? Declare a tag manualmente — os atributos têm prioridade sobre o __WC_CONFIG__, e o loader não duplica a injeção automática ao detectar que ela já existe:

<mobile-menu-wc
  account-url="/minha-conta"
  packages-url="/planos"
  book-url="/agenda"
  side-width="400px"
  pages='[
    { "icon": "home-internal-icon", "label": "Início", "page": "/" }
  ]'
></mobile-menu-wc>

Se declarar manualmente, a tag precisa ficar como filha direta do <body> — o painel usa position: fixed e quebraria dentro de um contêiner com transform/filter.

Também abre por document.querySelector('mobile-menu-wc').open = true ou pelo evento window.dispatchEvent(new CustomEvent('pk-open-mobile-menu')). No modo controlado, resete open = false ao receber o evento close.

O grid "Minha conta" segue o account_show_in_menu do backend, e a seção "Segurança e Privacidade" lista só as políticas configuradas.