feat: implement section navigation

[ramboz]

Adds the section navigation dropdown menu just below the header.

Fix #92

Test URLs:

• Before: https://main--delta--hlxsites.hlx.page/us/en/skymiles/how-to-earn-miles/overview
• After: https://issue-92--delta--hlxsites.hlx.page/us/en/skymiles/how-to-earn-miles/overview

[aem-code-sync[bot]]

Hello, I'm Franklin Bot and I will run some test suites that validate the page speed. In case there are problems, just click the checkbox below to rerun the respective action.

• [ ] Re-run PSI Checks

[aem-code-sync[bot]]

Page	Score	PSI Audit	Google
/us/en/skymiles/how-to-earn-miles/overview

[ramboz]

[aem-code-sync[bot]]

Page	Score	PSI Audit	Google
/us/en/skymiles/how-to-earn-miles/overview

[aem-code-sync[bot]]

Page	Score	PSI Audit	Google
/us/en/skymiles/how-to-earn-miles/overview

[asthabh23]

@ramboz , few observations from my side which would require a fix:

1. On clicking an item in the submenu list, the other open item should collapse. Current franklin site (here both submenu options are visible at the same time):

Original site (when one is visible, others should collapse):

2. The red up and down arrows seem to be a bit bigger in size compared to original site. Also, they are not visible between 768px and 1200px. Current site (at 1000px):

Original site (at 1000px):

3. Below 768px, the menu seems to have some margin around it on original site, which is missing in our implementation (we can keep the current version too, still just a point in case required to be modified): Current franklin site:

original Delta site:

**Inputs/suggestions on some improvements we already have in place** The original site section navigation seems to be a bit off:

• On clicking on the main header, the menu below it appears, but clicking on it again doesn't allow to close the menu - our implementation seems better here and we should keep it that way for better usability.
• even on clicking twice on the menu options and even on the main menu heading, they don't collapse as it ideally should - our implementations seems better to me So we can have these as it is for better user experience.

[ramboz]

@asthabh23 Thanks for the thorough review! I agree on all points and have addressed those in the latest commit. I also added a bit of animation like on the official website.

[aem-code-sync[bot]]

Page	Score	PSI Audit	Google
/us/en/skymiles/how-to-earn-miles/overview

[aem-code-sync[bot]]

Page	Score	PSI Audit	Google
/us/en/skymiles/how-to-earn-miles/overview

[aem-code-sync[bot]]

Page	Score	PSI Audit	Google
/us/en/skymiles/how-to-earn-miles/overview

[asthabh23]

@ramboz , thanks for the fixes you have added. Few observation points:

1. When I hover/focus over the section navigation menu, I see a layout shift that happens (the downward arrow next to "GET TO KNOW SKYMILES" along with "How to Earn miles" - these two together shift towards the right). These needs a fix

2. There is a slight gap between the section and the menu that pops up on clicking "GET TO KNOW MILES" Reference screenshot:

   

3. On original site, when I click on "GET TO KNOW MILES", there is a border that comes up, possibly we can add that as well.

   

[aem-code-sync[bot]]

Page	Score	PSI Audit	Google
/us/en/skymiles/how-to-earn-miles/overview

[ramboz]

@asthabh23 I think I addressed the 3 points… if I understood those correctly. Let me know what you think!

[ramboz]

Yeah good point on the header leaking into the new styles

[aem-code-sync[bot]]

Page	Score	PSI Audit	Google
/us/en/skymiles/how-to-earn-miles/overview