サイドナビを折りたためるようにする

概要

このIssueに関する簡単な説明を記述してください。

詳細な説明

問題の詳細、新しい機能の動作、技術的な変更の提案など、詳細を記述してください。

再現手順/使用ケース (バグや特定の機能に関連する場合)

最初に何をしたのか
次に何をしたのか
どのような結果が期待されるのか
実際に何が起こったのか

機能要件

ユーザー詳細画面でユーザーネームを変更できること

非機能要件

パフォーマンス

[ ] 性能目標が達成できるか？

コスト

[ ] より低コストでの実現手段はないか？

保守性

[ ] 必要に応じて処理が共通化されているか？

拡張性

[ ] 新しい機能や変更への適応能力は考慮されているか？

スケーラビリティ

[ ] 大量のユーザーまたはトランザクションへの対応能力は考慮されているか？

バックアップとリカバリ

[ ] データロスのリスクの最小化になるよう考慮されているか？
[ ] リカバリプロセスの速度は考慮されているか？

セキュリティ

[ ] セキュリティ対策に問題はないか？

コンプライアンス

[ ] ライセンス違反はないか？

スクリーンショット/図 (任意)

問題の現象や提案の視覚的な説明を示すスクリーンショットや図があれば、こちらに追加してください。

提案される解決策 (任意)

このIssueに対する提案や解決策があれば、記述してください。

その他の情報

このIssueに関連するその他の情報があれば、こちらに追加してください。

チェックリスト

[ ] 該当するラベルを設定

サイドナビについて

サイドナビは画面左側のメニュー部分ですね。今、divタグの中にul>liタグでマークアップされていますが(ulタグはリンク先のコードには見当たりませんでした。liタグは親要素にulまたはolまたはmenuタグを必要としますので、なければ追加が必要です）基本的にナビゲーションには「navタグ」をつけてあげると良いです。（もしくはこの場合はasideタグでも良いです）

例
<nav class="crumbs">
    <ul>
        <li class="crumb"><a href="#">Bikes</a></li>
        <li class="crumb"><a href="#">BMX</a></li>
        <li class="crumb">Jump Bike 3000</li>
    </ul>
</nav>

参考：https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA/Roles/Navigation_Role

HTMLはなるべくセマンティックな構造になるようにマークアップします。ここでは話が膨大になりますのでセマンティックHTMLに関しては割愛します。セマンティックHTML：https://code-kitchen.dev/tags/%E3%82%BB%E3%83%9E%E3%83%B3%E3%83%86%E3%82%A3%E3%83%83%E3%82%AFHTML/検索botなどに対してだけではなく、アクセシビリティの向上にもつながります（Webはアクセシビリティ込みであってこそWebであると考えます）

aki366 / caian-app

サイドナビを折りたためるようにする #393

概要