Lightning コミュニティ開発者ガイド
jステップ 4: 縦方向ナビゲーションメニューを作成する
サイドバーに縦方向ナビゲーションメニューを追加するには、抽象forceCommunity:navigationMenuBase コンポーネントを拡張する新しいコンポーネントを verticalNav という名前で作成します。
このコンポーネントには、コミュニティの [ナビゲーションメニュー] コンポーネントで定義されるナビゲーションメニュー項目へのアクセス権が自動的に付与されます。実際にその様子を見るために、ナビゲーションメニュー項目の順序なしリストを作成します。
このシンプルな順序なしリストは、拡張抽象コンポーネントで定義されている menuItems の配列を反復し、配列の各エントリに対して <li> を出力します。
コンポーネントをテストするため、condensedThemeLayout マークアップで、ナビゲーションのプレースホルダコメントがある 3 番目の列にコンポーネントを追加します。
エクスペリエンスビルダーを更新すると、メニュー項目が箇条書きになった縦方向のナビゲーションメニューが表示されます。コミュニティのデフォルトナビゲーションメニューと同じデータセットを使用しています。この例では、縦方向のナビゲーションメニューをトピックのナビゲーションには使用しません。項目を削除するには、 領域の [ナビゲーションメニュー] ボタンをクリックして、ナビゲーションからトピックを削除します。
verticalNav メニューに戻って整理しましょう。次は完成したコンポーネントのコードです。
この例では、Aura 式構文を利用して便利な処理を行っています。リスト項目が有効であるかどうかに応じて、slds-is-active クラスを条件的にリスト項目に追加できます。また、data-menu-item-id を項目の一意の ID として設定します。この ID は、後で対応する項目への移動に使用できます。このように、各リスト項目にクリックリスナを 1 つずつ追加するのではなく、リスト全体で必要なクリックリスナは 1 つだけで済みます。
コンポーネントのコントローラメソッドにクリックハンドラを追加します。HTML 要素のデータ属性にアクセスするための (項目の ID を取得できるようにする) JavaScript 構文に注意してください。
次の CSS ルールをテーマレイアウトコンポーネントに追加して、不要な余白を削除し、メインコンテンツの幅を設定します。