[SDG] Explore by sustainable development goals

[phillipahereza]

Description

Implement the SDG navigator Section as laid out in the Zeplin designs.

Screenshots

Step 1

Home Page

SDG landing page

Step 2

Agriculture not selected(grey) so all agriculture related SDGs are also greyed out

Step 3

Files

• Zeplin: https://app.zeplin.io/project/5ae37a224a28f19738a929fb

Tasks

• [x] Create the section
• [x] Add option to switch styles depending on which page this section is displayed e.g. {% include 'takwimu/_includes/report/section_sdg_nav.html' with page='homepage'%} would load the homepage styles and {% include 'takwimu/_includes/report/section_sdg_nav.html' with page='sdg_page'%} will show same section with SDG landing page styling
• [x] Style according to designs on Zeplin
• [x] Add animations and interactions

[mtuchi]

@phillipahereza are there mobile and tablet designs for this issue ?

[phillipahereza]

@mtuchi I think you should focus on desktop first

[phillipahereza]

@mtuchi make your PR