Forward root element styles to mobile navigation menu

[ang-zeyu]

What is the purpose of this pull request?

• Documentation update
• Bug fix
• Feature addition or enhancement
• Code maintenance
• Others, please explain: Another follow up to discussion in Use portals for mobile site and page nav #1556

Goes on top of #1561!
Relevant commit here is 205426e

Overview of changes:

• Forward class and style of the root element to the mobile navigation menu as well
• Edit a small style in the docs / test / template site stylesheets to accomodate this

Anything you'd like to highlight / discuss:
na

Testing instructions:

<div id="site-nav" class="some-custom-class" style="and this">
...
</div>

Should work

Proposed commit message: (wrap lines at 72 characters)
Forward root element styles to mobile navigation menu

---

Checklist: ☑️

• Updated the documentation for feature additions and enhancements
• Added tests for bug fixes or features
• Linked all related issues
• No blatantly unrelated changes
• Pinged someone for a review!

[jonahtanjz]

Nice work and it looks good @ang-zeyu :)

With this change, the updated page nav will have a longer grey border compared to the previous implementation.

I wonder if we should hide the border (on desktop) if the page nav is empty now that it is more apparent? 🤔

[ang-zeyu]

Thanks for the review and catch! @jonahtanjz

I've fixed it by adding align-items: start to the flex container.
The default https://developer.mozilla.org/en-US/docs/Web/CSS/align-items was causing it stretch instead.

There's still a small little amount of border left, but this is an existing separate issue due to the .nav-component element having some padding. It requires some shifting of where the paddings of the containers are applied. I'll fix it separately!

[jonahtanjz]

LGTM 👍