99 lines
5.3 KiB
Vue
Executable File
99 lines
5.3 KiB
Vue
Executable File
<template>
|
|
<div class="mt-12 xl:container xl:mx-auto px-2 md:px-3 buttons-filter-line">
|
|
<div class="flex">
|
|
<div class="flex flex-wrap -mx-2 -my-2 lg:-mx-4 lg:-my-4">
|
|
<inertia-link :href="route('profile.user', user.username)"
|
|
:class="[$page.component === 'Profile/Index' ? 'shadow-classic2 bg-orange text-white' : 'shadow-classic text-gray bg-indigo-200 hover:bg-orange hover:text-white', 'mx-2 my-2 lg:mx-4 lg:my-4 py-3 px-6 xl:px-10 transition inline-flex items-center justify-center text-sm xl:text-base rounded-md focus:outline-none']"
|
|
>
|
|
<svg class="-ml-1 mr-2 h-4 w-4 md:h-5 md:w-5 flex-shrink-0" fill="currentColor"
|
|
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
|
|
><path fill-rule="evenodd" clip-rule="evenodd"
|
|
d="M4.167 3.333a.833.833 0 00-.833.834v11.666c0 .46.373.834.833.834h11.667c.46 0 .833-.373.833-.834V4.167a.833.833 0 00-.833-.834H4.167zm-2.5.834a2.5 2.5 0 012.5-2.5h11.667a2.5 2.5 0 012.5 2.5v11.666a2.5 2.5 0 01-2.5 2.5H4.167a2.5 2.5 0 01-2.5-2.5V4.167z"
|
|
/><path fill-rule="evenodd" clip-rule="evenodd"
|
|
d="M1.667 7.5c0-.46.373-.833.833-.833h15a.833.833 0 110 1.666h-15a.833.833 0 01-.833-.833z"
|
|
/><path fill-rule="evenodd" clip-rule="evenodd"
|
|
d="M7.5 6.667c.46 0 .834.373.834.833v10a.833.833 0 01-1.667 0v-10c0-.46.373-.833.833-.833z"
|
|
/></svg>
|
|
Публикации
|
|
</inertia-link>
|
|
|
|
<inertia-link :href="route('profile.readers', user.username)"
|
|
:class="[$page.component === 'Profile/Readers' ? 'shadow-classic2 bg-orange text-white' : 'shadow-classic text-gray bg-indigo-200 hover:bg-orange hover:text-white', 'mx-2 my-2 lg:mx-4 lg:my-4 py-3 px-6 xl:px-10 transition inline-flex items-center justify-center text-sm xl:text-base rounded-md focus:outline-none']"
|
|
>
|
|
<svg class="-ml-1 mr-2 h-4 w-4 md:h-5 md:w-5 flex-shrink-0" 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="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7"
|
|
r="4"
|
|
></circle><polyline points="17 11 19 13 23 9"></polyline></svg>
|
|
Подписки
|
|
</inertia-link>
|
|
|
|
<inertia-link :href="route('profile.subs', user.username)"
|
|
:class="[$page.component === 'Profile/Subs' ? 'shadow-classic2 bg-orange text-white' : 'shadow-classic text-gray bg-indigo-200 hover:bg-orange hover:text-white', 'mx-2 my-2 lg:mx-4 lg:my-4 py-3 px-6 xl:px-10 transition inline-flex items-center justify-center text-sm xl:text-base rounded-md focus:outline-none']"
|
|
>
|
|
<svg class="-ml-1 mr-2 h-4 w-4 md:h-5 md:w-5 flex-shrink-0" 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="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7"
|
|
r="4"
|
|
></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
|
|
Подписчики
|
|
</inertia-link>
|
|
</div>
|
|
|
|
<div v-if="user.is_auth_user" class="ml-auto">
|
|
<dropdown-menu>
|
|
<MenuItems class="origin-top-right absolute right-0 mt-2 w-64 bg-indigo-300 shadow-lg max-h-60 rounded-md text-base ring-1 ring-indigo-200 overflow-auto focus:outline-none">
|
|
<MenuItem>
|
|
<inertia-link :href="route('videos.create')" class="group flex items-center px-4 py-2 text-base hover:bg-indigo-200 text-gray-light">
|
|
<VideoCameraIcon class="mr-3 h-5 w-5 text-gray-400 group-hover:text-orange" aria-hidden="true" />
|
|
Загрузить видео
|
|
</inertia-link>
|
|
</MenuItem>
|
|
<MenuItem>
|
|
<inertia-link :href="route('images.create')" class="group flex items-center px-4 py-2 text-base hover:bg-indigo-200 text-gray-light">
|
|
<PhotographIcon class="mr-3 h-5 w-5 text-gray-400 group-hover:text-orange" aria-hidden="true" />
|
|
Загрузить ие
|
|
</inertia-link>
|
|
</MenuItem>
|
|
<MenuItem>
|
|
<inertia-link :href="route('musics.create')" class="group flex items-center px-4 py-2 text-base hover:bg-indigo-200 text-gray-light">
|
|
<MusicNoteIcon class="mr-3 h-5 w-5 text-gray-400 group-hover:text-orange" aria-hidden="true" />
|
|
Загрузить музыку
|
|
</inertia-link>
|
|
</MenuItem>
|
|
</MenuItems>
|
|
</dropdown-menu>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
PhotographIcon,
|
|
VideoCameraIcon,
|
|
MusicNoteIcon,
|
|
} from '@heroicons/vue/solid'
|
|
import { MenuItem, MenuItems } from '@headlessui/vue'
|
|
|
|
import DropdownMenu from '@/Shared/Form/DropdownMenu.vue'
|
|
|
|
export default {
|
|
components: {
|
|
DropdownMenu,
|
|
MenuItem,
|
|
MenuItems,
|
|
PhotographIcon,
|
|
MusicNoteIcon,
|
|
VideoCameraIcon,
|
|
},
|
|
props: {
|
|
user: Object,
|
|
},
|
|
}
|
|
</script>
|