Последняя версия с сервера прошлого разработчика

resources/js/Shared/Messanger/BoardTop.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <div class="gradient-profile relative border-b border-indigo-300">
+      <user-banner class="h-24 xl:h-40 bg-indigo-200" :user="user"
+                   size="hero"
+      />
+    </div>
+
+    <div class="-mt-14 xl:-mt-24 relative xl:container xl:mx-auto px-5 xl:px-10">
+      <div class="flex flex-col md:flex-row">
+        <div class="flex-shrink-0 self-center md:self-start md:mr-6 2xl:mr-10">
+          <user-avatar :user="user" size="medium"
+                       class="shadow-classic object-cover w-28 h-28 text-xl xl:w-48 xl:h-48 xl:text-3xl"
+          />
+        </div>
+        <div class="w-full">
+          <div class="h-12 xl:h-24 hidden md:block"></div>
+          <div class="mt-2 ">
+            <div class="-mx-2 -my-2 lg:-mx-4 lg:-my-4 flex flex-col md:flex-row flex-wrap xl:flex-nowrap justify-between">
+              <div class="max-w-[300px] text-center md:text-left mx-2 my-2 lg:mx-4 lg:my-4 flex flex-shrink-0 flex-col self-center md:self-start">
+                <inertia-link :href="route('profile.user', user.username)" class="text-lg xl:text-2xl block font-semibold text-white">
+                  {{ user.name }}
+                </inertia-link>
+                <h2 class="text-sm xl:text-base text-gray-light">
+                  @{{ user.username }}
+                </h2>
+              </div>
+              <div class="mx-2 my-2 lg:mx-4 lg:my-4 flex flex-col items-end">
+                <slot name="menu" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import UserAvatar from '@/Shared/Misc/UserAvatar.vue'
+import UserBanner from '@/Shared/Misc/UserBanner.vue'
+
+export default {
+    components:{
+        UserAvatar,
+        UserBanner
+    },
+    props: {
+        user: {
+            type: Object,
+            default: () => {}
+        }
+    }
+}
+
+</script>