MetatroncubeSoftwareSolutions/janahan-law
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

header language change option updated for 2 languages

Browse Source
This commit is contained in:
Alaguraj0361 2025-08-23 15:23:44 +05:30
parent 9707b1c982
commit 9c6b7b2de1
2 changed files with 91 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
components/HeaderTopbar/HeaderTopbar.js
View File

@ -7,43 +7,120 @@ import Image from 'next/image'
import { useTranslation } from 'next-i18next'
import { changeLanguage } from '../../utils/commonFunction.utils'
import { useRouter } from 'next/router'
import Slider from 'react-slick'
const HeaderTopbar = () => {
const { t } = useTranslation('common')
const { t, i18n } = useTranslation('common')
const router = useRouter()
const handleLanguageChange = () => {
changeLanguage(router, 'es'); // always switch to Spanish
};
const handleLanguageChange = (locale) => {
changeLanguage(router, locale)
}
// Slider Settings
const settings = {
dots: false,
arrows: false,
infinite: true,
autoplay: true,
autoplaySpeed: 2000,
speed: 600,
slidesToShow: 1,
slidesToScroll: 1,
fade: true,
}
return (
<>
<div
className="header-top py-2 "
className="header-top py-2"
style={{
background: 'linear-gradient(90deg, #C12026 11.32%, #E14448 95.28%)',
}}
>
<div className="container-fluid">
<div className='d-flex justify-content-center align-items-center gap-5 flex-wrap'>
<div className="text-center" style={{ color: 'white' }}>
Haz clic en el botón para cambiar a español.
</div>
<button onClick={handleLanguageChange} className='white-button'>Haz clic aquí</button>
</div>
<Slider {...settings}>
{/* 🔹 Show only Spanish switch if current lang is English */}
{i18n.language === 'en' && (
<div>
<div className="d-flex justify-content-center align-items-center gap-5 flex-wrap">
<div className="text-center text-white">
Haz clic en el botón para cambiar el idioma a <b>Español</b>.
</div>
<button
onClick={() => handleLanguageChange('es')}
className="white-button"
>
Cambiar a Español
</button>
</div>
</div>
)}
{
i18n.language === 'es' && (
<div>
<div className="d-flex justify-content-center align-items-center gap-5 flex-wrap">
<div className="text-center text-white">
Haz clic en el botón para cambiar el idioma a <b>Inglés</b>.
</div>
<button
onClick={() => handleLanguageChange('en')}
className="white-button"
>
Cambiar a Inglés
</button>
</div>
</div>
)
}
{/* 🔹 Show only English switch if current lang is Spanish */}
{i18n.language === 'en' && (
<div>
<div className="d-flex justify-content-center align-items-center gap-5 flex-wrap">
<div className="text-center text-white">
Click the button to switch the language to <b>Spanish</b>.
</div>
<button
onClick={() => handleLanguageChange('es')}
className="white-button"
>
Switch to Spanish
</button>
</div>
</div>
)}
{i18n.language === 'es' && (
<div>
<div className="d-flex justify-content-center align-items-center gap-5 flex-wrap">
<div className="text-center text-white">
Click the button to switch the language to <b>English</b>.
</div>
<button
onClick={() => handleLanguageChange('en')}
className="white-button"
>
Switch to English
</button>
</div>
</div>
)}
</Slider>
</div>
</div>
{/* 🔹 Main Topbar */}
<div className="topbar d-lg-block d-none">
<div className="container">
<div className="row align-items-center">
{/* Logo */}
<div className="col-lg-3 col-12 d-lg-block d-none">
<Link className="navbar-brand" href="/">
<Image src={Logo} alt="logo" />
</Link>
</div>
{/* Contact Info */}
<div className="col-lg-6 col-12">
<div className="contact-info-wrap">
<div className="contact-info">
@ -67,6 +144,7 @@ const HeaderTopbar = () => {
</div>
</div>
{/* Contact Button */}
<div className="col-lg-3 col-12 d-flex justify-content-end align-items-center">
<div className="contact-info ms-3">
<Link className="theme-btn" href="/contact">

2
next-i18next.config.js
View File

@ -1,7 +1,7 @@
module.exports = {
i18n: {
defaultLocale: 'es',
defaultLocale: 'en',
locales: ['en', 'es'],
localeDetection: false,
},