hermes-web/app/(protected)/settings/layout.tsx

import SettingsNavigation from "@/components/navigation/settings";
import { cn } from "@/lib/utils";
import { headers } from 'next/headers';
import React from "react";

const SettingsLayout = async ({
  children
} : {
  children:React.ReactNode
} ) => {
  const headersList = headers();
  const header_url = headersList.get('x-url') || "";

  return (
    <div className="">
      <div className={cn("hidden md:flex w-[250px] z-5 flex-col fixed inset-y-0 overflow-y-scroll",
        header_url.endsWith("/settings") && "flex h-full w-full md:w-[250px] z-30 flex-col fixed inset-y-0")}>
        <SettingsNavigation />
      </div>
      <main className={"md:pl-[250px]"}>
        {children}
      </main>
    </div>
    );
}
 
export default SettingsLayout;