ヘッダーサブメニューテーマコンポーネントがサイドバーの最下部を画面外に押し出す

UX
1

header submenusテーマコンポーネントがアクティブな場合、サイドバー下部のアイコンが画面から消えます。

https://cdn.screencast.com/uploads/g000302MBEXFEjy4eyPzZN1QY9lUH/LWR_Recording.mp4?sv=2021-08-06&st=2023-05-18T04%3A17%3A29Z&se=2023-05-19T04%3A17%3A29Z&sr=b&sp=r&sig=7%2B95Shu88XVl4t3jX%2BP9p8cxStR%2B2WKs4CSyK%2FzvaZc%3D

CSSの計算が間違っている可能性があります。

「いいね！」 4
2

カスタムヘッダーは計算に全く含まれていません。これは、テーマのheaderセクションに何かコンテンツを追加することで再現できます。

サイドバーとチャットに使用している計算では、Discourseヘッダーの高さを考慮し、いくつかの高さを計算する際に--header-offsetを変数として設定しています。

カスタムヘッダーを含めるのは少し難しいかもしれません。なぜなら、カスタムヘッダーのコンテンツは、Discourseヘッダーのようにデフォルトではスクロール時に固定されないからです。そのため、デフォルトで計算に含めると、スクロールしてカスタムヘッダーが消えたときに、高さが不正確になります。

例えば、カスタムヘッダーの高さ（デフォルトで約60px）だけ手動で--header-offsetを増やすと、スクロール時にサイドバーの上に隙間ができます。

カスタムヘッダーがビューからスクロールアウトされたときに、bodyに.dockedクラスを追加します。これを使用することは可能ですが、カスタムヘッダーの有無によってサイドバーの高さが調整される際に、目立つ遷移が発生します。これは.dockedがオンかオフかのどちらかであるためです。

スクロール可能なヘッダーが必要な場合は、カスタムヘッダーの高さだけ--header-offsetを増やすことができます。そして、.d-header-wrapのtop値をカスタムヘッダーの高さに設定します。

スクロールしないヘッダーの場合を改善するための解決策として、以下のことが考えられます。

  1. カスタムヘッダーの高さをチェックする
  2. カスタムヘッダーの高さを--header-offsetに含める
  3. スクロール位置に基づいて、--header-offset計算で使用されるカスタムヘッダーの高さを減算する。これにより、.dockedクラスではできない方法で、サイドバーの高さをより徐々に調整できます。

正しく実装するには、ある程度の実験が必要になるかもしれません。

「いいね！」 5
3

それはとても参考になります、ありがとうございます @awesomerobot

(これを UX に移動しました)

「いいね！」 4
4

これはここで実装されました（@david に大いに感謝します）。

これにより、サイドバー、チャット、およびカスタムヘッダーコンテンツに関するその他の問題が解決されるはずです。

「いいね！」 4