| 概要 | サイドバーのトグルアイコンを動的かつカスタマイズ可能にします | |
| リポジトリ | https://github.com/Lillinator/discourse-dynamic-sidebar-icon | |
| プレビュー | https://discourse.theme-creator.io/theme/Lilly/discourse-sidebar-icon | |
| インストールガイド | テーマまたはテーマコンポーネントのインストール方法 |
このテーマコンポーネントをインストール
概要
サイドバーが開いているか閉じているかに応じて、ヘッダーのサイドバートグルアイコンを動的に変更する軽量な Discourse テーマコンポーネントです。
デフォルトでは、サイドバーが閉じられているときは標準のハンバーガーメニューアイコン (bars) が表示され、サイドバーが開いているときは閉じる X アイコン (xmark) に切り替わります。
管理者は必要に応じてカスタムアイコンを指定することもでき、モバイル表示での有効化を選択することもできます(コンポーネントの動的な動作はモバイルビューポートサイズには適用されませんが、開くアイコンを変更する管理者はモバイル UX との整合性を考慮したい場合があります)。
機能
- ユーザーにサイドバーとのインタラクション方法について明確な視覚的フィードバックを提供します。
- 管理者はテーマ設定を通じて、デフォルトのアイコンを任意の FontAwesome アイコンに簡単に置き換えることができます。
- モバイルビューポートでの UX 整合性のために、置き換えられたサイドバーアイコンの有効化を許可します。
ビデオスクリーンショット
コンポーネントのデフォルト設定:
dog および cat アイコンを使用:
設定
コンポーネントの設定を編集して、サイドバーの開閉に使用されるアイコンをカスタマイズします:
| 設定 | 説明 |
|---|---|
Icon_to_open_the_sidebar |
サイドバーが折りたたまれているときに表示されるアイコン (デフォルト: bars) |
Icon_to_close_the_sidebar |
サイドバーが展開されているときに表示されるアイコン (デフォルト: xmark) |
Apply_open_icon_on_mobile |
モバイルビューポートでカスタムの「開く」アイコンを適用 (デフォルト: false) |
注意事項
- コア Discourse に含まれていないカスタムアイコンを使用すると、空白として表示されます。これを修正するには、Discourse 管理者設定の
SVG icon subsetサイト設定にカスタムアイコン(例:rocket,cat)を追加する必要があります(All Site Settings→SVG icon subsetを参照)。 - このコンポーネントはヘッダーのドロップダウンモードでは機能しません。
他の Discourse 関連のコンテンツもご覧ください
