My current view includes a div tag with 2 links - one for displaying the page in English and another for Arabic. I want to modify it so that if the page is already in English, only the Arabic <a> tag will show, and vice versa if the page is in Arabic. See the modified code below:
layout.js:-
export default function Layout({ children, lang, screenName, roomName, postTitle, screenNames, postTitles }) {
var homeUrl = '/' + lang + "/post/" + encodeURIComponent(roomName) + "/";
if (postTitle) {//Means url to be set for post screen
var englishUrl = '/' + 'EN' + "/post/" + encodeURIComponent(roomName) + "/" + encodeURIComponent(screenNames.EN) + "/" + encodeURIComponent(postTitles.EN);
var arabicUrl = '/' + 'AR' + "/post/" + encodeURIComponent(roomName) + "/" + encodeURIComponent(screenNames.AR) + "/" + encodeURIComponent(postTitles.AR);
} else {//Means url to be set for screens screen
var englishUrl = '/' + 'EN' + "/post/" + encodeURIComponent(roomName) + "/" + encodeURIComponent(screenNames.EN) + "/";
var arabicUrl = '/' + 'AR' + "/post/" + encodeURIComponent(roomName) + "/" + encodeURIComponent(screenNames.AR) + "/";
}
if (lang.toUpperCase() == 'EN') {
if (typeof window !== 'undefined') {
document.documentElement.dir = 'ltr'
}
} else {
if (typeof window !== 'undefined') {
document.documentElement.dir = 'rtl'
}
}
return (
<div className={lang.toUpperCase() == 'EN'?styles.roundedCornersBox:styles.roundedCornersBoxAR}>
<a className={lang.toUpperCase() == 'EN'?styles.urlNoDecoration:''} href={englishUrl}><span className={lang.toUpperCase() == 'EN'?styles.engname:''}>English</span></a>
<span className={styles.barcolor}>|</span>
<a className={lang.toUpperCase() == 'AR'?styles.urlNoDecoration:''} href={arabicUrl}><span className={lang.toUpperCase() == 'AR'?styles.arname:''}>العربية</span> </a>
</div>