Don
1
こんにちは 
以前、これをテーマコンポーネントのコンセプトとして Development トピック を作成しましたが、現在では Customization > Theme component として公開できる状態になりました。
ライブ環境で使用する前に必ずテストしてください。
コンポーネントに関する情報はこちら: F NAV - Theme component concept
テーマコンポーネントについて。 モバイル版の Discourseタブバー をより動的にし、通知などの処理機能を追加できることが素晴らしいという投稿を多く読みました。F-NAVはこれを実現し、さらに多くの機能を提供します…
ヘッダー
ハンバーガーメニュー、ユーザーメニュー、検索、チャットを非表示にし、デフォルトのユーザーメニューのプロファイルタブの内容を含むプロファイル(アバター)メニューボタンを追加します。
設定
ログアウト項目の前にカスタム項目を追加できる設定も含まれています。
カスタム項目を簡単に追加できる3つのフィールドが含まれています。
F NAVに特定のタブを配置したくない場合、ヘッダーに表示されるようデフォルトのヘッダーアイコンを表示/非表示にするための設定もあります。
タブ
タブに異なる機能を関連付けることができます。これらの機能により、各タブが動的に変更できます。

変更には以下が含まれます:
機能
home
- トピックルートにおいて、ホームタブのアイコンを左矢印に変更し、戻る機能を追加します

- 新しいトピックまたは未読トピックのインジケータードットを追加します

