Menu lateral

O menu lateral é um recurso essencial para organizar sua documentação de forma clara e intuitiva. Para facilitar esse processo, disponibilizamos exemplos de configuração e estruturação do conteúdo.

Existem duas maneiras de organizar suas páginas:

• Sem hierarquia: A página será criada de forma independente, sem páginas filhas associadas.
• Com hierarquia: Permite criar uma página principal (página pai) que agrupa outras páginas relacionadas (páginas filhas).

observação

Na imagem abaixo, você pode visualizar ambas as abordagens. As páginas que apresentam a opção de expansão > são páginas pai e contêm páginas filhas organizadas sob elas. Já as páginas sem essa opção são independentes e podem estar associadas ou não a uma página pai, como é o caso da página Introdução.

Exemplos de organização

Veja um exemplo de como configurar o menu lateral custom-sidebar.js.

Estrutura das pastas e páginas

website // Pasta raiz do portal
│── docs // Pasta docs
│   └── 1-introducao.md
│   └── guias // Pasta guias
│           └── guias.md // Arquivo que serve para criar o conteúdo da página pai
│           └── 1-guia1.md
│           └── 2-guia2.md
│   └── guias-avancados // Pasta guias avançados
│           └── guias-avancados.md // Arquivo que serve para criar o conteúdo da página pai
│           └── 1-guia-avancado1.md
│           └── 2-guia-avancado2.md
│                   └── ajuda // Pasta filha da pasta guias avançados
│                       └── 1-boas-praticas.md
│                       └── 2-ajuda.md

Estrutura do Menu lateral

/custom-sidebar.js

const customsidebar = [
    {
        type: "doc", // Tipo doc para podermos indicar que será uma página sem hierarquia
        id: "introducao", // ID do documento introducao.md
        label: "Introdução" // Sem o metadado Title, este será o nome do documento no menu lateral
    },
    {
        type: "category", // Tipo category para indicar que esta pasta possuí hierarquia
        label: "Guias", // Sem o metadado Title, este será o nome do documento no menu lateral
        // Aqui incluímos o parâmetro link, para indicar que a pasta terá o conteúdo da página guias.md
        link: { 
            type: 'doc', 
            id: 'guias/guias' // ID do documento guias.md
        },
        // Páginas filhas da página Guias
        items: [
            "guias/guia1",
            "guias/guia2",
        ],
    },
    {
        type: "category", // Tipo category para indicar que esta pasta possuí hierarquia
        label: "Guias avançados", // Sem o metadado Title, este será o nome do documento no menu lateral
        // Aqui incluímos o parâmetro link, para indicar que a pasta terá o conteúdo da página guias.md
        link: { 
            type: 'doc', 
            id: 'guias-avancados/guias-avancados' // ID do documento guias-avancados.md
        },
        // Páginas filhas da página Guias avançados
        items: [
            "guias-avancados/guia-avancado-1",
            "guias-avancados/guia-avancado2",
            // Aqui agrupamos mais uma nível de hierarquia
            {
                type: "category", // Tipo category para indicar que esta pasta possuí hierarquia
                label: "Ajuda", 
                // Páginas filhas da página Ajuda
                items: [
                    "guias-avancados/ajuda/boas-praticas",
                    "guias-avancados/ajuda/ajuda",
                ],
            },
        ],
    },
]

export default customsidebar;

Resumindo

Sempre que você deseja criar uma página sem hierarquia, utilize o trecho de código:

    {
        type: "doc",
        id: "introducao", // ID do documento
        label: "Introdução" // Sem o metadado Title, este será o nome do documento no menu lateral
    }

Já para páginas com hierarquia, primeiro crie a sua pasta e coloque as páginas desejadas, então utilize um dos dois trechos de código:

A página pai possuí conteúdo:

    {
        type: "category", // Tipo category para indicar que esta pasta possuí hierarquia
        label: "Guias", // Sem o metadado Title, este será o nome do documento no menu lateral

        // Aqui incluímos o parâmetro link, para indicar que a pasta terá conteúdo
        link: { 
            type: 'doc', 
            id: 'guias/guias' // ID do documento que será utilizado como conteúdo na página pai
        },

        // Páginas filhas
        items: [
            "guias/guia1",
            "guias/guia2",
        ],
    },

A página pai é apenas um agrupador e não possuí conteúdo:

    {
        type: "category", // Tipo category para indicar que esta pasta possuí hierarquia
        label: "Guias", // Este será o nome do documento no menu lateral
        // Páginas filhas
        items: [
            "guias/guia1",
            "guias/guia2",
        ],
    },

dica

Lembre-se, você poderá criar infinitas hierarquias. Basta colocar novas estruturas do tipo Category dentro dos items da página pai.