Need help with Navigation tree issue

[formmailer 65]

Hi!

 

I have a side menu, based on the renderNavTree function that comes with the default site template in PW:

/**
 * Given a group of pages, render a <ul> navigation tree
 *
 * This is here to demonstrate an example of a more intermediate level
 * shared function and usage is completely optional. This is very similar to
 * the renderNav() function above except that it can output more than one
 * level of navigation (recursively) and can include other fields in the output.
 *
 * @param array|PageArray $items
 * @param int $maxDepth How many levels of navigation below current should it go?
 * @param string $fieldNames Any extra field names to display (separate multiple fields with a space)
 * @param string $class CSS class name for containing <ul>
 * @return string
 *
 */
function renderNavTree($items, $maxDepth = 0) {

	// if we were given a single Page rather than a group of them, we'll pretend they
	// gave us a group of them (a group/array of 1)
	if($items instanceof Page) $items = array($items);

	// $out is where we store the markup we are creating in this function
	$out = '';

	// cycle through all the items
	foreach($items as $item) {



		// if there are extra field names specified, render markup for each one in a <div>
		// having a class name the same as the field name

/*		if($fieldNames) foreach(explode(' ', $fieldNames) as $fieldName) {
			$value = $item->get($fieldName);
			if($value) $out .= " <div class='$fieldName'>$value</div>";
		}
*/

		// if the item has children and we're allowed to output tree navigation (maxDepth)
		// then call this same function again for the item's children 
		if($item->hasChildren() && $maxDepth) {
			$out .= '<div class="w3-block w3-padding w3-white w3-left-align accordion">';
			$out .= $item->title;
			$out .= ' <i class="fa fa-caret-down"></i></div>';
			$out .= '<div class="w3-bar-block w3-hide w3-padding-large w3-medium">';
 			$out .= renderNavTree($item->children, $maxDepth-1);
 			$out .= '</div>';
		}
		else {
			// markup for the link
			$out .= "<a href='$item->url' class='w3-bar-item w3-button w3-opacity-min'>$item->title</a>";
		}

	}

	// if output was generated above, wrap it in a <ul>
	// if($out) $out = "<ul class='$class'>$out</ul>\n";
	

	// return the markup we generated above
	return $out;
}

The only problem is that all submenus are hidden by default (the w3-hide class).

Now I am looking for a way to find if the current page is somewhere in the tree, this part of the tree should be visible:

Eg. If I am on the page called "Complete rondreis “Arvid” met Buro Scanbrit", the menu shoul look like this:

 

And when I am on the Page called "Buro Scanbrit", the menu should be like this:

How do I achieve this? I guess I need to check if $item is (grand)parent of the current page, but I can't really figure out how to do this. Any smart suggestions?

Thanks in advance!

//Jasper 

[bernhard 3,945]

does that tip help? 

 

[maxf5 131]

		if($item->hasChildren() && $maxDepth) {
			$out .= '<div class="w3-block w3-padding w3-white w3-left-align accordion">';
			$out .= $item->title;
			$out .= ' <i class="fa fa-caret-down"></i></div>';
			if ( $item->id == wire('page')->id ) {
				$out .= '<div class="w3-bar-block w3-padding-large w3-medium">';
			} else {
				$out .= '<div class="w3-bar-block w3-hide w3-padding-large w3-medium">';
			}	
 			$out .= renderNavTree($item->children, $maxDepth-1);
 			$out .= '</div>';
		}
		else {
			// markup for the link
			$out .= "<a href='$item->url' class='w3-bar-item w3-button w3-opacity-min'>$item->title</a>";
		}

 

Quick & Dirty. Can you try this one?

[formmailer 65]

@bernhard Thanks! That helped a lot!

 

//Jasper

Edited October 9, 2017 by formmailer

[formmailer 65]

1 hour ago, maxf5 said:

		if($item->hasChildren() && $maxDepth) {
			$out .= '<div class="w3-block w3-padding w3-white w3-left-align accordion">';
			$out .= $item->title;
			$out .= ' <i class="fa fa-caret-down"></i></div>';
			if ( $item->id == wire('page')->id ) {
				$out .= '<div class="w3-bar-block w3-padding-large w3-medium">';
			} else {
				$out .= '<div class="w3-bar-block w3-hide w3-padding-large w3-medium">';
			}	
 			$out .= renderNavTree($item->children, $maxDepth-1);
 			$out .= '</div>';
		}
		else {
			// markup for the link
			$out .= "<a href='$item->url' class='w3-bar-item w3-button w3-opacity-min'>$item->title</a>";
		}

 

Quick & Dirty. Can you try this one?

I just solved it using Bernhard's tips, so I didn't try this one.  But looking at it quickly, I don't think it would solve the whole problem, since the pages parents are still hidden.

But thank you for your reply, It's very much appreciated.

 

/Jasper

Edited October 9, 2017 by formmailer