Reader mode: Navigation menu & search popup extension

amp_reader_search_and_nav.php

<?php
/**
 * Plugin Name: AMP Reader Mod Search Box and Navigation
 *
 * @package   AMP_Reader_Search_and_Nav
 * @author    James Osborne, Google
 * @license   GPL-2.0-or-later
 * @copyright 2019 Google Inc.
 *
 * @wordpress-plugin
 * Plugin Name: AMP Reader Search Box and Navigation
 * Description: Add nav menu & search box for Reader mode templates. If in Reader mode, upon activation you'll see a new nav menu location to which you can <a href="nav-menus.php">assign the desired nav menu</a>.
 * Plugin URI:  https://gist.github.com/jamesozzie/430555b1b7c539e8d98b7c660a8dc707
 * Version:     0.1.0
 * Author:      James Osborne, Google
 * Author URI:  https://aztecdesign.ie/
 * License:     GNU General Public License v2 (or later)
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 */

namespace AMP_Reader_Nav_Menu;

const NAV_MENU_LOCATION = 'amp_reader_sidebar';

// Register the nav menu location if not in Standard/Transitional modes.
add_action(
	'init',
	function() {
		if ( ! current_theme_supports( 'amp' ) ) {
			register_nav_menu( NAV_MENU_LOCATION, __( 'AMP Reader Sidebar', 'amp_reader_search_and_nav' ) );
		}
	}
);

add_filter(
	'amp_post_template_file',
	function ( $template_file ) {
		if ( basename( $template_file ) === 'header-bar.php' ) {
			$template_file = __DIR__ . '/header-bar.php';
		}
		return $template_file;
		
		
		
	}
);
 

add_filter(
	'amp_post_template_data',
	function( $data ) {
		$data['amp_component_scripts'] = array_merge(
			$data['amp_component_scripts'],
			array(
				'amp-sidebar' => true,
				'amp-form' => true,
			)
		);
		return $data;
	}
);
 
add_action(
	'amp_post_template_css',
	function () {
		printf(
			'
			#toggleNavMenu { font-size: 24px ; padding: 0 12px; height:44px; color: #fff; position: relative; float:left;margin-right:25px;  background: rgba(000,000,000,0.2); border: none; }
      #navMenu { padding: 1em 2em; } 
      #navMenu ul {margin: 0 0 0em;}
      #navMenu li,#navMenu li li { display: block;margin: 0 0 0em; }
      #navMenu li a,#navMenu li li a{ padding: 0 0 0em; line-height:32px; }
      #navMenu li li a::before{ content:" - "; padding-left:10px; }
      #navMenu li a,#navMenu li a:hover  { text-decoration: none }
			',
			is_rtl() ? 'right' : 'left'
		);
	}
);


