385 lines
13 KiB
Vue
385 lines
13 KiB
Vue
<template>
|
|
<header class="w-full sticky top-0 z-[100]">
|
|
<div class="relative z-10 bg-orange shadow-xl">
|
|
<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="/image/logotype.svg" alt="" />
|
|
</inertia-link >
|
|
|
|
<audio-player />
|
|
|
|
<div class="col-span-4 h-12 hidden md:flex">
|
|
<form class="main-search w-full flex md:ml-0" action="#" method="GET">
|
|
<label for="search_field" class="sr-only">Поиск контента</label>
|
|
<div
|
|
class="relative w-full text-gray-400 focus-within:text-gray-600"
|
|
>
|
|
<input
|
|
name="search_field"
|
|
id="search_field"
|
|
class="
|
|
h-full
|
|
w-full
|
|
rounded-md
|
|
border-transparent
|
|
py-2
|
|
pr-11
|
|
pl-4
|
|
text-base
|
|
bg-orange-dark
|
|
text-white
|
|
placeholder-gray
|
|
focus:border-transparent
|
|
focus:outline-none
|
|
focus:ring-2 focus:ring-orange-dark
|
|
"
|
|
placeholder="Глобальный поиск..."
|
|
type="search"
|
|
/>
|
|
|
|
<div
|
|
class="
|
|
pointer-events-none
|
|
absolute
|
|
inset-y-0
|
|
right-4
|
|
flex
|
|
items-center
|
|
text-gray
|
|
"
|
|
>
|
|
<svg
|
|
class="flex-shrink-0 h-6 w-6"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M11 4a7 7 0 100 14 7 7 0 000-14zm-9 7a9 9 0 1118 0 9 9 0 01-18 0z"
|
|
/>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M15.943 15.943a1 1 0 011.414 0l4.35 4.35a1 1 0 01-1.414 1.414l-4.35-4.35a1 1 0 010-1.414z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<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
|
|
"
|
|
>
|
|
<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
|
|
class="
|
|
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 v-slot: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>
|
|
<a href="#"><span class="text-xs rounded-full mr-1">(5)</span> Сообщения</a>
|
|
</li>
|
|
<li>
|
|
<inertia-link :href="route('list.images')">Изображения</inertia-link>
|
|
</li>
|
|
<li>
|
|
<inertia-link :href="route('list.videos')">Видео</inertia-link>
|
|
</li>
|
|
<li>
|
|
<inertia-link :href="route('list.musics')">Музыка</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-lg" />
|
|
</inertia-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
|
|
<div class=" hidden w-[48rem] z-50 main-search-list shadow-classic rounded-md bg-indigo-200 overflow-hidden " >
|
|
<div class="">
|
|
<div data-simplebar class="overflow-auto max-h-72">
|
|
<div class="text-gray-light divide-y divide-indigo-300">
|
|
<!-- s -->
|
|
<div class="flex cursor-pointer items-center p-3 hover:bg-indigo-300">
|
|
<div class="flex-shrink-0 mr-5">
|
|
<img
|
|
class="object-cover w-10 h-10"
|
|
src="/image/user_card2.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div class="flex-1">
|
|
Lorem, ipsum dolor sit amet consectetur
|
|
<mark class="text-orange bg-transparent">consectetur</mark> asdasd
|
|
....
|
|
</div>
|
|
<div class="ml-5 flex-shrink-0">
|
|
<svg class="drop-shadow-custom w-5 h-5">
|
|
<use xlink:href="#musicmark"></use>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<!-- e -->
|
|
<!-- s -->
|
|
<div class="flex cursor-pointer items-center p-3 hover:bg-indigo-300">
|
|
<div class="flex-shrink-0 mr-5">
|
|
<img
|
|
class="object-cover w-10 h-10"
|
|
src="/image/user_card2.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div class="flex-1">
|
|
<mark class="text-orange bg-transparent">consectetur</mark> Lorem,
|
|
ipsum dolor sit amet consectetur asdasd ....
|
|
</div>
|
|
<div class="ml-5 flex-shrink-0">
|
|
<svg class="drop-shadow-custom w-5 h-5">
|
|
<use xlink:href="#filmmark"></use>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<!-- e -->
|
|
<!-- s -->
|
|
<div class="flex cursor-pointer items-center p-3 hover:bg-indigo-300">
|
|
<div class="flex-shrink-0 mr-5">
|
|
<img
|
|
class="object-cover w-10 h-10"
|
|
src="/image/user_card2.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div class="flex-1">
|
|
<mark class="text-orange bg-transparent">consectetur</mark> Lorem,
|
|
ipsum dolor sit amet consectetur asdasd ....
|
|
</div>
|
|
<div class="ml-5 flex-shrink-0">
|
|
<svg class="drop-shadow-custom w-5 h-5">
|
|
<use xlink:href="#filmmark"></use>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<!-- e -->
|
|
<!-- s -->
|
|
<div class="flex cursor-pointer items-center p-3 hover:bg-indigo-300">
|
|
<div class="flex-shrink-0 mr-5">
|
|
<img
|
|
class="object-cover w-10 h-10"
|
|
src="/image/user_card2.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div class="flex-1">
|
|
<mark class="text-orange bg-transparent">consectetur</mark> Lorem,
|
|
ipsum dolor sit amet consectetur asdasd ....
|
|
</div>
|
|
<div class="ml-5 flex-shrink-0">
|
|
<svg class="drop-shadow-custom w-5 h-5">
|
|
<use xlink:href="#filmmark"></use>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<!-- e -->
|
|
<!-- s -->
|
|
<div class="flex cursor-pointer items-center p-3 hover:bg-indigo-300">
|
|
<div class="flex-shrink-0 mr-5">
|
|
<img
|
|
class="object-cover w-10 h-10"
|
|
src="/image/user_card2.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div class="flex-1">
|
|
<mark class="text-orange bg-transparent">consectetur</mark> Lorem,
|
|
ipsum dolor sit amet consectetur asdasd ....
|
|
</div>
|
|
<div class="ml-5 flex-shrink-0">
|
|
<svg class="drop-shadow-custom w-5 h-5">
|
|
<use xlink:href="#filmmark"></use>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<!-- e -->
|
|
<!-- s -->
|
|
<div class="flex cursor-pointer items-center p-3 hover:bg-indigo-300">
|
|
<div class="flex-shrink-0 mr-5">
|
|
<img
|
|
class="object-cover w-10 h-10"
|
|
src="/image/user_card2.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div class="flex-1">
|
|
<mark class="text-orange bg-transparent">consectetur</mark> Lorem,
|
|
ipsum dolor sit amet consectetur asdasd ....
|
|
</div>
|
|
<div class="ml-5 flex-shrink-0">
|
|
<svg class="drop-shadow-custom w-5 h-5">
|
|
<use xlink:href="#filmmark"></use>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<!-- e -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Dropdown from '@/Shared/Form/Dropdown'
|
|
import UserAvatar from '@/Shared/Misc/UserAvatar'
|
|
import AudioPlayer from '@/Shared/AudioPlayer'
|
|
export default {
|
|
components: {
|
|
AudioPlayer,
|
|
UserAvatar,
|
|
Dropdown,
|
|
}
|
|
}
|
|
</script>
|