PHP Page Navigation Optimizing – Setting “active” on nav items

I have my nav.php setup with code like this. This is to determine the page and then set both the navigation header and the item as active.

if ($_SERVER['PHP_SELF'] == ''.$path.'/links.php') {
    $opslinks = "active";
    $nav1_active = "active";
} elseif($_SERVER['PHP_SELF'] == ''.$hpath.'/tunnel_status.php') {
    $tunnelstatus = "active";
    $nav2_active = "active";
    $refresh = "<meta http-equiv="refresh" content="240"/>";
} elseif($_SERVER['PHP_SELF'] == ''.$hpath.'/qcall_status.php') {
    $qcallstatus = "active";
    $nav2_active = "active";
} elseif ($_SERVER['PHP_SELF'] == ''.$path.'/checklist.php') {
    $opsdash = "active";
    $nav1_active = "active";
} elseif ($_SERVER['PHP_SELF'] == ''.$path.'/index.php') {
    $opsindex = "active";
    $nav1_active = "active";    
} elseif ($_SERVER['PHP_SELF'] == ''.$path.'/tasks_closed.php') {
    $optaskclosed = "active";
    $nav1_active = "active";
}

I then have the following html code.

                        <div class="menu-submenu">
                            <div class="menu-item <?=$opsindex ?? '';?>">
                                <a href="<?=$path ?? '';?>/index.php" class="menu-link "><div class="menu-text">Home</div></a>
                            </div>                        
                            <div class="menu-item <?=$opsdash ?? '';?>">
                                <a href="<?=$path ?? '';?>/checklist.php" class="menu-link "><div class="menu-text">Checklist</div></a>
                            </div>
                            <div class="menu-item <?=$opsoutages ?? '';?>">
                                <a href="<?=$path ?? '';?>/outages.php" class="menu-link"><div class="menu-text">Outage Management</div></a>
                            </div>
                            <div class="menu-item <?=$opsissues ?? '';?>">
                                <a href="<?=$path ?? '';?>/tasks.php" class="menu-link"><div class="menu-text">Task List / Issues</div></a>
                            </div>
                            <div class="menu-item <?=$optaskclosed ?? '';?>">
                                <a href="<?=$path ?? '';?>/tasks_closed.php" class="menu-link"><div class="menu-text">Task List (Closed)</div></a>
                            </div>
                            <div class="menu-item <?=$opslinks ?? '';?>">
                                <a href="<?=$path ?? '';?>/links.php" class="menu-link"><div class="menu-text">Common Links</div></a>
                            </div>                            
                        </div>

How can I optimize this as I feel this is horribly done and outdated. I’ve been working on cleaning up all my older code and this is one area I’m not sure about. I know I could technically add the code into the html block itself, but it’s not really any better that way.

I also realize the php code block only partially matches what I posted. I have dozens of links, so to condense the info and present enough, I truncated it down.

I’m also working on revamping my PATH variables to be constants and defined in a single file, its sort of a mess at the moment. 🙂

Answer

Using the approach outlined by @CBroe comment above

// set up an array on the php side with a mapping to then loop over to create the nav elements
// the skeleton code below should work with some modifications

$nav_options = [ 
    ['page_link' => 'links.php', 'link_text' => 'Common Links' ], 
    [],
    ...
]

$arr = [];
foreach( $nav_options as $key => $nav_opt ) {
    $url = $path . '/' . $nav_opt["page_link"];
    if( $_SERVER['PHP_SELF'] == $url ){
        // active
        $arr[$key]['css_class'] = 'active';
        $arr[$key]['link_href'] = $url;
        $arr[$key]['link_text'] = $nav_opt['link_text'];
    } else {
        // not active 
        $arr[$key]['css_class'] = '';
        $arr[$key]['link_href'] = $url;
        $arr[$key]['link_text'] = $nav_opt['link_text'];
    }
}

// Then loop over $arr on the html side to produce the nav div elements