Momento/memento-note/app/(main)/settings/layout.tsx

'use client'

import { Menu } from 'lucide-react'
import { SettingsNav } from '@/components/settings'
import { SettingsDocumentTitle } from '@/components/settings/settings-document-title'
import { useLanguage } from '@/lib/i18n'

export default function SettingsLayout({
    children,
}: {
    children: React.ReactNode
}) {
    const { t } = useLanguage()
    return (
        <div className="flex flex-col h-full bg-background">
            <SettingsDocumentTitle />
            <header className="px-4 sm:px-8 md:px-12 pt-6 sm:pt-8 md:pt-10 pb-4 sm:pb-6 shrink-0">
                <div className="flex items-start gap-3 mb-6">
                    <button
                        className="md:hidden p-2 -ms-1 text-ink dark:text-zinc-200 hover:bg-ink/5 dark:hover:bg-white/10 rounded-lg transition-colors shrink-0 mt-1"
                        onClick={() => window.dispatchEvent(new CustomEvent('open-mobile-sidebar'))}
                        aria-label={t('settings.title')}
                    >
                        <Menu size={22} />
                    </button>
                    <div>
                        <h1 className="text-2xl sm:text-3xl md:text-4xl font-serif text-ink dark:text-zinc-50 tracking-tight leading-tight font-medium">
                            {t('settings.title')}
                        </h1>
                        <p className="text-sm text-concrete dark:text-zinc-400 mt-1.5">
                            {t('settings.description')}
                        </p>
                    </div>
                </div>

                <SettingsNav />
            </header>

            <div className="flex-1 overflow-y-auto">
                <div className="max-w-5xl mx-auto px-4 sm:px-8 md:px-12 py-6 sm:py-8 md:py-10 space-y-8">
                    {children}
                </div>
            </div>
        </div>
    )
}