Mobile Menu Shortcode

function mobile_menu_shortcode( $atts ) {

    $atts = shortcode_atts( array(

        'menu_id' => '',       // Optional menu ID

        'svg_url' => '',       // Optional SVG URL for submenu toggle icon

    ), $atts, 'mobile_menu' );

    // If no menu ID provided, get the first available menu

    if ( empty( $atts['menu_id'] ) ) {

        $menus = wp_get_nav_menus();

        if ( ! empty( $menus ) && isset( $menus[0]->term_id ) ) {

            $atts['menu_id'] = $menus[0]->term_id;

        } else {

            return '<p>No menus available.</p>';

        }

    }

    // Get the menu items by menu ID

    $menu = wp_get_nav_menu_items( $atts['menu_id'] );

    if ( ! $menu ) {

        return '<p>No menu found.</p>';

    }

    // Organize menu items by parent

    $menu_items = array();

    foreach ( $menu as $item ) {

        $menu_items[$item->menu_item_parent][] = $item;

    }

    // Recursive function to build the menu

	function build_mobile_menu( $parent, $menu_items, $svg_url ) {

		global $post;

		$html = '<ul class="mobile-menu">';

		if ( isset( $menu_items[$parent] ) ) {

			foreach ( $menu_items[$parent] as $item ) {

				$has_children = isset( $menu_items[$item->ID] );

				// Combine WP menu classes with custom classes

				$item_classes = (array) $item->classes;

				$item_classes[] = 'menu-item';

				if ( $has_children ) {

					$item_classes[] = 'has-submenu';

				}

				// Fallback for active state

				if ( isset( $post->ID ) && $item->object_id == $post->ID && ! in_array( 'current-menu-item', $item_classes ) ) {

					$item_classes[] = 'current-menu-item';

				}

				$item_classes = array_unique( array_filter( $item_classes ) );

				$html .= '<li class="' . esc_attr( implode( ' ', $item_classes ) ) . '">';

				if ( $has_children ) {

					$html .= '<div class="menu-item-header">';

					$html .= '<a href="' . esc_url( $item->url ) . '">' . esc_html( $item->title ) . '</a>';

					$html .= '<button class="submenu-toggle" aria-label="Toggle submenu">';

					if ( ! empty( $svg_url ) ) {

						$html .= '<img src="' . esc_url( $svg_url ) . '" alt="Toggle submenu icon" />';

					} else {

						$html .= '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">';

						$html .= '<circle cx="10" cy="10" r="10" transform="rotate(90 10 10)" fill="#E6C24E"/>';

						$html .= '<path d="M16 6.8L10.2 13.2L4.4 6.8" stroke="white" stroke-width="2"/>';

						$html .= '</svg>';

					}

					$html .= '</button>';

					$html .= '</div>';

					$html .= build_mobile_menu( $item->ID, $menu_items, $svg_url );

				} else {

					$html .= '<a href="' . esc_url( $item->url ) . '">' . esc_html( $item->title ) . '</a>';

				}

				$html .= '</li>';

			}

		}

		$html .= '</ul>';

		return $html;

	}

    // Generate menu HTML

    $output = '<div class="mobile-menu-wrapper">';

    $output .= build_mobile_menu( 0, $menu_items, $atts['svg_url'] );

    $output .= '</div>';

    return $output;

}

add_shortcode( 'mobile_menu', 'mobile_menu_shortcode' );