<?php

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

use WoWPress\Frontend\Icon;

?>

<header id="masthead" class="bg-glass">


	<div>
		<?php
		if (is_front_page()) :
		?>
			<h1 class="text-center"><?php bloginfo('name'); ?></h1>
		<?php
		else :
		?>
			<p class="text-center"><a href="<?php echo esc_url(home_url('/')); ?>" rel="home"><?php bloginfo('name'); ?></a></p>
		<?php
		endif;

		$wowpress_description = get_bloginfo('description', 'display');
		if ($wowpress_description || is_customize_preview()) :
		?>
			<p><?php echo $wowpress_description; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped 
				?></p>
		<?php endif; ?>
	</div>
	<div x-data="{ open: false }" class="flex flex-col max-w-screen-xl px-4 py-2 mx-auto xl:items-center xl:justify-center xl:flex-row xl:px-8">
	<div class="py-2 xl:hidden flex flex-row items-center justify-center" style="--btn-color : white">
      <button class="btn btn-outline w-full" @click="open = !open">
		MenĂ¼
		<div x-show="!open">
			<?=Icon::get('o-bars-3')?>
		</div>
		<div x-show="open">
		<?=Icon::get('o-x-mark')?>
		
		</div>
      </button>
    </div>
	<nav id="site-navigation" :class="{'flex': open, 'hidden': !open}" class="flex-col flex-grow pb-4 md:pb-0 hidden xl:flex xl:justify-center xl:flex-row gap-2">

		<?php


		wp_nav_menu(
			array(
				'theme_location' => 'menu-1',
				'container' => false,
				'menu_id'        => 'primary-menu',
				'items_wrap'     => '%3$s',
				'walker' => new WoWPressNavWalker(),
			)
		);

		?>

	</nav><!-- #site-navigation -->

	</div>


    




</header><!-- #masthead -->