Show Item based on the pathName in NextJs Server Component

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.