<?php
/**
 * Displays top navigation
 *
 * @package House Roofing
 */
?>

<div class="navigation_header">
    <!-- Main menu -->
    <div class="navbar-menubar responsive-menu navigation_header">
        <div class="toggle-nav mobile-menu">
            <button onclick="house_roofing_openNav()">
                <i class="fa-solid fa-bars"></i> <!-- Initial hamburger icon -->
            </button>
        </div>
        <div id="mySidenav" class="nav sidenav">
            <nav id="site-navigation" class="main-navigation navbar navbar-expand-xl" aria-label="<?php esc_attr_e( 'Top Menu', 'house-roofing' ); ?>">
                <?php 
                    wp_nav_menu(
                        array(
                            'theme_location' => 'primary',
                            'container_class' => 'main-menu clearfix',
                            'menu_class' => 'clearfix menu',
                            '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 mobile-menu" onclick="house_roofing_closeNav()">
                    <i class="fa-solid fa-times"></i> <!-- Close icon for the menu -->
                </a>
            </nav>
        </div>
    </div>
</div>