내비게이션 사이드바

다시 디자인된 내비게이션 사이드바에 추가하거나 변경하는 경우 이 지침을 따르세요.

이 지침은 현재 내비게이션 사이드바의 상태를 반영하고 있습니다. 그러나 사이드바는 작업 중인 것이며, 이 문서도 마찬가지입니다.

새 내비게이션 사이드바 활성화

새 내비게이션 사이드바를 활성화하려면 아바타를 선택한 다음 New navigation 토글을 켜세요.

사이드바에 항목 추가

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

페이지별 Vue 콘텐츠 추가

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

참고: 주어진 페이지에서 이 컴포넌트의 인스턴스는 한 개만 지원됩니다. 이는 순서 문제와 사이드바 혼잡을 피하기 위함입니다.

참고: 임의의 콘텐츠를 사용할 수 있습니다. ::Sidebars::Panel의 서브클래싱을 통해 내비게이션 항목을 구현해야 합니다. Vue Router를 사용해야 하는 경우에만 Vue를 사용하여 내비게이션 항목을 렌더링해야 합니다. 그러나 해당 panel.rb 파일에 내비게이션 항목이 어떻게 렌더링되는지 설명하는 주석을 추가해야 합니다.

참고: SidebarPortalTarget 컴포넌트를 사용하지 마십시오. 이는 사이드바의 내부 구성 요소입니다.

Snowplow 추적

내비게이션 항목을 클릭하면 모두 Snowplow에서 자동으로 추적되어야 하지만, 추가 입력이 필요할 수 있습니다. 내비게이션에서 데이터를 Snowplow로 전송하려면 모든 요소에 data-tracking 속성을 사용합니다. 이러한 기능이 제대로 작동하는지 확인하려면 GDK에 Snowplow를 설정하세요.

필드 데이터 속성 참고 예시
카테고리 data-tracking-category 사용자가 항목을 클릭할 때의 페이지입니다. groups:show
액션 data-tracking-action 취해진 작업입니다. 대부분의 경우 click_link 또는 click_menu_item입니다. click_link
라벨 data-tracking-label 클릭한 항목에 대한 기술자입니다. 대부분의 경우 아이템의 ID에 의해 추론되지만, item_without_id로 대체될 수 있습니다. 이 부분을 주의해야 합니다. group_issue_list
속성 data-tracking-property 링크를 클릭한 내비게이션의 위치를 설명합니다. 주 내비게이션 패널에 있다면 해당 패널을 설명해야 합니다. nav_panel_group