failj/ntspi-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changes

Browse Source
This commit is contained in:
f4ilji
2024-10-14 14:56:10 +05:00
parent 77b3e3b4b1
commit dd3a0c6ecd
258 changed files with 6548 additions and 1777 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Navbars/DesktopNavBar.vue
+185
View File
@@ -0,0 +1,185 @@
<template>
<div id="desktop-nav"
class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow lg:block">
<div
class="overflow-hidden overflow-y-auto max-h-[75vh] [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300">
<div
class="flex flex-col gap-x-0 mt-5 md:flex-row md:items-center md:justify-end md:gap-x-7 md:mt-0 md:ps-7 md:divide-y-0 md:divide-solid">
<template v-for="section in this.sections.data" :key="section.id">
<div
:id="'nav-section-' + section.slug"
class="hs-dropdown [--strategy:static] md:[--strategy:absolute] [--adaptive:none] md:[--trigger:hover] py-3 md:py-6">
<button
:id="'nav-section-btn-' + section.slug"
type="button" :class="!underSliderHeader ? 'text-white' : 'text-black'"
class="duration-300 flex items-center w-full hover:text-primaryBlue font-medium hs-dropdown-open:mb-4 md:hs-dropdown-open:mb-0">
{{ section.title }}
<svg class="flex-shrink-0 ms-2 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m6 9 6 6 6-6"/>
</svg>
</button>
<div
:id="'nav-section-menu-' + section.slug"
class="hs-dropdown-menu transition-opacity duration-150 md:duration-500 hs-dropdown-open:opacity-100 opacity-0 w-full hidden z-10 top-full start-0 min-w-[15rem] bg-white md:shadow-2xl rounded-lg py-2 md:p-4 before:absolute before:-top-5 before:start-0 before:w-full before:h-5">
<div class="grid px-5 grid-cols-1 md:grid-cols-10">
<template v-for="subsection in section.subSections" :key="subsection.id">
<div :id="'nav-sub-section-block-' + subsection.slug" class="md:col-span-3">
<div class="flex flex-col py-4 px-3 md:px-6">
<div class="space-y-4">
<div class="flex items-center mb-2 gap-x-2">
<span
:id="'nav-sub-section-title-' + subsection.slug"
class="text-xs font-bold uppercase text-gray-800 dark:text-gray-200">
{{ subsection.title }}
</span>
</div>
<template v-for="page in subsection.pages" :key="page.id">
<a :class="{'text-[#135aae] hover:text-gray-800 font-semibold ' : isSameRoute(page.path), 'text-gray-800 hover:text-[#2C6288]' : !isSameRoute(page.path) }"
class="flex items-center gap-x-2"
:href="(page.is_url) ? page.path : route('page.view', page.path) + '/'">
<div class="grow">
<p>{{ page.title }}</p>
</div>
</a>
</template>
</div>
</div>
</div>
</template>
</div>
</div>
</div>
</template>
<a href="#" class="hover:opacity-70 py-3 className">
<svg :class="!underSliderHeader ? 'text-white' : 'text-black'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6 duration-300 md:block hidden">
<path stroke-linecap="round" stroke-linejoin="round"
d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"/>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
</svg>
<span :class="!underSliderHeader ? 'text-white' : 'text-black'" class="md:hidden">Режим для слабовидящих</span>
</a>
<Link :href="route('client.schedule')" class="hover:opacity-70 py-3">
<svg :class="!underSliderHeader ? 'text-white' : 'text-black'" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-6 h-6 duration-300 md:block hidden">
<path stroke-linecap="round" stroke-linejoin="round"
d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z"/>
</svg>
<span :class="!underSliderHeader ? 'text-white' : 'text-black'" class="md:hidden">Расписание</span>
</Link>
<a class="hover:opacity-70 py-3 cursor-pointer" data-hs-overlay="#open-search-modal">
<svg :class="!underSliderHeader ? 'text-white' : 'text-black'" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-6 h-6 duration-300 md:block hidden">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/>
</svg>
<span :class="!underSliderHeader ? 'text-white' : 'text-black'" class="md:hidden">Поиск</span>
</a>
</div>
</div>
</div>
</template>
<script>
import {Link} from "@inertiajs/vue3";
import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
import jsonIcons from "@/Components/other/icons.json";
import {defineAsyncComponent} from "vue";
export default {
name: 'DesktopNavBar',
props: {
sections: {
type: Object,
},
underSliderHeader: {
type: HTMLDivElement,
}
},
data() {
return {
icons: jsonIcons,
}
},
components: {
BaseIcon,
ClientGlobalSearch: defineAsyncComponent(() =>
import('@/Components/ClientGlobalSearch.vue')
),
Link,
},
methods: {
isSameRoute(route) {
if (route === this.$page.props.ziggy.location) {
return true;
}
const currentLocation = this.$page.props.ziggy.location;
const currentUrl = this.$page.props.ziggy.url + '/' + route;
if (currentLocation === currentUrl) {
return true;
}
return false;
},
hasActivePage(section) {
// Проверяем, есть ли активная страница в секции или подсекции
// if (!section || !section.pages) return false; // Проверка на наличие section и pages
if (section.pages) {
return section.pages.some(page => this.isSameRoute(page.path));
}
if (section.subSections) {
return section.subSections.some(subSection => this.hasActivePage(subSection));
}
// // Проверяем наличие активной страницы в подсекциях
// const hasActiveInSubSections = section.subSections && section.subSections.some(subSection => this.hasActivePage(subSection));
//
// console.log(hasActiveInSubSections)
//
//
// return hasActiveInPages || hasActiveInSubSections;
},
},
}
</script>
<style scoped>
.header-filter {
transition: all 0.3s;
backdrop-filter: saturate(180%) blur(7px);
background: hsla(0, 0%, 100%, .6);
}
</style>
resources/js/Navbars/MainPageNavbar.vue
+21 -98
View File
@@ -1,4 +1,5 @@
<template>
<header :style=" underSliderHeader ? 'background: hsla(0,0%,100%,.6)' : '' "
:class="{ 'header-filter': headerFilter }"
class="flex duration-500 fixed top-0 left-0 right-0 flex-wrap md:justify-start md:flex-nowrap z-50 w-full text-sm py-3 md:py-0">
@@ -7,17 +8,18 @@
<div class="flex items-center justify-between">
<a class="flex-none text-xl font-semibold dark:text-white dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
href="/" aria-label="Brand">
<img class="max-w-[300px]"
:src="!underSliderHeader ? '/logos/white_ntspi_logo.svg' : '/logos/ntspi-logo.svg'" alt="">
<img class="max-w-[300px] duration-300" :src="currentLogo" alt="Логотип">
</a>
<div class="lg:hidden">
<button :class="underSliderHeader ? 'text-black' : 'text-white'"
type="button"
id="open-mobile-btn"
class="flex justify-center items-center w-9 h-9 text-sm font-semibold rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-gray-800 disabled:opacity-50 disabled:pointer-events-none"
aria-haspopup="dialog"
aria-expanded="false"
aria-controls="open-mobile-nav"
data-hs-overlay="#open-mobile-nav">
data-hs-overlay="#open-mobile-nav"
>
<svg class="hs-collapse-open:hidden flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24"
height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
@@ -34,106 +36,15 @@
</button>
</div>
</div>
<div id="navbar-collapse-with-animation"
class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow lg:block">
<div
class="overflow-hidden overflow-y-auto max-h-[75vh] [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-slate-700 dark:[&::-webkit-scrollbar-thumb]:bg-slate-500">
<div
class="flex flex-col gap-x-0 mt-5 md:flex-row md:items-center md:justify-end md:gap-x-7 md:mt-0 md:ps-7 md:divide-y-0 md:divide-solid dark:divide-gray-700">
<template v-for="section in this.sections.data" :key="section.id">
<div
class="hs-dropdown [--strategy:static] md:[--strategy:absolute] [--adaptive:none] md:[--trigger:hover] py-3 md:py-6">
<button type="button" :class="!underSliderHeader ? 'text-white' : 'text-black'"
class="duration-300 flex items-center w-full hover:text-primaryBlue font-medium hs-dropdown-open:mb-4 md:hs-dropdown-open:mb-0">
{{ section.title }}
<svg class="flex-shrink-0 ms-2 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="m6 9 6 6 6-6"/>
</svg>
</button>
<div
class="hs-dropdown-menu transition-opacity duration-150 md:duration-500 hs-dropdown-open:opacity-100 opacity-0 w-full hidden z-10 top-full start-0 min-w-[15rem] bg-white md:shadow-2xl rounded-lg py-2 md:p-4 before:absolute before:-top-5 before:start-0 before:w-full before:h-5">
<div class="grid px-5 grid-cols-1 md:grid-cols-10">
<template v-for="subsection in section.subSections" :key="subsection.id">
<div class="md:col-span-3">
<div class="flex flex-col py-4 px-3 md:px-6">
<div class="space-y-4">
<div class="flex items-center mb-2 gap-x-2">
<span class="text-xs font-bold uppercase text-gray-800 dark:text-gray-200">{{
subsection.title
}}</span>
</div>
<template v-for="page in subsection.pages" :key="page.id">
<a :class="{'text-[#135aae] hover:text-gray-800 font-semibold ' : isSameRoute(page.path), 'text-gray-800 hover:text-[#2C6288]' : !isSameRoute(page.path) }"
class="flex items-center gap-x-2"
:href="(page.is_url) ? page.path : route('page.view', page.path) + '/'">
<div class="grow">
<p>{{ page.title }}</p>
</div>
</a>
</template>
</div>
</div>
</div>
</template>
</div>
</div>
</div>
</template>
<a href="#" class="hover:opacity-70 py-3 className">
<svg :class="!underSliderHeader ? 'text-white' : 'text-black'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6 duration-300 md:block hidden">
<path stroke-linecap="round" stroke-linejoin="round"
d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"/>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
</svg>
<span :class="!underSliderHeader ? 'text-white' : 'text-black'" class="md:hidden">Режим для слабовидящих</span>
</a>
<Link :href="route('client.schedule')" class="hover:opacity-70 py-3">
<svg :class="!underSliderHeader ? 'text-white' : 'text-black'" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-6 h-6 duration-300 md:block hidden">
<path stroke-linecap="round" stroke-linejoin="round"
d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z"/>
</svg>
<span :class="!underSliderHeader ? 'text-white' : 'text-black'" class="md:hidden">Расписание</span>
</Link>
<a class="hover:opacity-70 py-3 cursor-pointer" data-hs-overlay="#open-search-modal">
<svg :class="!underSliderHeader ? 'text-white' : 'text-black'" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-6 h-6 duration-300 md:block hidden">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/>
</svg>
<span :class="!underSliderHeader ? 'text-white' : 'text-black'" class="md:hidden">Поиск</span>
</a>
</div>
</div>
<div>
<DesktopNavBar :sections="sections" :under-slider-header="underSliderHeader" />
<MobileNavbar :sections="sections" />
</div>
</div>
</nav>
</header>
<MobileNavbar :sections="sections" />
<SearchModal open_id="open-search-modal" />
@@ -148,11 +59,13 @@ import * as isvek from "bvi"
import BaseIcon from "@/Components/BaseComponents/BaseIcon.vue";
import MobileNavbar from "@/Navbars/MobileNavbar.vue";
import SearchModal from "@/Components/Modals/SearchModal.vue";
import DesktopNavBar from "@/Navbars/DesktopNavBar.vue";
export default {
name: 'MainPageNavBar',
components: {
DesktopNavBar,
SearchModal,
MobileNavbar,
BaseIcon,
@@ -173,7 +86,11 @@ export default {
scrollPosition: 0,
headerFilter: false,
underSliderHeader: this.sliderRef,
bvi: null
bvi: null,
logos: {
default: '/logos/white_ntspi_logo.svg',
alternate: '/logos/ntspi-logo.svg',
},
}
},
@@ -239,6 +156,7 @@ export default {
},
mounted() {
console.log()
window.addEventListener('scroll', this.handleScroll)
window.addEventListener('scroll', this.checkSlider)
if (this.getCookie('bvi_panelActive') === null) {
@@ -256,6 +174,11 @@ export default {
window.removeEventListener('scroll', this.handleScroll)
window.removeEventListener('scroll', this.checkSlider)
},
computed: {
currentLogo() {
return this.underSliderHeader ? this.logos.alternate : this.logos.default;
},
},
}
resources/js/Navbars/MobileNavbar.vue
+7 -6
View File
@@ -25,24 +25,25 @@
</li>
<li v-for="section in sections.data" class="hs-accordion" id="users-accordion">
<li v-for="section in sections.data" class="hs-accordion" :id="'nav-section-accordion-' + section.slug">
<button
:id="'nav-section-accordion-btn-' + section.slug"
:class="(hasActivePage(section) ? 'text-blue-600 bg-gray-100' : 'text-gray-700')"
type="button"
class="hs-accordion-toggle hs-accordion-active:text-blue-600 hs-accordion-active:hover:bg-transparent w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 text-sm rounded-lg hover:bg-gray-100 focus:outline-none" aria-expanded="true" aria-controls="users-accordion">
class="hs-accordion-toggle hs-accordion-active:text-blue-600 w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 text-sm rounded-lg focus:outline-none" aria-expanded="true" aria-controls="users-accordion">
<BaseIcon class="w-4" name="line" />
{{ section.title }}
<svg class="flex-shrink-0 hs-accordion-active:block ms-auto hidden size-4 text-gray-600 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
<svg class="flex-shrink-0 hs-accordion-active:hidden ms-auto block size-4 text-gray-600 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
</button>
<div id="users-accordion" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300 hidden" role="region" aria-labelledby="users-accordion">
<ul class="hs-accordion-group ps-3 pt-2" data-hs-accordion-always-open>
<li v-for="subSection in section.subSections" class="hs-accordion" id="users-accordion-sub-1">
<li v-for="subSection in section.subSections" class="hs-accordion" :id="'nav-sub-section-accordion-' + subSection.slug">
<button
:id="'nav-sub-section-accordion-btn-' + subSection.slug"
:class="(hasActivePage(subSection) ? 'text-blue-600 bg-gray-100' : 'text-gray-700')"
type="button"
class="hs-accordion-toggle hs-accordion-active:text-blue-600 hs-accordion-active:hover:bg-transparent w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 text-sm rounded-lg hover:bg-gray-100 focus:outline-none " aria-expanded="true" aria-controls="users-accordion-sub-1">
class="hs-accordion-toggle hs-accordion-active:text-blue-600 w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 text-sm rounded-lg focus:outline-none " aria-expanded="true" :aria-controls="'nav-accordion-' + subSection.slug">
{{ subSection.title }}
<svg class="flex-shrink-0 hs-accordion-active:block ms-auto hidden size-4 text-gray-600 group-hover:text-gray-500 dark:text-neutral-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
@@ -50,7 +51,7 @@
<svg class="flex-shrink-0 hs-accordion-active:hidden ms-auto block size-4 text-gray-600 group-hover:text-gray-500 dark:text-neutral-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
</button>
<div id="users-accordion-sub-1" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300 hidden" role="region" aria-labelledby="users-accordion-sub-1">
<div class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300 hidden" role="region" :aria-labelledby="'nav-accordion-' + subSection.slug">
<ul class="pt-2 ps-2">
<li v-for="page in subSection.pages">
<a