components
ui-shell
O esqueleto da aplicação: header fixo + sidebar colapsável + main + footer. Injetado por shell.js em qualquer página com <main class='main'>.
overview
casa hacker / dsGITHUB ↗
// SECTION
item ativo
item
main content
conteúdo da página
variantes
Composição única: 1 header + 1 sidebar + 1 main + 1 footer. Variantes futuras (sem sidebar, sem footer) podem ser adicionadas.
comportamentos
- Header fixo (sticky top: 0)
- Sidebar colapsável por seção, estado persistido em localStorage
- Mobile: sidebar vira drawer com backdrop
- Atalho '/' foca a busca da sidebar
- Esc fecha sidebar mobile
- Active section auto-expande na sidebar
modifiers · api
| prop | tipo | default | descrição |
|---|---|---|---|
| .shell-header | class | — | header dos · sticky |
| .sidebar | class | — | nav lateral · colapsa por seção |
| .main | class | — | conteúdo principal · max-width 1280px |
| .shell-footer | class | — | rodapé |
| meta[name="ch-page"] | meta | — | id da página atual |
| meta[name="ch-base"] | meta | — | path relativo ao root |
quando usar
use
não use
acessibilidade
- Skip-link 'pular pra conteúdo' visível no foco
- <nav aria-label="navegação primária">
- aria-current="page" no link ativo
- Sidebar com toggle aria-expanded
- Mobile: focus trap quando drawer aberto
código
<!-- toda página tem essa estrutura -->
<html>
<head>
<meta name="ch-page" content="my-page">
<meta name="ch-base" content="../../">
<link rel="stylesheet" href="../../styles.css">
</head>
<body>
<main class="main">
<!-- conteúdo -->
</main>
<script src="../../shell.js"></script>
</body>