こんにちは。nap5です。
よくあるダッシュボードのバニラなレイアウトを作ってみましたので、紹介したいと思います。
サイドバーありの場合とサイドバーなしで幅固定中央寄せの場合の2つ用意しました。
サイドバーありの場合はメインのアイコンなどをクリックしたときにサイドバーに表示するコンテンツを制御したりすると幅が広がりそうです。
メインとサブの関係を捉えたデータ構造を表現するときにはいいかもですね。
デモサイトです。
デモコードです。
recursing-rain-m2xmfm - CodeSandbox
recursing-rain-m2xmfm by higashi.kota using @emotion/css, @emotion/react, @emotion/server, @emotion/styled, @fontsource/inter, @tidyjs/tidy, chance, framer-motion, gsap
CodeSandbox
外部サイト
これをベースにすれば、RenderのダッシュボードやAirbnbのお部屋詳細ページのようなものに昇華できるのではと思います。
簡単ですが、以上です。
