From b66a6f6e7b51bb3a4ef7875d08a7a72b84bbdec5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9?=
 <noreply@anthropic.com>
Date: Tue, 7 Jul 2026 19:42:50 +0300
Subject: [PATCH] =?UTF-8?q?feat(=D0=BF=D0=BE=D1=80=D1=82=D0=B0=D0=BB-?=
 =?UTF-8?q?=D0=BC=D0=BE=D0=B1=D0=B8=D0=BB=D0=BA=D0=B0):=20=D0=BF=D0=BB?=
 =?UTF-8?q?=D0=B0=D0=BD=D1=88=D0=B5=D1=82=20=E2=80=94=20=D1=83=D0=B7=D0=BA?=
 =?UTF-8?q?=D0=B0=D1=8F=20=D0=BA=D0=BE=D0=BB=D0=BE=D0=BD=D0=BA=D0=B0-?=
 =?UTF-8?q?=D0=B8=D0=BA=D0=BE=D0=BD=D0=BA=D0=B8=20(rail)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

На планшете (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>
---
 .../js/components/layout/AppSidebar.vue       | 34 +++++++++++++++++++
 .../js/components/layout/AppTopbar.vue        | 16 +++++++--
 app/resources/js/layouts/AppLayout.vue        | 10 +++---
 3 files changed, 54 insertions(+), 6 deletions(-)

diff --git a/app/resources/js/components/layout/AppSidebar.vue b/app/resources/js/components/layout/AppSidebar.vue
index 3dbf3d8d..b8062528 100644
--- a/app/resources/js/components/layout/AppSidebar.vue
+++ b/app/resources/js/components/layout/AppSidebar.vue
@@ -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;
diff --git a/app/resources/js/components/layout/AppTopbar.vue b/app/resources/js/components/layout/AppTopbar.vue
index 6146793c..3749c3bc 100644
--- a/app/resources/js/components/layout/AppTopbar.vue
+++ b/app/resources/js/components/layout/AppTopbar.vue
@@ -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;
 }
diff --git a/app/resources/js/layouts/AppLayout.vue b/app/resources/js/layouts/AppLayout.vue
index d2ddeadd..a4d2221b 100644
--- a/app/resources/js/layouts/AppLayout.vue
+++ b/app/resources/js/layouts/AppLayout.vue
@@ -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;