Move manager tabs above content canvas

app/app.vue

@@ -9,6 +9,72 @@ const meQuery = useQuery(MeDocument);
 const hasManagerDock = computed(() => (
   !isLoginPage.value && hasManagerAccess(meQuery.result.value?.me?.role)
 ));
+
+const managerPageTabs = computed(() => {
+  if (!hasManagerDock.value) {
+    return [];
+  }
+
+  if (route.path === '/clients') {
+    return [
+      {
+        key: 'users',
+        label: 'Пользователи',
+        active: route.query.tab !== 'requests',
+        to: {
+          path: '/clients',
+          query: {
+            ...route.query,
+            tab: 'users',
+          },
+        },
+      },
+      {
+        key: 'requests',
+        label: 'Заявки',
+        active: route.query.tab === 'requests',
+        to: {
+          path: '/clients',
+          query: {
+            ...route.query,
+            tab: 'requests',
+          },
+        },
+      },
+    ];
+  }
+
+  if (route.path === '/bonus-system') {
+    return [
+      {
+        key: 'balances',
+        label: 'Балансы',
+        active: route.query.tab !== 'withdrawals',
+        to: {
+          path: '/bonus-system',
+          query: {
+            ...route.query,
+            tab: 'balances',
+          },
+        },
+      },
+      {
+        key: 'withdrawals',
+        label: 'Заявки на выплату',
+        active: route.query.tab === 'withdrawals',
+        to: {
+          path: '/bonus-system',
+          query: {
+            ...route.query,
+            tab: 'withdrawals',
+          },
+        },
+      },
+    ];
+  }
+
+  return [];
+});
 </script>
 
 <template>
@@ -18,7 +84,21 @@ const hasManagerDock = computed(() => (
       class="mx-auto w-full max-w-[1440px] p-4 pt-[104px] md:p-6 md:pt-[112px] lg:p-8 lg:pt-[118px]"
       :class="hasManagerDock ? 'pb-[116px] md:pb-[128px]' : ''"
     >
-      <div class="lk-content-canvas">
+      <div v-if="managerPageTabs.length" class="lk-page-tabs-shell">
+        <nav class="manager-page-tabs" aria-label="Разделы страницы">
+          <NuxtLink
+            v-for="tab in managerPageTabs"
+            :key="tab.key"
+            :to="tab.to"
+            class="manager-page-tab"
+            :class="{ 'manager-page-tab--active': tab.active }"
+          >
+            {{ tab.label }}
+          </NuxtLink>
+        </nav>
+      </div>
+
+      <div class="lk-content-canvas" :class="{ 'lk-content-canvas--with-tabs': managerPageTabs.length }">
         <NuxtPage />
       </div>
     </main>