AMP-Sidebar: WordPress AMP sidebar plugin. To use simple add the [jz-sidebar] shortcode into a widget or template file. Apply any menu to the newly created "AMP sidebar menu" menu once activated. Appears in AMP URLs only.

amp-wp-sidebar.php

<?php
/**
 * Plugin Name: AMP - sidebar - jamesozz.ie
 * Plugin URI: http://www.jamesozz.ie
 * Description: AMP-sidebar component shortcode. 
 * Version: 1.0
 * Author: James Osborne
 * Author URI: http://www.jamesozz.ie
 */

 // Custom menu walker

 class jz_slidemenu_Walker extends Walker_Nav_Menu {
    
    public function start_lvl( &$output, $depth = 0, $args = array() ) {
    		$output .= ' <amp-carousel height="1.8rem" layout="fixed-height" controls type="carousel" class="primary-nav fade">';
    }
	// Displays start of an element. E.g '<li> Item Name'
    // @see Walker::start_el()
    function start_el(&$output, $item, $depth=0, $args=array(), $id = 0) {
    	$object = $item->object;
    	$type = $item->type;
    	$title = $item->title;
    	$description = $item->description;
    	$permalink = $item->url;

      $output .= "<span'" .  implode(" ", $item->classes) . "'>";
        
      //Add SPAN if no Permalink
      if( $permalink && $permalink != '#' ) {
      	$output .= '<a href="' . $permalink . '">';
      } else {
      	$output .= '<span>';
      }
       
      $output .= $title;

      if( $description != '' && $depth == 0 ) {
      	$output .= '<small class="description">' . $description . '</small>';
      }

      if( $permalink && $permalink != '#' ) {
      	$output .= '</a>';
      } else {
      	$output .= '</span>';
      }
    }

     function end_el( &$output, $item, $depth = 0, $args = array() ) {
     		$output .= '</span>';
     }

     public function end_lvl( &$output, $depth = 0, $args = array() ) {
     		$output .= '</amp-carousel>';
     }
}

class jz_dropdown_Walker extends Walker_Nav_Menu {
    static $count=0;
    public function start_lvl( &$output, $depth = 0, $args = array() ) {
    		

    }
	// Displays start of an element. E.g '<li> Item Name'
    // @see Walker::start_el()
    
  function start_el(&$output, $item, $depth=0, $args=array(), $id = 0) {
  	if($depth == 0 and $count == 0 and $args->walker->has_children)
  	{
  			$output .= '<li class="sidebar-parent-container"><amp-accordion disable-session-states><section><h3 class="nested-accordion"><a href='. $item->url.' role="button" aria-expanded="false" tabindex="0">'.$item->title.'</a></h3><ul>';
  	}
  	else
  	{
  		$output .= '<li><a href='. $item->url.'>'.$item->title.'</a>';
  	}	
  	self::$count++;	
  }
  function end_el(&$output, $item, $depth=0, $args=array(), $id = 0) {
  	if($depth == 0 & $count == 0)
  	{
  			$output .= '</ul></section>';
  	}
  	else
  	{
  		$output .= '</li>';
  	}	
  	self::$count++;	

  }
     public function end_lvl( &$output, $depth = 0, $args = array() ) {
     		if($args->walker->has_children)
     	{
     		$output .= '</amp-accordion> </li>';
     	}
     	$output .= '</li>';
     }
}

// add menu to sidebar

function add_head_html() { 
	
	if ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ) {


	
	?>


<amp-sidebar class="af_sidebar" id="sidenav" layout="nodisplay" side="left">
    <svg class="sidenav-close" xmlns="http://www.w3.org/2000/svg" width="26" height="26" on="tap:sidenav.close"
        role="button" tabindex="0" viewBox="0 0 21.97 21.97">
        <title>Close sidebar</title>
        <path fill="none" stroke="#222" stroke-width="4.5" stroke-miterlimit="10"
            d="M1.25 20.72L20.72 1.25m-19.47 0l19.47 19.47" stroke-linecap="round" />
    </svg>
    <nav>
        <?php
				wp_nav_menu( array(
					'theme_location' => 'amp_sidebar_menu',
					'menu_class'     => 'primary-menu',
					'walker' => new jz_dropdown_Walker()
				 ) );
			?>
    </nav>
</amp-sidebar>


<?php } }
   add_action( 'wp_body_open', 'add_head_html' );


