Design System Component: Element: Inner Modal Nav

[Aveline-art]

Dependency

• [x] #62
• [x] #63
• [x] #69
• [x] #70
• [x] #71
• [x] #72

Overview

As a developer, we should start with a component first philosophy when creating new webpages. For this issue we will be developing the navigation in the modal of the Landing Page.

Action Items

• [x] Review the design for the navigation of the modal element in the landing page in the Figma page indicated below
• [x] Be sure to review our architecture documentation to understand where to create and find files relevant to this component
• [x] Make sure that the component is:
  • [x] Responsive, and that the items adjust themselves as screen size changes (if applicable)
  • [x] Change from the desktop to mobile design after the mobile breakpoint (if applicable)
• [x] Release dependency on:
  • [x] #60
  • [x] #65

Resources/Instructions

Figma, Landing Page

Work for this issue has been partially done, as per #116. A brief list:

• The navigation in desktop is done
• Layouts were added to support the placement of the Inner CoP nav and Inner CoP Card in desktop view
• SVGs are fixed to allow recoloring and resizing in React rather than hard-coded
• JS and CSS are done to allow the nav to function as intended

Work still need to be done:

• Recreate the navigation in mobile

Do note that the navigation in mobile is done via a series of swipes. This makes it more akin to a carousel than as a navigation component. Depending on the developer's opinion, the swiping navigation might be an entirely new set of components.

[Aveline-art]

Going to make edits to this issue as it grew into something a lot bigger than it should be. Work is partially done as outlined in #116, which will be noted in the top comment. The unfinished work will also be noted as well.