Discourse の動的サイドバーアイコン

:information_source: 概要 サイドバーのトグルアイコンを動的かつカスタマイズ可能にします
:hammer_and_wrench: リポジトリ https://github.com/Lillinator/discourse-dynamic-sidebar-icon
:eyeglasses: プレビュー https://discourse.theme-creator.io/theme/Lilly/discourse-sidebar-icon
:question: インストールガイド テーマまたはテーマコンポーネントのインストール方法

このテーマコンポーネントをインストール

:woman_technologist:t2: 概要

サイドバーが開いているか閉じているかに応じて、ヘッダーのサイドバートグルアイコンを動的に変更する軽量な Discourse テーマコンポーネントです。

デフォルトでは、サイドバーが閉じられているときは標準のハンバーガーメニューアイコン (bars) が表示され、サイドバーが開いているときは閉じる X アイコン (xmark) に切り替わります。

管理者は必要に応じてカスタムアイコンを指定することもでき、モバイル表示での有効化を選択することもできます(コンポーネントの動的な動作はモバイルビューポートサイズには適用されませんが、開くアイコンを変更する管理者はモバイル UX との整合性を考慮したい場合があります)。


:star: 機能

  • ユーザーにサイドバーとのインタラクション方法について明確な視覚的フィードバックを提供します。
  • 管理者はテーマ設定を通じて、デフォルトのアイコンを任意の FontAwesome アイコンに簡単に置き換えることができます。
  • モバイルビューポートでの UX 整合性のために、置き換えられたサイドバーアイコンの有効化を許可します。

:movie_camera: ビデオスクリーンショット

コンポーネントのデフォルト設定:

dog および cat アイコンを使用:


:wrench: 設定

コンポーネントの設定を編集して、サイドバーの開閉に使用されるアイコンをカスタマイズします:

設定 説明
Icon_to_open_the_sidebar サイドバーが折りたたまれているときに表示されるアイコン
(デフォルト: bars
Icon_to_close_the_sidebar サイドバーが展開されているときに表示されるアイコン
(デフォルト: xmark
Apply_open_icon_on_mobile モバイルビューポートでカスタムの「開く」アイコンを適用
(デフォルト: false

:warning: 注意事項

  • コア Discourse に含まれていないカスタムアイコンを使用すると、空白として表示されます。これを修正するには、Discourse 管理者設定の SVG icon subset サイト設定にカスタムアイコン(例: rocket, cat)を追加する必要があります(All Site SettingsSVG icon subset を参照)。
  • このコンポーネントはヘッダーのドロップダウンモードでは機能しません。

他の Discourse 関連のコンテンツもご覧ください
「いいね!」 13

コンポーネントのリファクタリングを行い、新しいブール設定「モバイルで開くアイコンを適用」を追加しました(デフォルトは無効)。これにより、デフォルトの「バー」から開くアイコンを変更する管理者は、UXの一貫性のためにモバイルのビューポートサイズでこれを有効に選択できるようになります。モバイルのオーバーレイサイドバーは動作が異なるため、小さなビューポートサイズでサイドバーがアクティブ化されてもアイコンは変更されません。また、元の投稿(OP)も更新しました。

「いいね!」 5