:cat2: :dash: モバイルドロワーのメニュー開閉ボタンの向きをメニューの状態に合わせます

KiKiKi-KiKi commented 4 years ago

変更内容

下記問題を修正しました。

モバイルの状態でΩをクリックしてメニューを表示
ウィンドウサイズを変更する
メニューが閉じられるが開閉ボタンは逆Ωのままで元に戻らなない
これ以降ボタンの向きとメニューの状態が逆になってしまう

ref. https://github.com/omegasisters/homepage/issues/245

ボタンの向きの変更はボタンクリック時/メニューボタンクリック時にJSでCSSのクラス名をtoggleする操作で実装されていましたが、メニューには drawer.jsが使われており、このライブラリは<body>にメニュー表示状態を .drawer-close, .drawer-open のように与えます。ですので、JSでCSSのクラス名を操作するのではなく、CSSで .drawer-open クラスが付いている時にΩボタンが rotate(180deg) になる指定にしておけば、メニューの状態とボタンの向きを同期させることができます。

確認事項

[x] PR を作成する前に、 https://github.com/omegasisters/homepage の最新の master を取り込み済みである。
- Conflict や他の方の変更で自分の変更が動かなくなる可能性を防ぎます。
[x] 動作確認済みである。
- 何らかの理由で本番に取り込まれるまで確認できない場合はその旨を補足に記載する。
[x] prettier によるコード整形を行った、もしくは画面に関係ない変更である。
- 可能な方のみで良いと思いますが、意図せず他の方がフォーマットするとコード差分が増えすぎるので自分の分は自分でやるのがよろしいかと思います。
[x] スマホ（狭い画角）でも表示を確認した、もしくは画面に関係ない変更である。
[x] 他の方の変更を意図せず削除・変更していないか、差分をもう一度確認した。
[x] 破壊的な変更を行った場合、影響範囲をもう一度確認した。もしくは破壊的な変更を行っていない。

補足

CSSのクラスの変更があり、アニメーションが発生するので Event の $('.drawer').on('drawer.closed', function(){}); を使うよりはアニメーションのテンポが遅れるということはないかと思いますが、一応実装者の @Iwaide さんに確認して頂きたく思います 🙏

https://git.blivesta.com/drawer/