Move manager navigation to bottom dock

app/app.vue

@@ -1,15 +1,27 @@
 <script setup lang="ts">
+import { useQuery } from '@vue/apollo-composable';
+import { MeDocument } from '~/composables/graphql/generated';
+import { hasManagerAccess } from '~/utils/roles';
+
 const route = useRoute();
 const isLoginPage = computed(() => route.path === '/login');
+const meQuery = useQuery(MeDocument);
+const hasManagerDock = computed(() => (
+  !isLoginPage.value && hasManagerAccess(meQuery.result.value?.me?.role)
+));
 </script>
 
 <template>
   <div class="lk-shell" data-theme="aqua">
     <UiAppHeader v-if="!isLoginPage" />
-    <main class="mx-auto w-full max-w-[1440px] p-4 pt-[104px] md:p-6 md:pt-[112px] lg:p-8 lg:pt-[118px]">
+    <main
+      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">
         <NuxtPage />
       </div>
     </main>
+    <UiAppManagerDock v-if="hasManagerDock" />
   </div>
 </template>