Implement Amp Slide-out side panel

[heatloss]

Overview

In order to maximize use of screen real-estate for page content, many mobile-optimized pages hide their main navigation in a slide-out panel, often invoked via a "hamburger" icon. This panel generally contains the global site navigation, site settings, and sometimes miscellaneous information that would normally go in a footer.

Many publications looking to port their existing mobile-optimized web pages to AMP are already using some variation of the slide-out panel, so providing AMP-native support for one should help lower the barrier to adoption.

Usage

<amp-panel-button />
<amp-panel>
        <nav>
                <ul>
                        <li><a href="/">Home</a></li>
                        <li><a href="section1">Section 1</a></li>
                        <li><a href="section2">Section 2</a></li>
                        <li><a href="section3">Section 3</a></li>
                </ul>
        </nav>
        <small>All rights reserved</small>
</amp-panel> 

Behavior

The <amp-panel-button> element becomes a <button> tag, while the element becomes a <div> tag which loads offscreen via transform: translateX() styles, or the browser-appropriate equivalent.

Tapping/clicking on the panel button reveals the panel via animation.

The panel does not obscure the content area completely. It leaves a portion of the content area visible but inert, i.e. links and widgets do not respond to interaction, and the content area should not scroll while the panel is open. (The disabling effect is usually achieved using an invisible or translucent "scrim" element that overlays the content, but could also be handled via JavaScript event interception.) Clicking or tapping in the visible portion of the content retracts the panel and restores the content area to its interactive state.

The panel contents scroll independently of the main content area.

Constraints

To enforce appropriate usage of the panel, the following constraints apply:

• <amp-img> and <amp-iframe> tags are disallowed within <amp-panel>
• Only one <amp-panel> is allowed per page.
• <amp-panel-button> and <amp-panel> tags can only be placed inside the <header> tag.
• The open <amp-panel> will expand to the width of the elements it contains, to a maximum of 85% of the width of the page.

[dvoytenko]

/to @ericlindley-g

[ericlindley-g]

Sorry for the delayed response on this! We are currently working on a solution in amp-sidebar, informed in part by this ITI, in order to address this use case.

[dvoytenko]

@ericlindley-g Could you please dedupe this issue?

[ericlindley-g]

Closing as an effective duplicate of #2461

[ericlindley-g]

Also dup'ing to: #827