hermes-web/app/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="h-full">
      <div className={cn("hidden md:flex h-full w-[250px] z-30 flex-col fixed inset-y-0",
        header_url.endsWith("/settings") && "flex h-full w-full md:w-[250px] z-30 flex-col fixed inset-y-0")}>
        <SettingsNavigation />
      </div>
      <main className={cn("md:pl-[250px] h-full", header_url.endsWith("/settings") && "hidden")}>
        {children}
      </main>
    </div>
    );
}
 
export default SettingsLayout;