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

janahan law header spanish language change button added

Browse Source
This commit is contained in:
Alaguraj0361 2025-08-22 12:11:03 +05:30
parent d38dfac4a5
commit d35c55cfca
2 changed files with 38 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
components/HeaderTopbar/HeaderTopbar.js
View File

@ -5,21 +5,32 @@ import Link from 'next/link'
import Logo from '/public/images/logo.png'
import Image from 'next/image'
import { useTranslation } from 'next-i18next'
import { changeLanguage } from '../../utils/commonFunction.utils'
import { useRouter } from 'next/router'
const HeaderTopbar = () => {
const { t } = useTranslation('common')
const router = useRouter()
const handleLanguageChange = () => {
changeLanguage(router, 'es'); // always switch to Spanish
};
return (
<>
<div
className="header-top py-2 d-none d-lg-block"
className="header-top py-2 "
style={{
background: 'linear-gradient(90deg, #C12026 11.32%, #E14448 95.28%)',
}}
>
<div className="container-fluid">
<div className="text-center" style={{ color: 'white' }}>
Para cambiar al español, haz clic en la opción en la parte inferior derecha del encabezado.
<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>
</div>
</div>

38
styles/sass/layout/_header.scss
View File

@ -2025,29 +2025,39 @@
.responsivemenu a:not([href]):not([class]):hover {
color: #ddd;
}
.responsive-entry-media {
position: relative;
width: 100%;
aspect-ratio:28 / 9;
overflow: hidden;
position: relative;
width: 100%;
aspect-ratio: 28 / 9;
overflow: hidden;
}
.responsive-entry-media img {
width: 100%;
height: 100%;
object-fit: cover;
width: 100%;
height: 100%;
object-fit: cover;
}
.responsive-entry-media2 {
position: relative;
width: 100%;
aspect-ratio:3 / 2;
overflow: hidden;
position: relative;
width: 100%;
aspect-ratio: 3 / 2;
overflow: hidden;
}
.responsive-entry-media2 img {
width: 100%;
height: 100%;
object-fit: cover;
width: 100%;
height: 100%;
object-fit: cover;
}
.white-button {
border: none;
background-color: white;
color: #c12026;
border-radius: 2px;
padding: 5px 10px;
font-size: 16px;
font-weight: bold;
}