<SideNavigation /> component that can be used to display multiple links on a page for easier navigation

[Andrew-K-Lam]

Problem Statement

• We need a component that displays all relevant links to other pages or sections within a page, for easier navigation through large amounts of information

Recommendation

Create a SideNavigation component that takes in Links and Text and displays them as a column, gets hidden on mobile screens, and has an active status if a user is currently on that page or section

Designs

https://telus.invisionapp.com/share/4BO1W0S6KYT#/329060751_UX_Reference_Architecture_

Updated Nov 30th: https://telus.invisionapp.com/share/FCP1G7TWPEU#/screens/333324266

Meta

• Willing to design solution: Yes
• Willing to develop solution: Yes
• Has workaround: No
• Do any similar components already exist in TDS (core or community): No
• Does this pattern exist already but isn’t a community component? No
• Which teams/applications do you think would use this improvement? Any
• High impact: Yes?

[varunj90]

hey @Andrew-K-Lam this will be brought to the design leads meeting this friday - we'll reach out to you shortly.

cc: @lucylist

[Andrew-K-Lam]

cc: @elenaverling

[varunj90]

this is good w.r.t design @Andrew-K-Lam let us know if you're contributing this to community!

design for mobile is in progress and will be shared once ready.
cc: @elenaverling @abansil

[Andrew-K-Lam]

User Story
As a TDS-Community consumer, I want to display a Side Navigation Component that will consist of Links and Submenus containing links, put together in one standalone Component as per the approved design.

Acceptance Criteria: Component
Given I am displaying the component

When I supply it with Links and Submenus

Then I should see the Side Navigation placed on the page, Links should be clickable and navigate to the desired page, and the link will be highlighted.
SubMenus should only have one open at a time, and should expand to show all desired sub page links. SubMenu will be highlighted when on the current page.

[theetrain]

The React component has been released: @tds/community-side-navigation

[varunj90]

assignees have been added on closed issue to reflect power level (points) on community heroes board (coming soon!)

[varunj90]

This is now released in code and DSM and available on https://tds.telus.com/community/index.html#side-navigation