Reactでサイドピークを実装した

こんにちは！CastingONEの大沼です。 始めに Notionにはサイドピークという右側にページを表示するという便利な機能があります。これによって左側でテーブルの一覧を見ながら次々と詳細をサッと見ることができてUXがとても良いです。弊社でもこの機能で業務効率化を図れると思ったため、Notionを参考に実装しました。 この記事では弊社ではどんな感じで実装したのか、簡易アプリを用いて説明したいと思います。 作ったもの 今回検証用で作ったものは以下になります。HOME画面でボタンをクリックしたら該当するページがサイドピークで表示され、サイドピークのヘッダーではこれを閉じたり全画面表示に切り替えることができます。またサイドピークはオーバーレイかエクスパンドのどちらを選択でき、後ろに隠れても良いからサイドピークをより広く使いたい場合も対応しています。 なお、ダミーの文章は Lorem JPsum

[kazkun]

サイドピークって、side peekなんじゃないかと思ってみたり。