Open5
react-sidebar-layout実装メモ
syumaireact-sidebar-layout
これの実装の話
参考
Slackのサイドバーの実装を参考にしている
syumaiキーポイント
- Grid layoutの利用
- Grid layoutによって外側からサイドバーのサイズを操作できるようになるので楽
-
Apx 1fr Bpxと言う指定方法になるのでズレも生まれない
-
- Grid layoutによって外側からサイドバーのサイズを操作できるようになるので楽
- Resizer componentの分離
- ドラッグして動かせる部分はcomponentを分離する
syumaiわかってないこと
- input type=rangeの利用
- Resizerのcomponentに仕込まれている
- maxWidth / minWidthの制御に使っているんじゃないかと予想
- Safariでドラッグを壊さないこと
- なんかおかしくなる
syumai謎のShadow DOMも見付かっている
syumaipublish時の小ネタ