Меню

Меню позволяют описать навигационную структуру сайта в простой декларативной форме. Настройка происходит в два этапа:

1. Определение файла menu.md, содержащего структуру меню для каталога, в котором он находится.
2. Использование функции useContent() для получения структуры меню в шаблоне для рендеринга. Подробнее здесь.

Структура файла

Пусть структура файлов выглядит следующим образом:

src/
└── routes/
    └── some/
        ├── menu.md
        ├── layout.tsx
        └── path/
            └── index.tsx  # https://example.com/some/path

Переход по адресу https://example.com/some/path активирует:

• src/routes/some/path/index.tsx - этот компонент будет использоваться для рендеринга содержимого страницы;
• src/routes/some/layout.tsx - этот макет будет использоваться компонентом src/routes/some/path/index.tsx. Внутри макета можно использовать src/routes/some/menu.md для отображения меню;
• src/routes/some/menu.md - этот файл будет использоваться для объявления структуры меню, которая будет отображаться в макете src/routes/some/layout.tsx.

Объявление структуры меню

Используйте файл menu.md для объявления структуры меню.

• Используйте заголовки (#, ## и т.д.) для определения глубины меню
• Используйте маркированный список (-) для определения пунктов меню.

# Документация
 
## Обзор
 
- [Введение](introduction/index.md)
 
## Компоненты
 
- [Основы](/docs/(qwik)/components/basics/index.mdx)

Загрузка структуры меню

Во время выполнения любой компонент может получить меню с помощью хука useContent(). Возвращаемый тип - ContentMenu.

Для приведённого выше примера будет получен ответ:

{
  text: "Документация",
  items: [
    {
      text: "Обзор",
      items: [
        {
          text: "Введение",
          href: "/docs/introduction"
        }
      ],
    },
    {
      text: "Компоненты",
      items: [
        {
          text: "Основы",
          href: "/docs/(qwik)/components/basics"
        }
      ],
    },
  ],
}

Использование ContentMenu в макете

Метод useContent() может быть вызван из любого компонента, который является частью текущего маршрута. Но чаще отображение меню используется в макете (или компоненте, используемом макетом). Пример использования:

import { component$ } from '@builder.io/qwik';
import { useLocation, useContent } from '@builder.io/qwik-city';
export default component$(() => {
  const { menu } = useContent();
  const { url } = useLocation();
 
  return (
    <nav class="menu">
      {menu
        ? menu.items?.map((item) => (
            <>
              <h5>{item.text}</h5>
              <ul>
                {item.items?.map((item) => (
                  <li>
                    <a
                      href={item.href}
                      class={{
                        'is-active': url.pathname === item.href,
                      }}
                    >
                      {item.text}
                    </a>
                  </li>
                ))}
              </ul>
            </>
          ))
        : null}
    </nav>
  );
});