hamburger (ハンバーガーメニューを開く)
multi
multi tab
チャットが無効な場合、またはユーザーがユーザー設定でオフにしている場合、マルチタブは自動的にメッセージタブに変更されます。
通知バブルは、緊急かそうでないかによって変化します。
緊急なマルチタブの通知は緑色で、このようになります。 
展開時
個人メッセージは常に緑色ですが、チャットは例えば未読チャンネルメッセージ通知のように元通り青色である場合があります。
展開時
単一の通知
message
- 通知付きのメッセージボタンを追加し、クリックするとクイックビュー用のメッセージモーダルが開きます
chat
notificationToRoute
notificationMenu
search
- コンテキストベースの
/search ページにリダイレクトします
設定
設定はできるだけシンプルにしようとしています。
4つのフィールドが含まれます。
- name: これは設定内でタブを識別しやすくするためのものです。
- icon: タブにアイコンを追加します。注: 機能を選択した場合、この設定では上書きできないアイコンがある場合があります。
- destination: カスタムタブの移動先を追加します。注: 機能をj選択した場合、機能が移動先を処理するため、空欄にしておくことができます。コンポーネントは
/my/... の移動先を自動的に /u/username/... に変換するため、タブのアクティブ状態が正しく追加されます。
- function: タブに機能を選択します。
管理者は、タブを簡単に作成/削除/変更し、機能のいずれかを選択するか、タブにカスタム移動先を追加できます。
機能 
例えば、トピック作成タブを追加する場合、このようになります。
クレジット: Discourse Tab Bar for Mobile および F NAV - Theme component concept トピックでのフィードバックをくれた皆さんに感謝します。 
「いいね!」 22
Canapin
(Coin-coin le Canapin)
2
これは素晴らしいですし、デフォルトの動作であるべきです。これにより、携帯電話の画面の奥上部まで届こうとして親指が痛くなるのを防ぐことができます。
目立つ「オンライン」トグルはあまり好きではありません。ほとんどの人はこの設定を頻繁に変更する必要がないと思うからです。おそらく、ほとんどのユーザーはオンラインプレゼンスを一度きりでオプトアウトするので、このオプションが存在し続けることへの絶え間ないリマインダーは不要だと思います。
多くの非常に便利なナビゲーション変更テーマコンポーネントを作成したようですね。いくつか使用したいのですが、長期的にこれらすべてをどの程度維持するつもりですか?信頼性を確保するために、official のテーマコンポーネントのみを使用する傾向があります。
元のタブバーの公式テーマコンポーネントが見当たらなかったので、確認してみます。
「いいね!」 7
ozkn
(Mathx)
3
コンポーネントありがとうございます、@don。長い間ここにいて、本当に素晴らしい仕事をしています。
「いいね!」 3
Don
5
ありがとうございます。FKBテーマに関するものです。テーマを更新します。
「いいね!」 3
Don
6
「いいね!」 3
ozkn
(Mathx)
7
@donさん、画像のようにfa-regularアイコンを使用するにはどうすればよいですか? Fontawesome 6に切り替えた後、その方法に関する情報が見つかりませんでした。
「いいね!」 3
Don
8
こんにちは
far-bell で動作するはずです。タブがアクティブなときに通常からソリッドに変更する予定でしたが、確認してみます。しかし、私の記憶が正しければ、家のアイコンは無料版にソリッドしかありません。
「いいね!」 1
ozkn
(Mathx)
9
ありがとうございます。問題が解決しました。@Don
「いいね!」 1
Jagster
(Jakke Flemming)
10
トピックを開いたときにバックボタンに変わるホームアイコンについて。スワイプで戻れるようにできませんか(Hubのホーム画面に戻るときのように
)。ユーザーから、ロゴまで手を伸ばさなければならないと不満が出ています(ファーストワールド問題、わかっています
)。
「いいね!」 2
Don
11
これをどこに配置するか考えているのですが、関数に追加できると思います。これは単一のタブにすることができ、DiscourseHubにのみ表示されるナビゲーションに追加できます。
「いいね!」 1
Jagster
(Jakke Flemming)
12
実はDiscourseHubはスワイプダウンで問題なく動作します。ただ、それに気づかなかっただけです。
ホーム/バックボタンの質問は、他の人に説明しなければならないので、より大きな問題です。
「いいね!」 3
Don
13
バックボタンは、トピック間のナビゲーションを容易にするために、トピックでのみアクティブになります。これは、オフにできるホーム機能から来ており、これによりホームの宛先が維持されます。
設定はまだ並べ替えることができず、既存の選択がある場合はクリアできませんが、新しい機能 none を追加しました。これは、機能フィールドを空のままにした場合と同じ動作になります。これにより、ナビゲーションタブ全体を再作成する必要がなくなります。
バックボタンを無効にして、どこでもホームを維持したい場合は、次のようになります。
「いいね!」 3
Heliosurge
(Dan DeMontmorency)
14
いつものように素晴らしいです。テーマクリエイターでの簡単なプレビューから同意せざるを得ません。これは、クラシックモバイルと改善されたモバイルのトグルを備えたコアパッケージに含めるべきです。
これにより、長いバナーサイトロゴのようなものが開かれるのを見ることができます。ヘッダーのローカルセレクターなどのオプションがよりクリーンになり、さらに多くのことができます。いつものように、ドン、とてもとても素晴らしいです!
「いいね!」 3
MihirR
(Mihir)
16
鉛筆アイコンとナビゲーションのトピックがナビゲーションバーと一緒に折りたたまれています。
「いいね!」 1
CAX.DO
18
ドンさん、こんにちは。素晴らしいお仕事、ありがとうございます。気に入っています。
質問があります。ハンバーガーメニューまたは通知をクリックした後、さらに操作する必要がない場合があります。この場合、記事リストに戻る必要があります。しかし、ハンバーガーメニューまたは通知を閉じるには、空白のページをクリックするしかありません。これにより、誤ってアバターや返信をクリックしてしまう可能性があります。
別の簡単な例として、チャットページにいてホームページに戻る必要がある場合、左上隅にある戻るボタンをクリックする必要がありますが、これは実際にはモバイルデバイスではユーザーフレンドリーではありません。
そこで、メニューバーを常に一番上に表示することは可能でしょうか?
私の説明が理解されることを願っています。
「いいね!」 2
Don
19
こんにちは、マックスさん 
問題のスクリーンショット/画面録画をいくつか作成していただけますか?
/chat ではナビゲーションを非表示にし、デフォルトの チャットヘッダーを使用しています。ナビゲーションをチャットに表示することが、さまざまなブラウザで問題を引き起こす可能性があるため、それだけの価値があるかどうかはわかりませんが、確認します。
「いいね!」 1
CAX.DO
20
ドンさん、こんにちは:smiley:
お返事ありがとうございます。
以下のスクリーンショットを参照してください。最初の2つのスクリーンショットは、ハンバーガーメニューまたは通知を閉じたい場合、黄色い領域をクリックすることしかできないことを意味します。問題は、記事やアバターを誤ってクリックしやすいことです。
3番目のスクリーンショットは、チャットインターフェースを終了するには、左上隅の戻るボタンをクリックする必要があることを意味します。
「いいね!」 1
Don
21
説明をありがとうございます 
ええ、わかります。ここで発生している問題はコンポーネントではなく、デバイスで「視差効果を減らす」設定が有効になっている場合のコアな問題です。お使いのデバイスで有効になっていますか?
「視差効果を減らす」がオフの場合、「header-cloak」(メニューの後ろの暗い領域)がクリック操作をブロックします。
デバイスで有効にすると、ユーザーのクリックをブロックしなくなります。
この場合、スワイプジェスチャーでメニューを安全に閉じることができます。
この問題については、どこかにトピックがあったと思います 
それはデフォルトのチャットヘッダーです。
そこにナビゲーションを有効にできるか確認します。
「いいね!」 3