add_action( 'amp_post_template_css', function() {
	?>
div#modal1{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
height:100%;
width:100%;
z-index: 999;
}
.modal {
margin-top:30px;
padding: 8px 20px 20px 20px ;
background: #fff;
border: 1px solid #666;
max-width: 340px;
height: 100px;
border-radius: 6px;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
.modal .content {
height:100%;
overflow: none;
padding-top:30px;
}
.overlay {
height: 100%;
overflow: scroll;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
transition: opacity 200ms;
visibility: hidden;
opacity: 0;
}
.overlay .cancel {
position: absolute;
width: 100%;
height: 100%;
cursor: default;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.af_searchbutton{
max-width: 200px;
padding: 0px 0px;
}
.modal .af_searchbutton{
margin: 0 auto;
}
.af_searchbutton button{
padding-top:8px;
}
.af_searchbutton .search {
width: 100%;
position: relative;
display: flex;
}
.af_searchbutton .search input[type=text] {
font-size: 15px;
line-height: 28px;
height: auto;padding: 0px 6px;
}
.af_searchbutton .searchTerm {
width: 100%;
border: 3px solid #EAEAEA;
border-right: none;
padding: 5px; height: 36px;
border-radius: 3px 0 0 3px;
outline: none;
}
.af_searchbutton .searchTerm:focus{
color: #444;
}
.af_searchbutton .searchButton {
width: 40px;
height: 36px;
border: 1px solid #EAEAEA;
background: #EAEAEA;
text-align: center;
color: #fff;
border-radius: 0 3px 3px 0;
cursor: pointer;
font-size: 20px;
}
.standalone_searchButton {
width: 36px;
text-align: center;
border-radius: 0px;
cursor: pointer;
font-size: 20px;
border: none;
background: transparent;
padding: 12px 0 0 0 ;
float:right;
}
.standalone_searchButton path,.standalone_searchButton g{
stroke: #fff;
}
.amp-site-title{
color: #fff;
display: block;
font-weight: 900;
text-transform:uppercase; font-size: 1.3em;
padding: 8px 0 0 0;
}
.amp-wp-header div {
    padding: 0px 0px 0px 0px;
min-height:44px;
}
<?php
} );

header-bar.php

<?php
/**
 * Header bar template part.
 *
 * This is a forked version of the header-bar.php in the AMP plugin.
 *
 * @link https://github.com/ampproject/amp-wp/blob/e63d2c3034d079f1a1b5bb2f0a2d1e0a221cadb9/templates/header-bar.php
 * @package AMP_Reader_Nav_Menu
 */

namespace AMP_Reader_Nav_Menu;

/**
 * Context.
 *
 * @var \AMP_Post_Template $this
 */

?>
<div id="modal1" class="overlay">
    <a class="cancel" href="#"></a>
    <div class="modal">
        <div class="content">

            <form role="search" method="get" id="searchform" class="searchform" action="<?php echo site_url(); ?>"
                target="_top">
                <label class="screen-reader-text" for="s"></label>
                <div class="af_searchbutton">
                    <div class="search">
                        <input type="text" value="" name="s" id="s" class="searchTerm" placeholder="Search..."
                            autofocus="" tabindex="1">
                        <button type="submit" class="searchButton" id="searchsubmit" value="Search">
                            <svg style="height:1em;" viewBox="0 0 12 13">
                                <g stroke-width="2" stroke="#fff" fill="none">
                                    <path d="M11.29 11.71l-4-4"></path>
                                    <circle cx="5" cy="5" r="4"></circle>
                                </g>
                            </svg>
                        </button>
                    </div>
                </div>
            </form>


        </div>
    </div>
</div>
<header id="top" class="amp-wp-header">
    <div>


        <?php if ( has_nav_menu( NAV_MENU_LOCATION ) ) : ?>
        <button id="toggleNavMenu" type="button" on="tap:navMenu.open"
            aria-label="<?php esc_html__( 'Open nav menu', 'amp-reader-nav-menu' ); ?>">&#9776;</button>
        <?php endif; ?>



        <a href="#modal1" class="button">
            <button type="submit" class="standalone_searchButton" id="searchsubmit" value="Search">
                <svg style="height:0.9em;" viewBox="0 0 12 13">
                    <g stroke-width="2" stroke="#666" fill="none">
                        <path d="M11.29 11.71l-4-4"></path>
                        <circle cx="5" cy="5" r="4"></circle>
                    </g>
                </svg>
            </button>
        </a>

        <a href="<?php echo esc_url( $this->get( 'home_url' ) ); ?>">
            <?php $site_icon_url = $this->get( 'site_icon_url' ); ?>
            <?php if ( $site_icon_url ) : ?>
            <amp-img src="<?php echo esc_url( $site_icon_url ); ?>" width="32" height="32" class="amp-wp-site-icon">
            </amp-img>
            <?php endif; ?>
            <span class="amp-site-title">
                <?php echo esc_html( wptexturize( $this->get( 'blog_name' ) ) ); ?>
            </span>
        </a>

        <?php $canonical_link_url = $this->get( 'post_canonical_link_url' ); ?>
        <?php if ( $canonical_link_url ) : ?>
        <?php $canonical_link_text = $this->get( 'post_canonical_link_text' ); ?>
        <a class="amp-wp-canonical-link" href="<?php echo esc_url( $canonical_link_url ); ?>">
            <?php echo esc_html( $canonical_link_text ); ?>
        </a>
        <?php endif; ?>
    </div>
</header>


<?php if ( has_nav_menu( NAV_MENU_LOCATION ) ) : ?>
<?php
	printf(
		'<amp-sidebar id="navMenu" layout="nodisplay" side="%s">%s</amp-sidebar>',
		esc_attr( is_rtl() ? 'right' : 'left' ),
		wp_nav_menu(
			[
				'location' => NAV_MENU_LOCATION,
				'echo'     => false,
				'depth'    => 3,
			]
		)
	);
	?>
<?php endif; ?>