const pathName = usePathname()

  const projectID = pathName.split('/')[2]


  const issuesPath = `/management/${projectID}/project-detail/issues`
  const featuresPath = `/management/${projectID}/project-detail/features`
  const projectPath = `/management/${projectID}`



  const GeneralLinks = [
    { name: 'Dashboard', icon: <BiHome className='text-xl mx-2' />, href: '/dashboard' },
    { name: 'Project Statistics', icon: <BiHome className='text-xl mx-2' />, href: `${projectPath}` },
  ];

  const WorkspaceLinks = [
    { name: 'Issues', icon: <AiOutlineIssuesClose className='text-xl mx-2' />, href: `${issuesPath}` },
    { name: 'Features', icon: <GrTask className='text-xl mx-2' />, href: `${featuresPath}` },
    { name: 'Chat', icon: <HiOutlineChatAlt2 className='text-xl mx-2' />, href: '#' }
  ];

'use client'
import React from 'react';
import { usePathname } from "next/navigation"
import Link from 'next/link';



interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
    items: {
        href: string
        title: string
    }[]
}

export default function PageOption({  items }: SidebarNavProps) {
    const pathname = usePathname()

    return (
        <nav className={"flex py-4 flex-wrap lg:justify-start justify-around w-full  lg:w-3/12 space-x-2 px-2 lg:flex-col lg:space-x-0 lg:space-y-3"}>
            {items.map((item) => (
                <Link
                    key={item.href}
                    href={item.href}
                    className={`${ pathname === item.href ? "bg-[#dfeefe] " : "hover:bg-transparent hover:underline"} justify-start w-max text-xs sm:text-base rounded px-6 py-2 `}
                >
                    {item.title}
                </Link>
            ))}
        </nav>
    );
}

import { PageHeading, PageOptions } from '@/components/dashboard';
import React from 'react'
import { Toaster } from 'sonner'
const options = [
  { title: 'Features', href: '/management/features' },
  { title: 'Create Feature', href: '/management/features/create-feature' },
];

export default function FeatureLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className='w-full h-full  px-4 flex flex-col'>
      <PageHeading title='Feature Management' subtitle='' />
      <div className='py-4  flex flex-col lg:flex-row flex-grow overflow-y-auto'>
        <PageOptions items={options} />
        <div className='overflow-y-auto w-full border-l h-full'>{children}</div>
      </div>
      <Toaster richColors position="bottom-right" />
    </div>

  )
}

the pathname is not available for server components, but the dynamics parts are available.

Dynamic Segments are passed as the params prop to layout, page, route, and generateMetadata functions.