Murugan_Temple/src/components/HeaderFour.jsx

758 lines
32 KiB
JavaScript
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

"use client";
import Link from "next/link";
import React, { useEffect, useState } from "react";
import Marquee from "react-fast-marquee";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, FreeMode, Thumbs, EffectFade, Autoplay } from "swiper";
const HeaderFour = () => {
const [active, setActive] = useState(false);
const [scroll, setScroll] = useState(false);
useEffect(() => {
var offCanvasNav = document.getElementById("offcanvas-navigation");
var offCanvasNavSubMenu = offCanvasNav.querySelectorAll(".sub-menu");
for (let i = 0; i < offCanvasNavSubMenu.length; i++) {
offCanvasNavSubMenu[i].insertAdjacentHTML(
"beforebegin",
"<span class='mean-expand-class'>+</span>"
);
}
var menuExpand = offCanvasNav.querySelectorAll(".mean-expand-class");
var numMenuExpand = menuExpand.length;
function sideMenuExpand() {
if (this.parentElement.classList.contains("active") === true) {
this.parentElement.classList.remove("active");
} else {
for (let i = 0; i < numMenuExpand; i++) {
menuExpand[i].parentElement.classList.remove("active");
}
this.parentElement.classList.add("active");
}
}
for (let i = 0; i < numMenuExpand; i++) {
menuExpand[i].addEventListener("click", sideMenuExpand);
}
window.onscroll = () => {
if (window.pageYOffset < 150) {
setScroll(false);
} else if (window.pageYOffset > 150) {
setScroll(true);
}
return () => (window.onscroll = null);
};
}, []);
const mobileMenu = () => {
setActive(!active);
};
return (
<header className="nav-header header-layout3">
<div className="header-top">
<div className="container-fluid">
<div className="header-swiper-container">
<Swiper
loop={true}
spaceBetween={30}
slidesPerView={1} // Ensures only 1 slide at a time
speed={1000} // Transition speed of 1s
autoplay={{ delay: 5000, disableOnInteraction: false }} // 5-second delay
pagination={{ clickable: true }} // Enables pagination dots
modules={[Autoplay]}
className="mySwiper"
>
<SwiperSlide>
<div className="header-links text-center">
<p className="mb-0"> கன ி டர மற சம யம, ஒனி, கனட.</p>
</div>
</SwiperSlide>
<SwiperSlide>
<div className="header-links text-center">
<p className="mb-0">Sri Murugan Temple Waterloo Region and Community Center, Ontario, Canada.</p>
</div>
</SwiperSlide>
<SwiperSlide>
<div className="header-links text-center">
{/* kannada Script */}
<p className="mb-0"> ರಹಮಣ ಿ ವಸ, ಟರ ರದ.</p>
</div>
</SwiperSlide>
<SwiperSlide>
<div className="header-links text-center">
{/* Telugu Script */}
<p className="mb-0"> రహమణ ి లయ, టర </p>
</div>
</SwiperSlide>
</Swiper>
</div>
{/* <div className="row justify-content-center justify-content-lg-between align-items-center gy-2">
<div className="col-auto">
<div className="header-links">
<Marquee className="text-white">
| ஸ்ரீ முருகன் கோவில், வோட்டர்லூ பகுதி மற்றும் சமூக மையம் | శ్రీ సుబ్రమణ్య స్వామి దేవాలయం, వాటర్లో ప్రాంతం | ശ്രീ മുരുകൻ ക്ഷേത്രം, വാട്ടർലൂ റീജിയൻ & കമ്മ്യൂണിറ്റി സെൻ്റർ | ವಾಟರ್ಲೂ ಪ್ರದೇಶದ ಶ್ರೀ ಮುರುಗನ್ ದೇವಸ್ಥಾನ ಮತ್ತು ಸಮುದಾಯ ಕೇಂದ್ರ |
</Marquee>
</div>
</div> */}
{/* <div className="col-auto">
<div className="header-links ps-0">
<ul>
<li>
<div className="social-links">
<Link href="https://www.facebook.com/">
<i className="fab fa-facebook-f" />
</Link>
<Link href="https://www.instagram.com/">
<i className="fab fa-instagram" />
</Link>
<Link href="https://www.twitter.com/">
<i className="fab fa-twitter" />
</Link>
<Link href="https://www.linkedin.com/">
<i className="fab fa-linkedin" />
</Link>
</div>
</li>
</ul>
</div>
</div> */}
{/* </div> */}
</div>
</div>
<div className={`sticky-wrapper ${scroll && "sticky"}`}>
{/* Main Menu Area */}
<div className="menu-area">
<div className="container">
<div className="row align-items-center">
{/* Logo Section */}
<div className="col-xl-2 col-md-2 col-6">
<div className="header-logo">
<Link href="/">
<img src="/assets/img/logo-resized.png" alt="logo" className="logo-header" />
</Link>
</div>
</div>
{/* Other Content Section */}
<div className="col-xl-8 col-md-9 col-6 text-lg-center text-end">
<nav className="main-menu d-none d-lg-inline-block">
<ul>
<li>
<Link href="/">Home</Link>
{/* <ul className="sub-menu">
<li>
<Link href="">Home 01</Link>
</li>
<li>
<Link href="home-2">Home 02</Link>
</li>
<li>
<Link href="home-3">Home 03</Link>
</li>
<li>
<Link href="home-4">Home 04</Link>
</li>
<li>
<Link href="home-5">Home 05</Link>
</li>
<li>
<Link href="home-6">Home 06</Link>
</li>
</ul> */}
</li>
<li>
<Link href="/about-us">About Us</Link>
</li>
<li>
<Link href="/services">Services</Link>
</li>
<li className="menu-item-has-children">
<Link href="/donation">Donation</Link>
<ul className="sub-menu">
<li>
<Link href="/event-annathanam">Annadanam</Link>
</li>
<li>
<Link href="#">Ubayam</Link>
</li>
</ul>
</li>
{/* <li className="menu-item-has-children">
<Link href="#">Online</Link>
<ul className="sub-menu">
<li className="menu-item-has-children relative">
<Link href="#">Membership</Link>
<ul style={{ position: "absolute", right: "20px", background: "#d2a530", border: "none", padding: "10px" }}>
<li>
<Link href="/annual-membership">Annual Membership</Link>
</li>
<li>
<Link href="/life-membership">Life Membership</Link>
</li>
</ul>
</li>
<li className="menu-item-has-children relative">
<Link href="#">Events</Link>
<ul style={{ position: "absolute", right: "20px", background: "#d2a530", border: "none", padding: "10px", width: "300px" }}>
<li>
<Link href="/event-vilakkupoojai">Thiru Vilakku Poojai - Past</Link>
</li>
<li>
<Link href="/event-thaipoosam">Thaipoosam Festival - Past</Link>
</li>
</ul>
</li>
</ul>
</li> */}
<li className="menu-item-has-children">
<Link href="#">Membership</Link>
<ul className="sub-menu">
<li>
<Link href="/annual-membership">Annual Membership</Link>
</li>
<li>
<Link href="/life-membership">Life Membership</Link>
</li>
</ul>
</li>
<li className="menu-item-has-children">
<Link href="#">Events</Link>
<ul className="sub-menu">
{/* 2025 Events */}
<li className="menu-item-has-children relative">
<Link href="#">2025</Link>
<ul
style={{
position: "absolute",
right: "100%",
top: "0",
background: "#d2a530",
border: "none",
padding: "10px",
width: "320px",
}}
>
<li>
<Link href="/event-sathya-narayana-poojai">Sathya Narayana Poojai</Link>
</li>
<li>
<Link href="/event-sangada-hara-charthurthi-december">Sangada Hara Chathurthi</Link>
</li>
<li>
<Link href="/event-vilakkupoojai">Thiru Vilakku Poojai - Past</Link>
</li>
<li>
<Link href="/event-thaipoosam">Thaipoosam Festival - Past</Link>
</li>
</ul>
</li>
{/* 2026 Events */}
<li className="menu-item-has-children relative">
<Link href="#">2026</Link>
<ul
style={{
position: "absolute",
right: "100%",
top: "0",
background: "#d2a530",
border: "none",
padding: "10px",
width: "320px",
}}
>
{/* <li>
<Link href="/event-pranaprathistapanai-pujai">Pranaprathistapanai Pujai</Link>
</li> */}
<li>
<Link href="/event-new-year">New Year Celebration</Link>
</li>
<li>
<Link href="/event-thai-poosam">Thai Poosam</Link>
</li>
<li>
<Link href="/event-sangada-hara-charthurthi-march">Sangada Hara Chathurthi</Link>
</li>
<li>
<Link href="/event-sangada-hara-charthurthi-april">Sangada Hara Chathurthi</Link>
</li>
<li>
<Link href="/event-chitra-pournami">Chitra Pournami</Link>
</li>
<li>
<Link href="/event-monthly-karthigai-may">Monthly Karthigai</Link>
</li>
<li>
<Link href="/event-vaikasi-visagam">Vaikasi Visagam</Link>
</li>
<li>
<Link href="/event-sangada-hara-charthurthi-june">Sangada Hara Chathurthi</Link>
</li>
<li>
<Link href="/event-monthly-karthigai-june">Monthly Karthigai</Link>
</li>
</ul>
</li>
</ul>
</li>
{/* <li className="menu-item-has-children ">
<Link href="#">Online</Link>
<ul className="sub-menu">
<li className="menu-item-has-children relative">
<Link href="#">Membership</Link>
<ul style={{ position: "absolute", right: "20px", background: "#d2a530", border: "none", padding: "10px" }}>
<li>
<Link href="/annual-membership">Annual Membership</Link>
</li>
<li>
<Link href="/life-membership">Life Membership</Link>
</li>
</ul>
</li>
<li className="menu-item-has-children relative">
<Link href="#">Events</Link>
<ul style={{ position: "absolute", right: "20px", background: "#d2a530", border: "none", padding: "10px" }}>
<li className="menu-item-has-children relative">
<Link href="#">Upcoming Events</Link>
<ul style={{ position: "absolute", right: "100%", top: "0", background: "#d2a530", border: "none", padding: "10px" }}>
<li>
<Link href="/event-annathanam">Annadanam</Link>
</li>
<li>
<Link href="/event-annathanam">Annadanam2</Link>
</li>
</ul>
</li>
<li className="menu-item-has-children relative">
<Link href="#">Past Events</Link>
<ul style={{ position: "absolute", right: "100%", top: "0", background: "#d2a530", border: "none", padding: "10px" }}>
<li>
<Link href="/event-thaipoosam">Thaipoosam Festival</Link>
</li>
<li>
<Link href="/event-vilakkupoojai">Thiru Vilakku Poojai</Link>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li> */}
<li>
<Link href="/gallery">Gallery</Link>
</li>
{/* <li>
<Link href="faq">Faq</Link>
</li> */}
{/* <li className="menu-item-has-children">
<Link href="#">Services</Link>
<ul className="sub-menu">
<li>
<Link href="service">Service</Link>
</li>
<li>
<Link href="service-details">Service Details</Link>
</li>
</ul>
</li> */}
{/* <li className="menu-item-has-children">
<Link href="#">Projects</Link>
<ul className="sub-menu">
<li>
<Link href="project">Projects</Link>
</li>
<li>
<Link href="project-details">Projects Details</Link>
</li>
</ul>
</li> */}
{/* <li>
<Link href="/blog">Blog</Link> */}
{/* <ul className="sub-menu">
<li>
<Link href="blog">Blog</Link>
</li>
<li>
<Link href="blog-details">Blog Details</Link>
</li>
</ul> */}
{/* </li> */}
<li className="menu-item-has-children ">
<Link href="#" >Resources</Link>
<ul className="sub-menu">
<li className="menu-item-has-children relative">
<Link href="#">General</Link>
<ul style={{ position: "absolute", right: "20px", background: "#d2a530", border: "none", padding: "10px", }}>
<li>
<Link href="/arupadai-veedu">India</Link>
</li>
<li>
<Link href="/canada">Canada</Link>
</li>
<li>
<Link href="/srilanka">Srilanka</Link>
</li>
</ul>
</li>
{/* <li>
<Link href="/blog">Blog</Link>
</li> */}
<li>
<Link href="https://srirangaminfo.com/tamil-rasi-calculator.php" target="_blank">Rasi Calculator</Link>
</li>
<li>
<Link href="https://www.drikpanchang.com/tamil/tamil-month-panchangam.html" target="_blank">Panchangam</Link>
</li>
<li>
<Link href="/books">Books</Link>
</li>
</ul>
</li>
{/* <li className="menu-item-has-children">
<Link href="#">Pages</Link>
<ul className="sub-menu">
<li>
<Link href="team">Team Page</Link>
</li>
<li>
<Link href="team-details">Team Details</Link>
</li>
<li>
<Link href="shop">Shop Page</Link>
</li>
<li>
<Link href="shop-details">Shop Details</Link>
</li>
<li>
<Link href="cart">Cart</Link>
</li>
<li>
<Link href="checkout">Checkout</Link>
</li>
<li>
<Link href="wishlist">Wishlist</Link>
</li>
</ul>
</li> */}
<li className="menu-item-has-children">
<Link href="#">Contact</Link>
<ul className="sub-menu">
<li>
<Link href="/faq">FAQ</Link>
</li>
<li>
<Link href="/contact">Contact</Link>
</li>
</ul>
</li>
</ul>
</nav>
<div className="navbar-right d-inline-flex d-lg-none">
<button
type="button"
className="menu-toggle icon-btn"
onClick={mobileMenu}
>
<i className="fas fa-bars" />
</button>
</div>
</div>
<div className="col-xl-2 col-0 d-xl-block d-none">
<div className="header-button">
<Link href="/donation" className="btn style3">
Donate Now
</Link>
</div>
</div>
</div>
</div>
</div>
{/* Mobile Menu */}
<div className={`mobile-menu-wrapper ${active && "body-visible"}`}>
<div className="mobile-menu-area">
<div className="mobile-logo">
<Link href="/">
<img src="/assets/img/logo-resized.png" alt="logo" className="logo-header" /> </Link>
<button className="menu-toggle" onClick={mobileMenu}>
<i className="fa fa-times" />
</button>
</div>
<div className="mobile-menu">
<ul id="offcanvas-navigation">
<li>
<Link href="/">Home</Link>
{/* <ul className="sub-menu submenu-class">
<li>
<Link href="">Home 01</Link>
</li>
<li>
<Link href="home-2">Home 02</Link>
</li>
<li>
<Link href="home-3">Home 03</Link>
</li>
<li>
<Link href="home-4">Home 04</Link>
</li>
<li>
<Link href="home-5">Home 05</Link>
</li>
<li>
<Link href="home-6">Home 06</Link>
</li>
</ul> */}
</li>
<li>
<Link href="/about-us">About Us</Link>
</li>
<li>
<Link href="/services">Services</Link>
</li>
<li className="menu-item-has-children">
<Link href="/donation">Donation</Link>
<ul className="sub-menu">
<li>
<Link href="/event-annathanam">Annadanam</Link>
</li>
<li>
<Link href="#">Ubayam</Link>
</li>
</ul>
</li>
{/* <li className="menu-item-has-children submenu-item-has-children">
<Link href="#">Pages</Link>
<ul className="sub-menu submenu-class">
<li>
<Link href="team">Team Page</Link>
</li>
<li>
<Link href="team-details">Team Details</Link>
</li>
<li>
<Link href="shop">Shop Page</Link>
</li>
<li>
<Link href="shop-details">Shop Details</Link>
</li>
<li>
<Link href="cart">Cart</Link>
</li>
<li>
<Link href="checkout">Checkout</Link>
</li>
<li>
<Link href="wishlist">Wishlist</Link>
</li>
</ul>
</li>
<li className="menu-item-has-children submenu-item-has-children">
<Link href="#">Project</Link>
<ul className="sub-menu submenu-class">
<li>
<Link href="project">Projects</Link>
</li>
<li>
<Link href="project-details">Project Details</Link>
</li>
</ul>
</li>
<li className="menu-item-has-children submenu-item-has-children">
<Link href="#">Service</Link>
<ul className="sub-menu submenu-class">
<li>
<Link href="service">Service</Link>
</li>
<li>
<Link href="service-details">Service Details</Link>
</li>
</ul>
</li>
<li className="menu-item-has-children submenu-item-has-children">
<Link href="#">Shop</Link>
<ul className="sub-menu submenu-class">
<li>
<Link href="shop">Shop</Link>
</li>
<li>
<Link href="shop-details">Shop Details</Link>
</li>
<li>
<Link href="cart">Cart</Link>
</li>
<li>
<Link href="checkout">Checkout</Link>
</li>
<li>
<Link href="wishlist">Wishlist</Link>
</li>
</ul>
</li> */}
<li className="menu-item-has-children">
<Link href="#">Membership</Link>
<ul className="sub-menu">
<li>
<Link href="/annual-membership">Annual Membership</Link>
</li>
<li>
<Link href="/life-membership">Life Membership</Link>
</li>
</ul>
</li>
<li className="menu-item-has-children submenu-item-has-children">
<Link href="#">Events</Link>
<ul className="sub-menu submenu-class" style={{ position: "static !important" }}>
<li className="menu-item-has-children">
<Link href="#">2025</Link>
<ul style={{ position: "static" }}>
<li>
<Link href="/event-sathya-narayana-poojai">Sathya Narayana Poojai</Link>
</li>
<li>
<Link href="/event-sangada-hara-charthurthi-december">Sangada Hara Chathurthi</Link>
</li>
<li>
<Link href="/event-vilakkupoojai">Thiru Vilakku Poojai - Past</Link>
</li>
<li>
<Link href="/event-thaipoosam">Thaipoosam Festival - Past</Link>
</li>
</ul>
</li>
<li className="menu-item-has-children">
<Link href="#">2026</Link>
<ul style={{ position: "static" }}>
<li>
<Link href="/event-new-year">New Year Celebration</Link>
</li>
<li>
<Link href="/event-thai-poosam">Thai Poosam</Link>
</li>
<li>
<Link href="/event-sangada-hara-charthurthi-march">Sangada Hara Chathurthi</Link>
</li>
<li>
<Link href="/event-sangada-hara-charthurthi-april">Sangada Hara Chathurthi</Link>
</li>
<li>
<Link href="/event-chitra-pournami">Chitra Pournami</Link>
</li>
<li>
<Link href="/event-monthly-karthigai-may">Monthly Karthigai</Link>
</li>
<li>
<Link href="/event-vaikasi-visagam">Vaikasi Visagam</Link>
</li>
<li>
<Link href="/event-sangada-hara-charthurthi-june">Sangada Hara Chathurthi</Link>
</li>
<li>
<Link href="/event-monthly-karthigai-june">Monthly Karthigai</Link>
</li>
</ul>
</li>
</ul>
</li>
<li>
<Link href="/gallery">Gallery</Link>
</li>
{/* <li>
<Link href="/blog">Blog</Link> */}
{/* <ul className="sub-menu submenu-class">
<li>
<Link href="blog">Blog</Link>
</li>
<li>
<Link href="blog-details">Blog Details</Link>
</li>
</ul> */}
{/* </li> */}
<li className="menu-item-has-children ">
<Link href="#" >Resources</Link>
<ul className="sub-menu" style={{ position: "static !important" }}>
<li className="menu-item-has-children relative">
<Link href="#">General</Link>
<ul >
<li>
<Link href="/arupadai-veedu">India</Link>
</li>
<li>
<Link href="/canada">Canada</Link>
</li>
<li>
<Link href="/srilanka">Srilanka</Link>
</li>
</ul>
</li>
{/* <li>
<Link href="/blog">Blog</Link>
</li> */}
<li>
<Link href="https://srirangaminfo.com/tamil-rasi-calculator.php" target="_blank">Rasi Calculator</Link>
</li>
<li>
<Link href="https://www.drikpanchang.com/tamil/tamil-month-panchangam.html" target="_blank">Panchangam</Link>
</li>
<li>
<Link href="/books">Books</Link>
</li>
</ul>
</li>
<li className="menu-item-has-children">
<Link href="#">Contact</Link>
<ul className="sub-menu">
<li>
<Link href="/faq">FAQ</Link>
</li>
<li>
<Link href="/contact">Contact</Link>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
);
};
export default HeaderFour;