<?php
/**
 * Header Navigation File
 *
 * @package Multipurpose Photography
 */
?>

<div id="header" class="<?php if( get_theme_mod( 'multipurpose_photography_sticky_header') != '') { ?> sticky-header"<?php } else { ?>close-sticky <?php } ?>">
	<div class="container">
	    <div class="row">
	    	<div class="<?php if(get_theme_mod('multipurpose_photography_show_search',true)) { ?>col-lg-11 col-md-11 col-10" <?php } else { ?>col-lg-12 col-md-12 <?php } ?>">
	    		<?php ?>
		    		<div class="toggle-menu responsive-menu p-2 my-2 text-start">
						<button role="tab"><i class="<?php echo esc_html(get_theme_mod('multipurpose_photography_menu_open_icon','fas fa-bars')); ?>"></i><?php echo esc_html( get_theme_mod('multipurpose_photography_mobile_menu_label', __('Menu','multipurpose-photography'))); ?><span class="screen-reader-text"><?php echo esc_html( get_theme_mod('multipurpose_photography_mobile_menu_label', __('Menu','multipurpose-photography'))); ?></span></button>
			        </div>
	                <div id="sidelong-menu" class="nav side-nav mobile-sidenav">
						<nav id="primary-site-navigation" class="nav-menu" role="navigation" aria-label="<?php esc_attr_e( 'Top Menu', 'multipurpose-photography' ); ?>">
							<?php 
							  wp_nav_menu( array( 
							    'theme_location' => 'primary',
							    'container_class' => 'main-menu-navigation clearfix' ,
							    'menu_class' => 'clearfix',
							    'items_wrap' => '<ul id="%1$s" class="%2$s mobile_nav">%3$s</ul>',
							    'fallback_cb' => 'wp_page_menu',
							  ) ); 
							?>
							<a href="javascript:void(0)" class="closebtn responsive-menu p-1"><?php echo esc_html( get_theme_mod('multipurpose_photography_close_menu_label', __('Close Menu','multipurpose-photography'))); ?><i class="<?php echo esc_html(get_theme_mod('multipurpose_photography_menu_close_icon','fas fa-times-circle')); ?> m-3"></i><span class="screen-reader-text"><?php echo esc_html( get_theme_mod('multipurpose_photography_close_menu_label', __('Close Menu','multipurpose-photography'))); ?></span></a>
						</nav>
	                </div>
			    <?php ?>
	    	</div>
	    	<?php if(get_theme_mod('multipurpose_photography_show_search',true) ){ ?>
		    	<div class="search-box col-lg-1 col-md-1 col-2 ps-0 my-1 position-relative align-self-center">
		           <div class="wrap p-3"><?php get_search_form(); ?></div>
		        </div>
		    <?php }?>
	    </div>
	</div>
</div>