Create a template for the sidebar

// sidebar.php
<amp-sidebar id="sidebar-nav-menu" layout="nodisplay" sizes="(min-width:500px) 360px, 80vw">
	<button on="tap:sidebar-nav-menu.close">
		<i class="fa fa-close" aria-hidden="true"></i>
	</button>
	<?php wp_nav_menu(/*...*/); ?>
</amp-sidebar>

You'll probably need to fork your menu walker and customize it to output amp-accordions and sections.

Then load the template in header-bar.php or where you need it:

$this->load_parts(['sidebar']);

and also add a trigger button:

<button class="hamburger fa fa-bars" on="tap:sidebar-nav-menu.toggle"></button>

If the sidebar is going to be on every page you can import your dependancies normally in functions.php or something:

add_filter('amp_post_template_data', function($data) {
	$data['font_urls']['FontAwesome'] = 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';
	$data['amp_component_scripts']['amp-sidebar'] = 'https://cdn.ampproject.org/v0/amp-sidebar-0.1.js';
	$data['amp_component_scripts']['amp-accordion'] = 'https://cdn.ampproject.org/v0/amp-accordion-0.1.js';
	return $data;
});

I'm not sure about "hot importing". You could add some conditions to the function where scripts are loaded and same conditions to the $this->load_parts(['sidebar']) so they match. Or for example if you only want to load an AMP script when a certain shortcode is on the page, then I believe you are able to add that filter in the shortcode's render function.

How to add navigation menu and sidebar menu #792

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions