Make amp-sidebar sample validate

[sebastianbenz]

amp-sidebar requires that the sidebar is the first element after the body tag. With ABE's column layout this is not possible. We need to find a way to move the amp-sidebar there in the generated sample. Currently, it still works but doesn't validate.

[maddoxnelson]

CC @andrewwatterson -- this is the UI issue I was discussing with you at the Amp Conf in Tokyo today. I went to file an issue and found this one, plus the other two, outstanding from a couple years ago.

For some context, this was the Stack Overflow question I asked a couple years back: https://stackoverflow.com/questions/39857415/amp-sidebar-does-it-absolutely-have-to-be-the-child-of-the-body-why

At the time, @cramforce had filed this tweet: https://twitter.com/cramforce/status/783352472014233600

What I'm wondering is: Are there still valid reasons for not allowing amp-sidebar to be anything else other than the child of the body?

Something else that's this confusing -- on the amp-sidebar docks: https://amp.dev/documentation/examples/components/amp-sidebar/

The example seems to be a child of a div element, but I am certain that wouldn't validate, unless the requirements of amp-sidebar have changed.

[maddoxnelson]

Unrelated, but your live coding session was awesome! :D

[maddoxnelson]

(Last note) it does appear as if the docs are incorrect -- amp-sidebar still doesn't validate if it is not the direct child of the body. You can view the behavior at this repo I've put together here: https://github.com/maddoxnelson/sidebar-amp-conf-demo

Thanks all!

[andrewwatterson]

cc @ampproject/wg-ui-and-a11y