site/resources/js/Shared/LayoutParts/HeaderBar.vue

<template>
  <header class="main-header-wrp w-full sticky top-0 z-[100]">
    <div class="relative z-10 bg-orange shadow-xl">
      <!-- contain-content -->
      <div
        class="

          grid grid-cols-12
          items-center
          pt-2.5
          pb-2.5
          px-4
          sm:px-6
          md:space-x-5
          lg:space-x-10
        "
      >
        <inertia-link :href="route('dashboard')" class="col-span-1 block flex-shrink-0">
          <div class="block md:hidden font-bold text-indigo-300 text-2xl">
            T
          </div>
          <img class="hidden md:block" :src="setLogo()"
               alt=""
          />
        </inertia-link>

        <audio-player />
        <search-header ref="searchHeader" />

        <div
          class="
            col-span-4
            md:col-span-2
            lg:col-span-4
            flex
            items-center
            justify-end
            space-x-2
            sm:ml-6
            sm:space-x-6
          "
        >
          <inertia-link :href="route('setting.money')" class="hidden lg:block default text-sm text-white">
            Баланс: {{ $page.props.balance }}
          </inertia-link>

          <button
            type="button"
            class="
              flex
              md:hidden
              p-1
              rounded-full
              items-center
              justify-center
              text-white
              focus:outline-none
            "
            @click="showSearch"
          >
            <svg
              class="w-5 h-5 md:h-6 md:w-6"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <circle cx="11" cy="11"
                      r="8"
              ></circle>
              <line x1="21" y1="21"
                    x2="16.65" y2="16.65"
              ></line>
            </svg>
          </button>

          <div class="relative">
            <div
              v-if="$page.props.is_notify"
              class="
                animate-ping
                absolute
                top-0
                right-1
                w-2
                h-2
                md:w-3
                md:h-3
                bg-pink
                rounded-full
              "
            ></div>
            <inertia-link
              :href="route('setting.notify')"
              class="
                flex
                p-1
                rounded-full
                items-center
                justify-center
                text-white
                focus:outline-none
              "
            >
              <svg
                class="w-5 h-5 md:h-6 md:w-6"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
                <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
              </svg>
            </inertia-link>
          </div>

          <dropdown class="flex md:hidden user-menu h-12 w-12 rounded-full items-center justify-center focus:outline-none" placement="bottom-start">
            <svg class="h-6 w-6 text-white" aria-hidden="true"
                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                 fill="none" stroke="currentColor"
                 stroke-width="2" stroke-linecap="round"
                 stroke-linejoin="round"
            > <line x1="3" y1="12"
                    x2="21" y2="12"
            ></line> <line x1="3" y1="6"
                           x2="21" y2="6"
            ></line> <line x1="3" y1="18"
                           x2="21" y2="18"
            ></line> </svg>
            <template #dropdown>
              <div class="mobile-user-menu z-50 bg-orange-dark rounded-b-lg">
                <div
                  class="absolute z-50 right-0 top-[-16px] mr-[20px] sm:mr-[20px]"
                >
                </div>
                <ul class="p-6 text-white space-y-6">
                  <li>
                    <inertia-link :href="route('setting.money')">
                      Баланс: {{ $page.props.balance }}
                    </inertia-link>
                  </li>
                  <li>
                    <inertia-link :href="route('profile.user', $page.props.auth.user.username)">
                      Профиль
                    </inertia-link>
                  </li>
                  <li>
                    <inertia-link :href="route('feeds.layoutsidebar')">
                      Новости
                    </inertia-link>
                  </li>
                  <li>
                    <inertia-link :href="route('messenger.index')">
                      <!-- <span class="text-xs rounded-full mr-1"></span> -->
                      Сообщения
                    </inertia-link>
                  </li>
                  <li>
                    <inertia-link :href="route('images.index')">
                      Изображения
                    </inertia-link>
                  </li>
                  <li>
                    <inertia-link :href="route('videos.index')">
                      Видео
                    </inertia-link>
                  </li>
                  <li>
                    <inertia-link :href="route('musics.index')">
                      Музыка
                    </inertia-link>
                  </li>
                  <li>
                    <inertia-link :href="route('users.index')">
                      Пользователи
                    </inertia-link>
                  </li>
                  <li>
                    <inertia-link :href="route('setting.index')">
                      Настройки
                    </inertia-link>
                  </li>
                  <li>
                    <inertia-link as="button" :href="route('logout')"
                                  method="delete"
                    >
                      Выйти
                    </inertia-link>
                  </li>
                </ul>
              </div>
            </template>
          </dropdown>


          <div class="hidden md:block relative flex-shrink-0">
            <inertia-link
              :href="route('profile.user', $page.props.auth.user.username)"
              class="
                bg-white
                rounded-full
                flex
                text-sm
                focus:outline-none
                focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500
              "
            >
              <user-avatar :user="$page.props.auth.user" size="small"
                           class="w-9 h-9 md:h-12 md:w-12 text-base"
              />
            </inertia-link>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

<script>
import Dropdown from '@/Shared/Form/Dropdown.vue'
import UserAvatar from '@/Shared/Misc/UserAvatar.vue'
import AudioPlayer from '@/Shared/AudioPlayer.vue'
import SearchHeader from '@/Shared/Search/SearchHeader.vue'

export default {
    components: {
        AudioPlayer,
        UserAvatar,
        Dropdown,
        SearchHeader,
    },

    methods: {
        showSearch(){
            this.$refs.searchHeader.openModal()
        },
        setLogo() {
            return '/image/logotype.svg'
        },
    }

}
</script>