I have a layout in which I have two Detail Pages One is User and another is Company and In this two I need to highlight user or company based on the page they are in I have urls as below
- /user/details
- /company/details
Now I need to highlight the tab based on the page they are in
/user/details –> High Light the User Tab
/company/details –>High Light the company Tab
import { useTranslation } from '@/app/i18n'
import { fallbackLng, languages } from '@/app/i18n/settings'
import { headers } from 'next/headers'
import Image from 'next/image'
import Link from 'next/link'
import { Trans } from 'react-i18next/TransWithoutContext'
const Layout = async ({
children,
params: { lng },
}: {
children: React.ReactNode
params: {
lng: string
}
}) => {
if (languages.indexOf(lng) < 0) lng = fallbackLng
const { t } = await useTranslation(lng)
let isUserTab = false
if (headers().get('referer')?.includes('user')) {
isUserTab = true
}
return (
<div className="fixed top-0 left-0 w-screen h-screen z-1000">
<div className=" flex items-center justify-center w-full h-full bg-red-500 absolute z-1000 ">
<div className=" flex bg-[rgb(255,255,255)] items-center justify-center">
<div className=" flex flex-col bg-[white] w-[500px] items-center justify-center">
<Image
src="/assets/Icons/test.svg"
width={100}
height={72}
alt="test"
/>
<p>
<Trans t={t} i18nKey="Welcome">
Welcome
</Trans>
</p>
<p>
<Trans t={t} i18nKey="Details">
Details
</Trans>
</p>
<div className=" flex flex-row gap-[10px] ">
<Link href="/user/details">
<p className={`${isUserTab ? 'bg-[green]' : ''} min-w-[100px]`}>
<Trans t={t} i18nKey="USER">
USER
</Trans>
</p>
</Link>
<p className={`${!isUserTab ? 'bg-[green]' : ''} min-w-[100px]`}>
<Link href="/company/details">
<Trans t={t} i18nKey="COMPANY">
COMPANY
</Trans>
</Link>
</p>
</div>
<div>{children}</div>
</div>
</div>
</div>
</div>
)
}
export default Layout
I know how to do it in client side but Is there any way to achieve it by using ssr I’m missing something important any help is appreciated.