Разработка системы управления меню сайта

Разработка системы управления меню сайта

Система управления меню позволяет администраторам сайта изменять структуру навигации без участия разработчиков. Важна для сайтов с динамическим контентом: новые разделы, сезонные изменения, A/B-тесты навигации.

Модель данных

menus (
  id, name, slug, locale
  -- 'main_menu', 'footer_menu', 'mobile_menu'
)

menu_items (
  id, menu_id, parent_id, order,
  type: link | page | category | custom,
  label, url,
  page_id,     -- если type=page
  category_id, -- если type=category
  target: _self | _blank,
  icon,
  is_visible, css_class,
  attributes (jsonb)  -- data-атрибуты, id
)

Drag-and-drop интерфейс

Для управления вложенной структурой — библиотека @dnd-kit/sortable или react-sortable-tree:

import { DndContext, closestCenter } from '@dnd-kit/core';
import { SortableContext, arrayMove, verticalListSortingStrategy } from '@dnd-kit/sortable';

function MenuEditor({ items, onReorder }) {
    const [treeItems, setTreeItems] = useState(buildTree(items));

    const handleDragEnd = ({ active, over }) => {
        if (!over || active.id === over.id) return;
        const oldIndex = treeItems.findIndex(i => i.id === active.id);
        const newIndex = treeItems.findIndex(i => i.id === over.id);
        const reordered = arrayMove(treeItems, oldIndex, newIndex);
        setTreeItems(reordered);
        onReorder(reordered.map(({ id }, order) => ({ id, order })));
    };

    return (
        <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
            <SortableContext items={treeItems} strategy={verticalListSortingStrategy}>
                {treeItems.map(item => (
                    <SortableMenuItem key={item.id} item={item} />
                ))}
            </SortableContext>
        </DndContext>
    );
}

Серверная часть: получение меню с кешированием

class MenuService
{
    public function getMenu(string $slug, string $locale): array
    {
        return Cache::remember("menu:{$slug}:{$locale}", 3600, function () use ($slug, $locale) {
            $menu = Menu::where('slug', $slug)->where('locale', $locale)->first();
            if (!$menu) return [];

            return $this->buildTree(
                $menu->items()
                    ->where('is_visible', true)
                    ->orderBy('order')
                    ->get()
                    ->toArray()
            );
        });
    }

    private function buildTree(array $items, ?int $parentId = null): array
    {
        return collect($items)
            ->where('parent_id', $parentId)
            ->map(fn($item) => array_merge($item, [
                'children' => $this->buildTree($items, $item['id'])
            ]))
            ->values()
            ->toArray();
    }
}

Инвалидация кеша

При любом изменении меню — сбросить кеш:

Menu::observe(MenuObserver::class);

class MenuObserver
{
    public function saved(Menu $menu): void
    {
        Cache::forget("menu:{$menu->slug}:{$menu->locale}");
    }
}

Типы пунктов меню

Для типов page и category URL генерируется автоматически при изменении slug страницы/категории.

Срок разработки: 2–3 дня для системы с drag-and-drop и несколькими типами пунктов.