<?php

/**
 * Template part for displaying the header content
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package studio-up
 */

?>

<header id="masthead">
	<div id="slide"></div>
	<div id="nav-container">
		<nav id="site-navigation" aria-label="<?php esc_attr_e('Main Navigation', 'studio-up'); ?>">
			<div id="logo">
				<a href="<?php echo esc_url(home_url('/')); ?>">
					<img src="<?= esc_url(wp_get_attachment_image_src(get_theme_mod('custom_logo'), 'full')[0]) ?>"
						class="custom-logo" alt="<?= get_bloginfo('name') ?>" decoding="async">
				</a>
			</div>
			<div id="menu">
				<button data-collapse-toggle="navbar-default" type="button"
					class="inline-flex items-center bg-white p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200"
					aria-controls="navbar-default" aria-expanded="false">
					<span class="sr-only">Open main menu</span>
					<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
						viewBox="0 0 17 14">
						<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
							d="M1 1h15M1 7h15M1 13h15" />
					</svg>
				</button>
				<div
					class="absolute hidden w-4/5  md:w-75  mt-12 bg-secondary rounded-lg lg:relative lg:block lg:w-auto  lg:bg-transparent lg:mt-0"
					id="navbar-default">
					<?php
					wp_nav_menu(
						array(
							'theme_location' => 'header',
							'menu_id' => 'header-menu',
							'items_wrap' => '<ul id="%1$s" class="" aria-label="submenu">%3$s</ul>',
						)
					);
					?>
				</div>
			</div>
		</nav><!-- #site-navigation -->
	</div>
	<div id="text-slide"></div>
</header><!-- #masthead -->