0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

家計簿アプリを作る#20

Last updated at Posted at 2025-03-23

スクリーンショット 2025-03-23 102045.png
openとonCloseで、Drawerの表示非表示を切り替えてます。
onCloseのhandleDrawerToggleの関数を確認してみます。

スクリーンショット 2025-03-23 102301.png
AppLayout.tsxの中のhandleDrawerToggleを見てみると、setMobileOpenとして、mobileOpenをTrueであれば、false、falseであれば、Trueに、!を使って切り替えてます。

スクリーンショット 2025-03-23 102553.png
mobileOpenはこちら👆で定義されています。初期値は、falseのStateです。

スクリーンショット 2025-03-23 102738.png
mobileOpenは、Drawerのopenで使われています。このmobileOpenがTrueの時は、モバイル用のDrawerを表示して、falseの時は、非表示にしています。

スクリーンショット 2025-03-23 103013.png
アイコンを押されたときも、Drawerの表示非表示が切り替わるようにしたいので、👆handleDrawerToggleを使ってます。

これらは、サイドバーの説明です。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?