Implement the navigation and reduced navigation

[petesfrench]

Done

• Implement the navigation and reduced navigation HTML patterns
• Add Python logic to handle secondary navigation
• Add JS to handle the states of search and secondary navigation (dropdowns, mobile menu don't work). Most is boiler plate JS copied from Vanilla, u.com and the other c.com navigation

QA

• Go https://canonical-com-1290.demos.haus/ to and see the implementation of the regular navigation matches the vanilla navigation
• Go to https://canonical-com-1290.demos.haus/data and see the implementation of the reduced navigation matches the reduced navigation
• Check the search opens and closes as expected on the normal navigation, reduced navigation and mobile (for both)
• Check that on mobile, the secondary navigation dropdown functions properly

Issue / Card

Fixes https://warthogs.atlassian.net/browse/WD-12668

Screenshots

Regular navigation: Reduced navigation: Regular navigation (search open): Reduced navigation (search open):

[webteam-app]

Demo

Jenkins

demos.haus

[akbarkz]

@petesfrench Two findings with the Search functionality:

1. The background of the search field is black, while as on ubuntu.com it's white
2. The focus is not automatically put to the search field when you open it

[petesfrench]

@akbarkz

1. This is how appears on Vanilla with the is-dark them applied to the page, same as c.com. We should be aligning with Vanilla as much as possible, not u.com.
2. Fixed.

Can you take another look please?

[akbarkz]

@petesfrench After typing something into the search field and clicking on "X" icon to erase it, it doesn't work.

[petesfrench]

@akbarkz I think that is getting into the search implementation. My thought process behind this is that 'clear search' is something I would implement with the 'search initialization', along with the event listener for the search button, keyboard events, search functionality etc.

[petesfrench]

@akbarkz I think that is getting into the search implementation. My thought process behind this is that 'clear search' is something I would implement with the 'search initialization', along with the event listener for the search button, keyboard events, search functionality etc.