Changes

resources/js/Components/ClientMainSlider.vue

@@ -69,6 +69,8 @@
 </template>
 
 <script>
+import { mapActions } from "vuex";
+
 export default {
 	name: 'slider',
 	props: {
@@ -82,7 +84,6 @@ export default {
 			currentIndex: 0,
 			intervalId: null,
 			slideDuration: 5000,
-
 		}
 	},
 	computed: {
@@ -90,12 +91,13 @@ export default {
 			return this.slidersCarousel && this.slidersCarousel.data ? this.slidersCarousel.data.length : 0;
 		},
 		progressBarStep() {
-			const slides = this.totalSlides
-			const step = 100 / slides
-			return (this.currentIndex + 1) * step
+			const slides = this.totalSlides;
+			const step = 100 / slides;
+			return (this.currentIndex + 1) * step;
 		}
 	},
 	methods: {
+		...mapActions(['updateLastSlider']),
 		next() {
 			if (this.totalSlides > 0) {
 				this.currentIndex = (this.currentIndex + 1) % this.totalSlides;
@@ -109,8 +111,8 @@ export default {
 			}
 		},
 		startTimer() {
-			this.stopTimer(); // Останавливаем предыдущий таймер, если он есть
-			this.intervalId = setInterval(this.next, this.slideDuration); // Запускаем новый таймер
+			this.stopTimer();
+			this.intervalId = setInterval(this.next, this.slideDuration);
 		},
 		stopTimer() {
 			clearInterval(this.intervalId);
@@ -121,7 +123,11 @@ export default {
 		}
 	},
 	mounted() {
-		this.$emit('slider-mounted', this.$refs.sliderRef);
+		// Передаем данные в Vuex после монтирования компонента
+		this.updateLastSlider({
+			url: this.$page.props.ziggy.location,
+			bottom: this.$refs.sliderRef.getBoundingClientRect().bottom, // Получаем актуальное значение bottom
+		});
 		this.startTimer();
 	},
 	beforeUnmount() {

resources/js/Navbars/MainPageNavbar.vue

@@ -47,7 +47,6 @@
 
 	<MobileNavbar v-if="sections" :sections="sections" />
 
-
 	<SearchModal open_id="open-search-modal" />
 
 </template>
@@ -55,14 +54,13 @@
 <script>
 
 import {Link} from "@inertiajs/vue3";
-import axios from "axios";
 import ClientGlobalSearch from "@/Components/ClientGlobalSearch.vue";
 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";
-
+import {mapGetters} from "vuex";
 
 
 export default {
@@ -87,7 +85,7 @@ export default {
 		return {
 			scrollPosition: 0,
 			headerFilter: false,
-			underSliderHeader: this.sliderRef,
+			underSliderHeader: true,
 			bvi: null,
 			isActiveBvi: null,
 			logos: {
@@ -96,36 +94,23 @@ export default {
 			},
 		}
 	},
-
 	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;
+			return currentLocation === currentUrl;
 		},
 		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));
 			}
-
 		},
-
 		iniBvi() {
 			if (this.getCookie('bvi_panelActive') === null) {
 				this.bvi = new isvek.Bvi({
@@ -138,43 +123,43 @@ export default {
 				});
 			}
 		},
-
 		handleScroll() {
-			if (typeof this.sliderRef === 'object') {
-				const mainSlider = this.sliderRef;
-				this.underSliderHeader = mainSlider.getBoundingClientRect().bottom < 50
-				this.scrollPosition = window.pageYOffset
-				this.headerFilter = this.scrollPosition > 90
+			if (this.lastSlider) {
+				const slider = this.lastSlider;
+				this.scrollPosition = window.pageYOffset;
+				if (this.isSameRoute(slider.url)) {
+					this.underSliderHeader = slider.bottom < this.scrollPosition;
+				}
+				this.headerFilter = this.scrollPosition > 90;
 			} else {
-				this.headerFilter = true
+				this.headerFilter = true;
+			}
+		},
+	},
+	watch: {
+		lastSlider(newVal) {
+			if (this.isSameRoute(newVal?.url)) {
+				this.underSliderHeader = newVal.bottom < 0; // Пример логики
 			}
 		},
-
-
-
 	},
 	mounted() {
-		window.addEventListener('scroll', this.handleScroll)
-
+		window.addEventListener('scroll', this.handleScroll);
 
 		if (this.getCookie('bvi_panelActive') === null) {
-			this.iniBvi()
+			this.iniBvi();
 		}
-
-
 	},
 	beforeDestroy() {
-		window.removeEventListener('scroll', this.handleScroll)
+		window.removeEventListener('scroll', this.handleScroll);
 	},
 	computed: {
+		...mapGetters(['lastSlider']),
 		currentLogo() {
 			return this.underSliderHeader ? this.logos.alternate : this.logos.default;
 		},
 	},
-
-
 }
-
 </script>
 
 <style scoped>

resources/js/Pages/Main.vue

@@ -1,8 +1,8 @@
 <template>
 	<AppHead :seo="seo" />
 
-	<MainPageNavBar :sections="$page.props.navigation" :slider-ref="sliderRef" />
-	<ClientMainSlider @slider-mounted="setSliderRef" :slidersCarousel="sliders" />
+	<MainPageNavBar :sections="$page.props.navigation" />
+	<ClientMainSlider :slidersCarousel="sliders" />
 
 	<section class="max-w-screen-xl w-full mx-auto px-4 py-3 pb-10">
 		<h2 class="text-brand-primary my-6 md:mb-[50px] md:mt-[80px] text-2xl font-semibold tracking-tight text-black lg:text-[32px] lg:leading-tight bvi-show">Последние новости</h2>
@@ -195,11 +195,6 @@ export default {
 			return LevelEducational
 		}
 	},
-	data() {
-		return {
-			sliderRef: null,
-		}
-	},
 
 	props: {
 		posts: {
@@ -240,9 +235,6 @@ export default {
 
 	methods: {
 		Cookies,
-		setSliderRef(ref) {
-			this.sliderRef = ref;
-		},
 	},
 
 

resources/js/app.js

@@ -8,6 +8,8 @@ import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
 import {linksReform} from "@/mixins/LinksReform.js";
 import YSmartCaptcha from 'vue3-yandex-smartcaptcha'
 import cookieMixin from "@/mixins/cookieMixin.js";
+import store from '@/store/index.js';
+
 
 // const appName = import.meta.env.VITE_APP_NAME || 'НТГСПИ';
 
@@ -20,6 +22,7 @@ createInertiaApp({
     setup({ el, App, props, plugin }) {
         return createSSRApp({ render: () => h(App, props) })
             .use(plugin)
+            .use(store)
             .mixin(linksReform)
             .mixin(cookieMixin)
             .use(ZiggyVue)

resources/js/store/index.js

@@ -0,0 +1,20 @@
+import { createStore } from 'vuex';
+
+export default createStore({
+    state: {
+        lastSlider: null, // Состояние для отслеживания положения слайдера
+    },
+    mutations: {
+        setLastSlider(state, value) {
+            state.lastSlider = value; // Мутация для изменения состояния
+        },
+    },
+    actions: {
+        updateLastSlider({ commit }, value) {
+            commit('setLastSlider', value); // Действие для обновления состояния
+        },
+    },
+    getters: {
+        lastSlider: (state) => state.lastSlider, // Геттер для получения состояния
+    },
+});