Stage all layout updates

components/layout-shell.tsx

@@ -1,6 +1,6 @@
 import { SiteHeader } from './site-header';
 import { SiteFooter } from './site-footer';
-import { RightSidebar } from './right-sidebar';
+
 import { BackToTop } from './back-to-top';
 
 export function LayoutShell({ children }: { children: React.ReactNode }) {
@@ -8,10 +8,7 @@ export function LayoutShell({ children }: { children: React.ReactNode }) {
     <div className="flex min-h-screen flex-col">
       <SiteHeader />
       <main className="flex-1 container mx-auto px-4 py-6">
-        <div className="grid gap-8 lg:grid-cols-[minmax(0,3fr)_minmax(0,1.4fr)]">
-          <div>{children}</div>
-          <RightSidebar />
-        </div>
+        {children}
       </main>
       <SiteFooter />
       <BackToTop />

components/post-layout.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faListUl, faChevronRight, faChevronLeft } from '@fortawesome/free-solid-svg-icons';
+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 }: { children: React.ReactNode; hasToc?: boolean }) {
+    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">
+                    <motion.div
+                        layout
+                        className={cn("mx-auto transition-all duration-500 ease-snappy", isTocOpen && hasToc ? "max-w-3xl" : "max-w-4xl")}
+                    >
+                        {children}
+                    </motion.div>
+                </div>
+
+                {/* Sidebar (TOC) */}
+                <aside className="hidden lg:block">
+                    <div className="sticky top-24 h-[calc(100vh-6rem)] overflow-hidden">
+                        <AnimatePresence mode="wait">
+                            {isTocOpen && hasToc && (
+                                <motion.div
+                                    initial={{ opacity: 0, x: 20 }}
+                                    animate={{ opacity: 1, x: 0 }}
+                                    exit={{ opacity: 0, x: 20 }}
+                                    transition={{ duration: 0.3 }}
+                                    className="h-full overflow-y-auto pr-2"
+                                >
+                                    <PostToc />
+                                </motion.div>
+                            )}
+                        </AnimatePresence>
+                    </div>
+                </aside>
+            </div>
+
+            {/* Toggle Button (Glassmorphism Pill) */}
+            {hasToc && (
+                <motion.button
+                    layout
+                    onClick={() => setIsTocOpen(!isTocOpen)}
+                    className={cn(
+                        "fixed bottom-8 right-20 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 transition-all hover:bg-white hover:scale-105 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"
+                    )}
+                    whileTap={{ scale: 0.95 }}
+                    aria-label="Toggle Table of Contents"
+                >
+                    <FontAwesomeIcon
+                        icon={isTocOpen ? faChevronRight : faListUl}
+                        className="h-3.5 w-3.5"
+                    />
+                    <span>{isTocOpen ? 'Hide' : 'Menu'}</span>
+                </motion.button>
+            )}
+        </div>
+    );
+}

components/post-list-item.tsx

@@ -19,7 +19,7 @@ export function PostListItem({ post }: Props) {
     post.description || post.custom_excerpt || post.body?.raw?.slice(0, 120);
 
   return (
-    <article className="motion-card group relative flex gap-4 rounded-lg border border-slate-200/70 bg-white/90 p-4 shadow-sm dark:border-slate-800 dark:bg-slate-900/80">
+    <article className="motion-card group relative flex gap-4 rounded-2xl border border-white/40 bg-white/60 p-5 shadow-lg backdrop-blur-md transition-all hover:scale-[1.01] hover:shadow-xl dark:border-white/10 dark:bg-slate-900/60">
       <div className="pointer-events-none absolute inset-x-0 top-0 h-0.5 origin-left scale-x-0 bg-gradient-to-r from-blue-500 via-sky-400 to-indigo-500 opacity-80 transition-transform duration-300 ease-out group-hover:scale-x-100 dark:from-blue-400 dark:via-sky-300 dark:to-indigo-400" />
       {cover && (
         <div className="relative flex h-24 w-24 flex-none overflow-hidden rounded-md bg-slate-100 dark:bg-slate-800 sm:h-auto sm:w-40">

components/sidebar-layout.tsx

@@ -0,0 +1,10 @@
+import { RightSidebar } from './right-sidebar';
+
+export function SidebarLayout({ children }: { children: React.ReactNode }) {
+    return (
+        <div className="grid gap-8 lg:grid-cols-[minmax(0,3fr)_minmax(0,1.4fr)]">
+            <div>{children}</div>
+            <RightSidebar />
+        </div>
+    );
+}