blog-nextjs/components/post-layout.tsx

'use client';

import { useState } from 'react';
import { FiList, FiChevronRight } from 'react-icons/fi';
import { PostToc } from './post-toc';
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

function cn(...inputs: ClassValue[]) {
    return twMerge(clsx(inputs));
}

export function PostLayout({ children, hasToc = true, contentKey }: { children: React.ReactNode; hasToc?: boolean; contentKey?: string }) {
    const [isTocOpen, setIsTocOpen] = useState(hasToc);

    return (
        <div className="relative">
            <div className={cn(
                "group grid gap-8 transition-all duration-500 ease-snappy",
                isTocOpen && hasToc ? "lg:grid-cols-[1fr_16rem] toc-open" : "lg:grid-cols-[1fr_0rem]"
            )}>
                {/* Main Content Area */}
                <div className="min-w-0">
                    <div className={cn("mx-auto transition-all duration-500 ease-snappy", isTocOpen && hasToc ? "max-w-3xl" : "max-w-4xl")}>
                        {children}
                    </div>
                </div>

                {/* Desktop Sidebar (TOC) */}
                <aside className="hidden lg:block">
                    <div className="sticky top-24 h-[calc(100vh-6rem)] overflow-hidden">
                        {isTocOpen && hasToc && (
                            <div className="toc-sidebar h-full overflow-y-auto pr-2">
                                <PostToc key={contentKey} />
                            </div>
                        )}
                    </div>
                </aside>
            </div>

            {/* Mobile TOC Overlay */}
            {isTocOpen && hasToc && (
                <div className="toc-mobile fixed bottom-24 right-4 z-40 w-72 rounded-2xl border border-white/20 bg-white/90 p-6 shadow-2xl backdrop-blur-xl dark:border-white/10 dark:bg-slate-900/90 lg:hidden">
                    <div className="max-h-[60vh] overflow-y-auto">
                        <PostToc key={contentKey} onLinkClick={() => setIsTocOpen(false)} />
                    </div>
                </div>
            )}

            {/* Toggle Button (Glassmorphism Pill) */}
            {hasToc && (
                <button
                    onClick={() => setIsTocOpen(!isTocOpen)}
                    className={cn(
                        "toc-button fixed bottom-8 right-8 z-50 flex items-center gap-2 rounded-full border border-white/20 bg-white/80 px-4 py-2.5 shadow-lg backdrop-blur-md hover:bg-white dark:border-white/10 dark:bg-slate-900/80 dark:hover:bg-slate-900",
                        "text-sm font-medium text-slate-600 dark:text-slate-300",
                        "lg:right-20" // Adjust position for desktop
                    )}
                    aria-label="Toggle Table of Contents"
                >
                    {isTocOpen ? (
                        <FiChevronRight className="h-3.5 w-3.5" />
                    ) : (
                        <FiList className="h-3.5 w-3.5" />
                    )}
                    <span>{isTocOpen ? 'Hide' : 'Menu'}</span>
                </button>
            )}
        </div>
    );
}