JSFiddle - React, Tailwind, and code Playground

by andyjh07

HTML

/**
 * Custom Primary Navigation
 */
class primaryMenu extends Walker_Nav_Menu { 
	private $currentItem;

	function start_lvl(&$output, $depth = 0, $args = array()){
		if($args->walker->has_children){
		$output .= "<div class='sub-menu-tray'>";
			$output .= "<div class='flex flex-col justify-between w-full xl:container xl:flex-row'>";
				$output .= "<div class='w-full bg-white xl:w-8/12 xl:pl-24 xl:py-9 xl:pr-1/12'>";
					$output .= "<ul class='sub-menu'>";
		}
	}

	function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0){
		$this->currentItem = $item;
		$object = $item->object;
		$type = $item->type;
		$title = $item->title;
		$description = $item->description;
		$permalink = $item->url;

		$itemClasses = implode(" ", $item->classes);

		$output .= "<li class='{$itemClasses}'>";

		if(($permalink && $permalink != "#" && !$args->walker->has_children) || ($permalink && $permalink != "#" && $args->walker->has_children)){
			$output .= "<a :class='{".'"text-grey-darker"'.": \$store.greyOutNav}' href='{$permalink}'>";
		} else {
			$output .= "<span :class='{".'"text-grey-darker"'.": \$store.greyOutNav}' class='no-link'>";
		}

		$output .= $title;

		if($permalink && $permalink != "#" && !$args->walker->has_children){
			$output .= "</a>";
		} else {
			$output .= "</span>";
		}
	}

	function end_el(&$output, $item, $depth = 0, $args = array()){
		$output .= "</li>";
	}
	
	function end_lvl(&$output, $depth = 0, $args = array()){
					$output .= "</ul>";
				$output .= "</div>";
				if(get_field('panel_active', $this->currentItem->menu_item_parent)){
				$panelImage = get_field('panel_image', $this->currentItem->menu_item_parent);
				$panelTitle = get_field('panel_title', $this->currentItem->menu_item_parent);
				$panelCopy = get_field('panel_copy', $this->currentItem->menu_item_parent);
				$panelLink = get_field('panel_link', $this->currentItem->menu_item_parent);

				$output .= "<div class='hidden w-4/12 xl:block bg-teal'>";
					$output .=...