네비게이션 사이드바

요약

재설계된 네비게이션 사이드바에 항목을 추가하거나 변경할 때는 다음 가이드라인을 검토하고 따르세요. 이 가이드라인은 현재 네비게이션 사이드바의 상태를 반영합니다. 사이드바에 항목을 추가하기 전에, 네비게이션에 관한 핸드북 페이지에 기술된 프로세스를 검토하고 따르세요.

재설계된 네비게이션 사이드바에 항목을 추가하거나 변경할 때는 다음 가이드라인을 검토하고 따르세요.

이 가이드라인은 현재 네비게이션 사이드바의 상태를 반영합니다. 그러나 사이드바는 아직 개발 중이며, 이 문서도 마찬가지입니다.

사이드바에 항목 추가하기#

사이드바에 항목을 추가하기 전에, 네비게이션에 관한 핸드북 페이지에 기술된 프로세스를 검토하고 따르세요.

페이지별 Vue 콘텐츠 추가하기#

페이지는 SidebarPortal 컴포넌트를 사용하여 사이드바에 임의의 콘텐츠를 렌더링할 수 있습니다. 기본 슬롯에 전달된 콘텐츠는 사이드바에서 해당 페이지의 네비게이션 항목 아래에 렌더링됩니다.

주어진 페이지에서 이 컴포넌트의 인스턴스는 하나만 지원됩니다. 이는 순서 문제와 사이드바가 복잡해지는 것을 방지하기 위함입니다.

임의의 콘텐츠를 사용할 수 있습니다. 네비게이션 항목은 ::Sidebars::Panel을 서브클래싱하여 구현하는 것이 좋습니다. Vue Router를 사용해야 하는 경우처럼 반드시 Vue를 사용하여 네비게이션 항목을 렌더링해야 한다면 예외를 만들 수 있습니다. 그러나 해당 panel.rb 파일에는 네비게이션 항목이 어떻게 렌더링되는지 설명하는 주석을 반드시 추가해야 합니다.

SidebarPortalTarget 컴포넌트는 사용하지 마세요. 이 컴포넌트는 사이드바 내부용입니다.

Snowplow 트래킹#

네비게이션 항목에 대한 모든 클릭은 Snowplow에서 자동으로 트래킹되지만, 추가 입력이 필요할 수 있습니다. 네비게이션의 모든 요소에 data-tracking 속성을 사용하여 데이터를 Snowplow로 전송합니다. GDK에서 Snowplow를 설정하여 정상적으로 작동하는지 테스트할 수 있습니다.

필드	데이터 속성	예시	비고
Category	data-tracking-category	groups:show	항목이 클릭되었을 때 사용자가 있던 페이지입니다.
Action	data-tracking-action	click_link	수행된 동작입니다. 대부분의 경우 click_link 또는 click_menu_item입니다.
Label	data-tracking-label	group_issue_list	클릭된 항목에 대한 설명자입니다. 대부분의 경우 항목의 ID로 추론되지만, ID가 없는 경우 item_without_id로 대체됩니다. 주의가 필요한 항목입니다.
Property	data-tracking-property	nav_panel_group	네비게이션에서 링크가 클릭된 위치를 설명합니다. 메인 네비게이션 패널에 있는 경우, 어느 패널인지 설명해야 합니다.