feat(портал-мобилка): планшет — узкая колонка-иконки (rail)
На планшете (600–1279px) сайдбар сжимается в rail: только иконки пунктов, подписи/поиск/бренд-текст скрыты, контент шире. Иконки берутся из mdi, уже заложенных в данные пунктов; на десктопе иконки скрыты — текстовый сайдбар остаётся прежним. Отступы топбара и контента разведены по ярусу (десктоп 232/240px, планшет 64/72px, телефон 0). Гамбургер топбара теперь показывается только на телефоне (d-sm-none) — на планшете/десктопе он не нужен. Тесты каркаса 24/24 зелёные. Проверено на 820 и 1440px; десктоп не изменился. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -113,6 +113,7 @@ defineExpose({ navGroups });
|
||||
:class="{ 'ld-nav-item--active': route.path === item.to }"
|
||||
:data-tour="`nav-${item.to.replace('/', '')}`"
|
||||
>
|
||||
<span class="ld-nav-item__icon"><v-icon :icon="item.icon" size="20" /></span>
|
||||
<span class="ld-nav-item__title">{{ item.title }}</span>
|
||||
<span v-if="item.badge" class="ld-nav-item__new">{{ item.badge }}</span>
|
||||
<span
|
||||
@@ -148,6 +149,39 @@ defineExpose({ navGroups });
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Иконка пункта — по умолчанию скрыта (десктоп остаётся текстовым, как был). */
|
||||
.ld-nav-item__icon {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
/* Планшет: узкая колонка-иконки (rail). Прячем подписи/поиск/бренд-текст, показываем иконки. */
|
||||
.ld-sidebar[data-tier='tablet'] {
|
||||
width: 64px;
|
||||
padding: 20px 8px;
|
||||
}
|
||||
.ld-sidebar[data-tier='tablet'] .ld-sidebar__brand-name,
|
||||
.ld-sidebar[data-tier='tablet'] .ld-cmdk-stub,
|
||||
.ld-sidebar[data-tier='tablet'] .ld-nav-group__eyebrow,
|
||||
.ld-sidebar[data-tier='tablet'] .ld-nav-item__title,
|
||||
.ld-sidebar[data-tier='tablet'] .ld-nav-item__badge,
|
||||
.ld-sidebar[data-tier='tablet'] .ld-nav-item__new {
|
||||
display: none;
|
||||
}
|
||||
.ld-sidebar[data-tier='tablet'] .ld-nav-item__icon {
|
||||
display: inline-flex;
|
||||
}
|
||||
.ld-sidebar[data-tier='tablet'] .ld-nav-item {
|
||||
justify-content: center;
|
||||
padding: 10px 0;
|
||||
gap: 0;
|
||||
}
|
||||
.ld-sidebar[data-tier='tablet'] .ld-sidebar__brand {
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.ld-sidebar__brand {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
|
||||
@@ -89,7 +89,7 @@ async function handleLogout(): Promise<void> {
|
||||
|
||||
<template>
|
||||
<v-app-bar :elevation="0" color="surface" class="app-topbar" :height="56">
|
||||
<v-app-bar-nav-icon class="d-md-none" aria-label="Открыть меню навигации" @click="emit('toggle-drawer')" />
|
||||
<v-app-bar-nav-icon class="d-sm-none" aria-label="Открыть меню навигации" @click="emit('toggle-drawer')" />
|
||||
|
||||
<div class="crumb">
|
||||
<strong>{{ pageTitle }}</strong>
|
||||
@@ -203,9 +203,21 @@ async function handleLogout(): Promise<void> {
|
||||
color: #e8e2d4 !important;
|
||||
}
|
||||
.app-topbar :deep(.v-toolbar__content) {
|
||||
padding-left: 240px;
|
||||
padding-left: 240px; /* десктоп — clear под сайдбар 232px */
|
||||
color: #e8e2d4;
|
||||
}
|
||||
/* Планшет — clear под rail 64px */
|
||||
@media (max-width: 1279.98px) {
|
||||
.app-topbar :deep(.v-toolbar__content) {
|
||||
padding-left: 72px;
|
||||
}
|
||||
}
|
||||
/* Телефон — гамбургер слева, без отступа под сайдбар */
|
||||
@media (max-width: 599.98px) {
|
||||
.app-topbar :deep(.v-toolbar__content) {
|
||||
padding-left: 4px;
|
||||
}
|
||||
}
|
||||
.app-topbar :deep(.v-icon) {
|
||||
color: #b8b0a0;
|
||||
}
|
||||
|
||||
@@ -113,12 +113,14 @@ usePolling(loadBalanceStatus, { intervalMs: POLLING_REMINDERS_INTERVAL_MS, enabl
|
||||
background: #f6f3ec;
|
||||
}
|
||||
/* Отступ под навигацию по ярусу.
|
||||
Десктоп и планшет — полный сайдбар 232px (планшет-rail — отдельная полировка позже).
|
||||
Телефон — сайдбара нет, снизу панель-вкладки (запас под неё padding-bottom). */
|
||||
.app-main[data-tier='desktop'],
|
||||
.app-main[data-tier='tablet'] {
|
||||
Десктоп — полный сайдбар 232px; планшет — узкая колонка-иконки (rail) 64px;
|
||||
телефон — сайдбара нет, снизу панель-вкладки (запас под неё padding-bottom). */
|
||||
.app-main[data-tier='desktop'] {
|
||||
padding-left: 232px;
|
||||
}
|
||||
.app-main[data-tier='tablet'] {
|
||||
padding-left: 64px;
|
||||
}
|
||||
.app-main[data-tier='phone'] {
|
||||
padding-left: 0;
|
||||
padding-bottom: 64px;
|
||||
|
||||
Reference in New Issue
Block a user