151 lines
6.2 KiB
Vue
151 lines
6.2 KiB
Vue
<template>
|
|
<div class="flex justify-between pb-4 items-center">
|
|
<div class="flex w-full sm:items-center gap-x-5 sm:gap-x-3">
|
|
<div class="grow">
|
|
<div class="grid sm:flex sm:justify-between sm:items-center gap-2">
|
|
<BreadcrumbsWrapper>
|
|
<li class="text-sm">
|
|
<Link :href="route('index')" class="flex items-center text-gray-500 hover:text-primary-hover" href="/">
|
|
<BasicIcon class="size-5" name="home" />
|
|
</Link>
|
|
</li>
|
|
<li v-if="breadcrumbs?.mainSection.data.title" class="text-sm">
|
|
<span class="flex items-center text-gray-500 hover:text-primary-hover cursor-pointer" @click.prevent="handleSectionClick(breadcrumbs.mainSection)">
|
|
<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
|
|
width="16" height="16"
|
|
viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
{{ TEXT_LIMIT(breadcrumbs.mainSection.data.title, 25) }}
|
|
</span>
|
|
</li>
|
|
<li v-if="breadcrumbs?.subSection.data.title" class="text-sm">
|
|
<span class="flex items-center text-gray-500 hover:text-primary-hover cursor-pointer" @click.prevent="handleSubSectionClick(breadcrumbs.mainSection, breadcrumbs.subSection)">
|
|
<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
|
|
width="16" height="16"
|
|
viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
{{ TEXT_LIMIT(breadcrumbs.subSection.data.title, 25) }}
|
|
</span>
|
|
</li>
|
|
<li class="text-sm">
|
|
<Link :href="route('client.post.index')" class="flex items-center text-gray-500 hover:text-primary-hover">
|
|
<svg class="flex-shrink-0 mx-2 overflow-visible h-2.5 w-2.5 text-gray-400"
|
|
width="16" height="16"
|
|
viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
{{ TEXT_LIMIT('Новости', 30) }}
|
|
</Link>
|
|
</li>
|
|
</BreadcrumbsWrapper>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {Link} from "@inertiajs/vue3";
|
|
import BasicIcon from "@/componentss/ui/icons/BasicIcon.vue";
|
|
import BreadcrumbsWrapper from "@/componentss/ui/wrappers/BreadcrumbsWrapper.vue";
|
|
import {helpers} from "@/mixins/Helpers.js";
|
|
export default {
|
|
mixins: [helpers],
|
|
name: "PostListBreadcrumbs",
|
|
components: {BreadcrumbsWrapper, BasicIcon, Link},
|
|
methods: {
|
|
isMobileDevice() {
|
|
return window.innerWidth < 1024; // Задайте порог для мобильных устройств
|
|
},
|
|
handleSectionClick(breadcrumb) {
|
|
if (this.isMobileDevice()) {
|
|
this.toggleMobileNavSection(breadcrumb)
|
|
} else {
|
|
this.toggleDesktopNavSection(breadcrumb)
|
|
}
|
|
},
|
|
handleSubSectionClick(mainSectionBreadcrumb, breadcrumb) {
|
|
if (this.isMobileDevice()) {
|
|
this.toggleMobileNavSubSection(mainSectionBreadcrumb, breadcrumb)
|
|
} else {
|
|
this.toggleDesktopNavSubSection(mainSectionBreadcrumb, breadcrumb)
|
|
}
|
|
},
|
|
highlightNavItem(item) {
|
|
item.classList.add('animate-pulse');
|
|
|
|
setTimeout(() => {
|
|
item.classList.remove('animate-pulse');
|
|
}, 4000);
|
|
},
|
|
openMobileNavMenu() {
|
|
const openMobileNavBtn = document.getElementById('open-mobile-btn');
|
|
openMobileNavBtn.click();
|
|
},
|
|
toggleMobileNavSubSection(mainSectionBreadcrumb, breadcrumb) {
|
|
this.openMobileNavMenu()
|
|
const mobileNavElement = document.getElementById('open-mobile-nav');
|
|
const sectionNavBlock = mobileNavElement.querySelector('#nav-section-accordion-' + mainSectionBreadcrumb.data.slug);
|
|
const sectionNavBlockBtn = mobileNavElement.querySelector('#nav-section-accordion-btn-' + mainSectionBreadcrumb.data.slug);
|
|
if (!sectionNavBlock.classList.contains('active')) {
|
|
sectionNavBlockBtn.click()
|
|
}
|
|
const subSectionNavBlock = mobileNavElement.querySelector('#nav-sub-section-accordion-' + breadcrumb.data.slug);
|
|
const subSectionNavBlockBtn = mobileNavElement.querySelector('#nav-sub-section-accordion-btn-' + breadcrumb.data.slug);
|
|
if (subSectionNavBlock.classList.contains('active')) {
|
|
subSectionNavBlockBtn.click()
|
|
}
|
|
|
|
this.highlightNavItem(subSectionNavBlock)
|
|
},
|
|
toggleMobileNavSection(breadcrumb) {
|
|
const mobileNavElement = document.getElementById('open-mobile-nav');
|
|
const sectionNavBlock = mobileNavElement.querySelector('#nav-section-accordion-' + breadcrumb.data.slug);
|
|
const sectionNavBlockBtn = mobileNavElement.querySelector('#nav-section-accordion-btn-' + breadcrumb.data.slug);
|
|
if (sectionNavBlock.classList.contains('active')) {
|
|
sectionNavBlockBtn.click()
|
|
}
|
|
this.openMobileNavMenu()
|
|
|
|
this.highlightNavItem(sectionNavBlock)
|
|
|
|
},
|
|
toggleDesktopNavSubSection(mainSectionBreadcrumb, breadcrumb) {
|
|
const desktopNavElement = document.getElementById('desktop-nav');
|
|
const sectionNavTitle = desktopNavElement.querySelector('#nav-sub-section-title-' + breadcrumb.data.slug);
|
|
const sectionNavBlockBtn = desktopNavElement.querySelector('#nav-section-btn-' + mainSectionBreadcrumb.data.slug);
|
|
sectionNavBlockBtn.click()
|
|
this.highlightNavItem(sectionNavTitle)
|
|
},
|
|
toggleDesktopNavSection(breadcrumb) {
|
|
const desktopNavElement = document.getElementById('desktop-nav');
|
|
const sectionNavBlock = desktopNavElement.querySelector('#nav-section-menu-' + breadcrumb.data.slug);
|
|
const sectionNavBlockBtn = desktopNavElement.querySelector('#nav-section-btn-' + breadcrumb.data.slug);
|
|
sectionNavBlockBtn.click()
|
|
// this.highlightNavItem(sectionNavBlock)
|
|
},
|
|
|
|
|
|
},
|
|
|
|
props: {
|
|
breadcrumbs: {
|
|
type: Object,
|
|
},
|
|
postTitle: {
|
|
type: String,
|
|
},
|
|
},
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
|
</style> |