Последняя версия с сервера прошлого разработчика
This commit is contained in:
250
resources/js/Shared/LayoutParts/HeaderBar.vue
Executable file
250
resources/js/Shared/LayoutParts/HeaderBar.vue
Executable file
@@ -0,0 +1,250 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user