uikit Dropdown "Navbar modifier" menu converted to ProcessWire

[Christophe]

I'm just starting with uikit (I'm testing/learning it on a development website for a "production" one that I would like to migrate from ImpressPages to ProcesssWire).

At last I have a fully functional uikit menu (the indentation is a bit messed after copy(ing)/pasting).

The conversion of the "Navbar modifier" code from http://getuikit.com/docs/dropdown.html (if I'm not wrong):

<?php     

echo "<nav class='uk-navbar'>" .
                 "<ul class='uk-navbar-nav'>";
        
        // This is the container enabling the JavaScript        
        $h_active = $page === $homepage ? " uk-active" : "";
        echo "<li class='uk-parent$h_active' data-uk-dropdown><a href='{$homepage->url}'>{$homepage->title}</a></li>";
        	                                  	                        
        foreach($homepage->children as $h_child) {
            $subchildren = $h_child->children;	
            $c_active = $page === $h_child ? " uk-active" : "";	                           
            if(count($subchildren)) {                
                $cwsc_active = $page === $h_child || $h_child->children->has($page) ? " uk-active" : "";
                // This is the container enabling the JavaScript
                echo "<li class='uk-parent$cwsc_active' data-uk-dropdown>" .
                "<a href='{$h_child->url}'>{$h_child->title}</a>" .
                "<div class='uk-dropdown uk-dropdown-navbar'>" .
                    "<ul class='uk-nav uk-nav-navbar'>";
                // This was the menu item toggling the dropdown
                // This was/is the dropdown
                
                foreach($h_child->children as $subchild) {                    
                    $sc_active = $page === $subchild ? " class='uk-active'" : "";
                    echo "<li$sc_active><a href='{$subchild->url}'>{$subchild->title}</a></li>";                                            
                }
                echo "</ul>" .
                "</div>" .
                "</li>";
            }			                        
            else {                
                echo "<li class='uk-parent$c_active' data-uk-dropdown><a href='{$h_child->url}'>{$h_child->title}</a></li>";                                        
            }                     	                            		                        
        }
    
        // output an "Edit" link if this page happens to be editable by the current user
	    if($page->editable()) echo "<li class='edit'><a href='$page->editUrl'>" . __('Edit') . "</a></li>";
	    
        echo "</ul>" . 
        "</nav>";   
?>	

The parent of an active "subchild" is also "active" (the last "functionality" that was missing).

Later, when I have a bit of time, I'll look again (at) how to change the default "hover" behaviour to the "click" one (data-uk-dropdown="{mode:'click'}" instead of data-uk-dropdown).

When I tried out of curiosity, there were problems with all the quotes and double quotes... I tried several things, but as I don't really need it now I'll try again later.

NB: towards the end, I've changed from, for example,

$h_active = "";

if(....

TO

$h_active = $page ===...

(with some variations in between).

[ukyo]

Can you try this :

/**
 * Uikit Navbar Navigation
 *
 * @param $items
 * @param array $templates
 * @param string $tag
 * @param int $maxDepth
 * @return string
 */
function renderNavigation($items, $templates=[], $tag="", $maxDepth=0) {

    $templates = (!empty($templates)) ? $templates : [];
    $currentPage = wire('page');
    $output = ($tag!="") ? "\n<div class='uk-dropdown uk-dropdown-navbar'><$tag class='uk-nav uk-nav-navbar'>" : "";
    foreach($items as $item)
    {
        $class = [];
        $dropdown = "";
        $hasChild = FALSE;
        $url = $item->url;
        $caret = "";
        $filter = "";

        if(! empty($templates) && !in_array($item->template, $templates) && $maxDepth)
        {
            $filter = "template!=";
            $x=1;
            foreach($templates as $template)
            {
                $i=$x++;
                $separator = ($i!=count($templates)) ? "|" : "";
                $filter .= $template.$separator;
            }
            if($item->numChildren($filter) > 0)
            {
                $hasChild = TRUE;
                $class[] = 'uk-parent';
                $url = '#';
                $dropdown = "  data-uk-dropdown";
                $caret = " <span class='uk-icon-angle-down'></span>";
            }
        }
        // Set Active Class !
        if($currentPage->id == $item->id || $currentPage->parents("id=$item->id,template!=home")->count() > 0) $class[] = 'uk-active';

        $class = (!empty($class)) ? " class='" . implode(' ', $class) . "'" : "";

        $output .= "\n<li{$class}{$dropdown}><a href='{$url}' title='{$item->title}'>{$item->title}{$caret}</a>";

        if($hasChild) $output .= renderNavigation($item->children($filter), $templates, "ul", $maxDepth-1);

        $output .= "\n</li>";

    }
    $output .= ($tag!="") ? "\n</$tag></div>" : "";
    return $output;
}

// Usage :
$homepage = $pages->get(1);
$navigation = renderNavigation($homepage->and($homepage->children), array("don't", "display", "these templates", "children"), "", 1);

echo "\n<nav class='uk-navbar'>
      \n\t<ul class='uk-navbar-nav uk-hidden-small'>
      \n\t\t{$navigation}
      \n\t</ul>
      \n</nav>";

[Christophe]

Hello,

I pasted it here in part in case some newbies want to use it. And eventually to modify/improve it a little bit.

I like it because it's close( r ) to the html version, short(er), simple( r ), and easy(/ier) to understand (at least for me).

But thanks for posting your code, for me or any other person. It works.

I'm a php beginner, and I like to understand what the code does. And now I know (and understand) more ways/variations of coding the same thing, than not so long ago when I tried with a kraken css menu.

I may borrow you the carets, and use (more) \n (newlines) and \t (tabulations).

For this project, I want to have the parent links clickable, and, depending on the case, they will link to their own page or be redirected to the first child (checkbox in the admin).

And I don't want the children of the homepage.

But, if one day I need some sub-sub-children perhaps I can just paste and customize it.

[Christophe]

More complete solution (taking hidden pages into account):

• in _head.php

$cwsc_active = $page === $h_child || $h_child->children("include=hidden")->has($page) ? " uk-active" : "";

• in, for example, basic-page-parent.php (or basic-parent-page.php)

<?php if($page->first_child_redirect) $session->redirect($page->child("include=hidden")->url); // First child redirect if the checkbox is checked ?>