// Load CSS
function jz_load_css() {
    $plugin_url = plugin_dir_url( __FILE__ );
    wp_enqueue_style( 'jz_sidebar', $plugin_url . 'style.css' );
}
add_action( 'wp_enqueue_scripts', 'jz_load_css' );

// Register the nav menu location  
register_nav_menus( array(
    'amp_sidebar_menu' => 'AMP sidebar menu',
) );

// Add sidebar component script
add_filter(
	'amp_post_template_data',
	function( $data ) {
		$data['amp_component_scripts'] = array_merge(
			$data['amp_component_scripts'],
			array(
				'amp-sidebar' => true
			)
		);
		return $data;
	}
);

// Create shortcode
 
function jz_shortcode() { 
 
	$message = '
	
 
								<svg class="sidenav-btn" on="tap:sidenav.open" role="button" tabindex="0" width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30.5 24.5">
									<g fill="none" stroke="#111" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.5px">
										<line x1="1.25" y1="1.25" x2="29.25" y2="1.25"></line>
										<line x1="1.25" y1="12.25" x2="29.25" y2="12.25"></line>
										<line x1="1.25" y1="23.25" x2="29.25" y2="23.25"></line>
									</g>
								</svg>
	 


	
	'; 
	 
	// Output needs to be return
	return $message;
	} 
	// register shortcode
	add_shortcode('jz-sidebar', 'jz_shortcode'); 

style.css

amp-sidebar nav {
	padding: 0 20px;
 
}
.sidenav-btn{display:none}
[amp] .sidenav-btn{display:inline}

#sidenav {
	background-color: #222;
 
	width: 305px;
	-moz-box-shadow: 0.2rem 0 1rem rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0.2rem 0 1rem rgba(0, 0, 0, 0.5);
	box-shadow: 0.2rem 0 1rem rgba(0, 0, 0, 0.5);
	text-align: right;
}
#sidenav li, #sidenav h3 {
	list-style: none;
	border: 0;
	border-bottom: 1px solid #555;
	text-align: left;
	font-weight: normal;
	outline: none;
}
#sidenav h3 {}
#sidenav li a {
	color: #fff;
	text-decoration: none;
	width: 90%;
	display: inline-block;
}
#sidenav li.sidebar-parent-container {
	border-bottom: 0;
}
.sidebar_socialaccounts {
	padding: 30px 20px;
}
.header-top {
	display: flex;
}
.sidenav-btn {
	padding-top: 0.5rem;
	/* fix for iOS responsiveness*/
	z-index: 9999;
}
.sidenav-close {
	padding: 10px 10px 0 0;
}
amp-accordion section h3::after {
	position: absolute;
	right: 17px;
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}
amp-accordion section[expanded] h3::after {
	content: '⟨';
}
amp-accordion section:not([expanded]) h3::after {
	/* Unicode: U+276F, UTF-8: E2 9D AF content: '\00276F';*/
	content: '⟩';
}
@keyframes opening {
	0% {
		height: 0;
	}
	100% {
		height: 250px;
	}
}
.af_sidenav_btn {
	text-align: right;
	width: 100%;
}
path {
	stroke: #fff;
}
.af_sidebar ul, .af_sidebar ol {
	margin: 0 0 0em 0em;
	padding: 0;
	line-height: 50px;
}
.af_sidebar ul, .af_sidebar ol, #sidenav a {
	font-size: 16px;
	line-height: 50px;
}
.af_sidebar ul li a, .af_sidebar ol li a {
	padding: 0px 0;
	line-height: 50px;
}
.af_sidebar amp-accordion a {
	padding: 0px 0;
	line-height: 50px;
}
.af_sidebar .nested-accordion {
	background: transparent;
	border: 1px solid #fff;
}
.af_sidebar amp-accordion section[expanded] h3::after {
	stroke: #fff;
	color: #ffff;
	padding: 10px 0;
	font-size: 16px;
}
.af_sidebar amp-accordion section:not([expanded]) h3::after {
	font-size: 16px;
	color: #ffff;
	padding: 10px 0;
}
.af_sidebar li.sidebar-parent-container ul li a::before {
	content: "-";
	padding-right: 15px;
}
.af_sidebar section h3::after {
	color: #efefef;
	font-size: 16px;
	padding: 10px 0;
	content: "⟨";
}