§10-09Layout
Focus mode / zen mode
本文以外の UI を隠して作業に集中できる画面にする。
書く・読むといった一つの作業に没頭できる。エディタや読書画面で、メニューや通知が気を散らすと感じる利用者向けに用意する。
実装のポイント
隠す UI は DOM から消さず状態クラスで切り替えると、戻したときにスクロール位置や入力が残る。解除のショートカット(Esc など)を必ず用意する。
- 特徴
- 状態管理
- デモで使っているもの
- shadcn/ui
- lucide-react