Closed h-yoshikawa44 closed 2 years ago
メニューを開いた時、天気トップ表示(PC サイズだと左側の領域)は単純に inert 有効化でいいのだが...。 天気詳細表示(PC サイズだと右側の領域)は、モバイルサイズの時だけ inert を有効化したいという特殊な状況。
悩んだ結果、メニュー・ロケーション検索管理用カスタムフックに以下の処理を追加した
const [open, setOpen] = useState<boolean>(false);
const [inertFlg, setInertFlg] = useState<boolean>(false);
// モバイルサイズの時だけ inert を有効化したい部分があるので、その判定 const inertCheck = useCallback(() => { if (open && window.innerWidth < breakPoint.md) { document.body.style.overflowY = 'hidden'; setInertFlg(true); return; } document.body.style.overflowY = ''; setInertFlg(false); }, [open]);
// メニュー開閉時と画面リサイズ時に inert 判定をするように useEffect(() => { window.addEventListener('resize', inertCheck); inertCheck(); }, [open, inertCheck]);
あとは、カスタムフック呼び出し側で
- 天気トップ表示部分:open で inert 付与分岐
- 天気詳細表示部分:inertFlg で inert 付与分岐
ロケーション検索機能を持ったメニューを作成する
作業内容