Layouts

Проект использует три лейаута в app/layouts/. Все лейауты включают общий AppHeader.

default

Файл: app/layouts/default.vue

Основной лейаут для публичных страниц (главная, каталог, карточка товара, профиль продавца).

Структура:

• min-h-screen flex flex-col --- растягивает на всю высоту экрана.
• AppHeader --- шапка.
• <main class="flex-1"> --- контент страницы (занимает всё доступное пространство).
• AppFooter --- полноценный 4-колоночный footer (виджет app/widgets/footer/ui/AppFooter.vue).

┌──────────────────────────────┐
│          AppHeader           │
├──────────────────────────────┤
│                              │
│        <slot /> (main)       │
│                              │
├──────────────────────────────┤
│         AppFooter            │
│  Brand | Покупат | Продав |  │
│         | Компания           │
│  ────────────────────────    │
│        © 2026 Partizap       │
└──────────────────────────────┘

cabinet

Файл: app/layouts/cabinet.vue

Лейаут для личного кабинета пользователя (/cabinet/**). SSR отключён (routeRules: { '/cabinet/**': { ssr: false } }).

Структура:

• AppHeader --- шапка.
• Контентная область: container mx-auto px-4 py-6 flex gap-6.
• Desktop sidebar (hidden md:block w-56 shrink-0) --- навигация: Мои объявления, Избранное, Настройки.
• Контент (flex-1 min-w-0) --- страница.
• AppFooter --- общий footer.

Sidebar скрывается на мобильных (hidden md:block), мобильная навигация доступна через USlideover в хедере.

┌──────────────────────────────┐
│          AppHeader           │
├────────┬─────────────────────┤
│ Sidebar│                     │
│ (md+)  │    <slot />         │
│  w-56  │                     │
├────────┴─────────────────────┤
│         AppFooter            │
└──────────────────────────────┘

admin

Файл: app/layouts/admin.vue

Лейаут для административной панели (/admin/**). SSR отключён.

Структура:

• min-h-screen flex flex-col --- растягивает на всю высоту экрана.
• AppHeader --- шапка.
• Контентная область: flex-1 container mx-auto px-4 py-6 flex gap-6.
• Desktop sidebar (hidden md:block w-56 shrink-0) --- навигация: Дашборд, Товары, Пользователи, Справочники.
• Контент (flex-1 min-w-0) --- страница.
• AppFooter --- общий footer.

┌──────────────────────────────┐
│          AppHeader           │
├────────┬─────────────────────┤
│ Sidebar│                     │
│ (md+)  │    <slot />         │
│  w-56  │                     │
├────────┴─────────────────────┤
│         AppFooter            │
└──────────────────────────────┘

Контейнеры

container-wide

Кастомный utility-класс, определён в app/assets/styles/tailwind.css:

@utility container-wide {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 1rem;

  @media (min-width: 640px)  { padding-inline: 1.5rem; }
  @media (min-width: 1024px) { padding-inline: 2rem; }
}

Используется в хедере, футере и контентных страницах. Максимальная ширина --- 1280px (ориентир: avito.ru).

container mx-auto

Стандартный Tailwind-контейнер. Используется в лейаутах cabinet и admin для контентной области.

Сетка каталога

Кастомный utility-класс grid-catalog в app/assets/css/main.css:

@utility grid-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

Адаптивная сетка: колонки автоматически подстраиваются под ширину контейнера, минимальная ширина колонки --- 260px.

AppFooter

Файл: app/widgets/footer/ui/AppFooter.vue

4-колоночный footer, подключён во все три лейаута.

Колонки:

1. Brand --- PARTIZAP + описание
2. Покупателям --- Каталог, Как купить, Оплата и доставка, Гарантии
3. Продавцам --- Разместить объявление, Тарифы, Правила
4. Компания --- О нас, Контакты, Политика конфиденциальности

Bottom bar --- копирайт.

Адаптивность: 4 колонки (desktop) → 2 колонки (tablet, md) → 1 колонка (mobile, sm).

Стилизация:

• Тёмный фон: var(--ui-bg-inverted), текст: var(--ui-text-inverted)
• Все размеры через SCSS-функцию px-to-rem()
• Все тексты через i18n (footer.*)
• Ссылки ведут на /info/* страницы

Информационные страницы

Статические страницы под /info/, SSR-рендеринг, default layout:

Страница	Роут	Файл
Как купить	/info/how-to-buy	app/pages/info/how-to-buy.vue
Оплата и доставка	/info/payment-delivery	app/pages/info/payment-delivery.vue
Гарантии	/info/guarantees	app/pages/info/guarantees.vue
Тарифы	/info/tariffs	app/pages/info/tariffs.vue
Правила	/info/rules	app/pages/info/rules.vue
О нас	/info/about	app/pages/info/about.vue
Контакты	/info/contacts	app/pages/info/contacts.vue
Политика конфиденциальности	/info/privacy	app/pages/info/privacy.vue

Контент определён через i18n (info.*). Контактная страница имеет карточку с email, телефоном, адресом и часами работы.

Адаптивность

Область	Mobile (< md)	Desktop (>= md)
Навигация	Кнопка-бургер + USlideover	Горизонтальное меню в хедере
Sidebar (cabinet, admin)	Скрыт, навигация через slideover	Фиксированный sidebar 224px (w-56)
Поиск	Иконка поиска, раскрывающаяся строка	Строка поиска в хедере
Кнопка "Продать"	Только иконка +	Иконка + текст
Город	В slideover-меню	Кнопка рядом с лого