// ❌ template.tsx にサイドバーを置くアンチパターン

// 📁 app/study/template.tsx
'use client';
import { useState } from 'react';

export default function StudyTemplate({
  children,
}: {
  children: React.ReactNode;
}) {
  // ★ ユーザーが /study/javascript → /study/typescript に移動すると
  //   template が再マウント → expanded が再び false にリセット
  const [expanded, setExpanded] = useState(false);

  return (
    <div>
      <aside>
        <button onClick={() => setExpanded(!expanded)}>
          {expanded ? '折りたたむ' : '展開する'}
        </button>
        {expanded && <NavList />}
      </aside>
      <main>{children}</main>
    </div>
  );
}

// ユーザー体験:
// 1. /study にアクセス → サイドバーは折りたたまれた状態
// 2. ユーザーが「展開する」をクリック → 開く
// 3. /study/javascript にアクセス → template が再マウント → 再び折りたたまれる 😡
// 4. 再び展開 → 別のカテゴリに移動 → またリセット
//
// このような状態のリセットはユーザーにとって非常にイライラするUX

// ✅ layout で状態を維持 + 必要に応じて template でエントリーアニメーション

// 📁 app/study/layout.tsx — サイドバー、状態維持
import { Sidebar } from './Sidebar';

export default function StudyLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="flex">
      <Sidebar />
      <main className="flex-1">{children}</main>
    </div>
  );
}

// 📁 app/study/Sidebar.tsx — Client (状態を保持)
'use client';
import { useState } from 'react';

export function Sidebar() {
  // ★ このstateはカテゴリ移動しても生き残る
  //   layoutが再マウントされないため
  const [expanded, setExpanded] = useState(false);

  return (
    <aside>
      <button onClick={() => setExpanded(!expanded)}>
        {expanded ? '折りたたむ' : '展開する'}
      </button>
      {expanded && <NavList />}
    </aside>
  );
}

// 📁 app/study/template.tsx — ページごとのフェードイン (オプション)
'use client';
import { motion } from 'framer-motion';

export default function StudyTemplate({
  children,
}: {
  children: React.ReactNode;
}) {
  // ★ ページ移動ごとにフェードインを再実行 — templateなので毎回マウント
  return (
    <motion.div
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.2 }}
    >
      {children}
    </motion.div>
  );
}

// ユーザー体験:
// 1. /study にアクセス → サイドバーは折りたたまれた状態
// 2. ユーザーが「展開する」をクリック → 開く
// 3. /study/javascript にアクセス → サイドバーは開いたまま維持 😊
//                              ページ本文はフェードイン (template)
// 4. /study/typescript に移動 → サイドバーはそのまま、本文のみフェードイン
//
// 状態が自然に維持され、本文の切り替えはスムーズ

// フォルダー構造:
// app/study/
// ├── layout.tsx        ← サイドバー (状態維持)
// ├── template.tsx      ← ページエントリーアニメーション (毎回マウント)
// ├── Sidebar.tsx       ← Client
// ├── page.tsx          ← /study
// ├── [category]/page.tsx
// └── [category]/[slug]/page.tsx