Reputation: 387
So, in another post, CBroe was ever so helpful, along with @MeathCoder to illustrate the needed changes. I've since been able to do the whole thing and it looks amazing, but I'm havign trouble setting the category to active! Below is my code and not sure how I'd change things to add active to class on the category div.
I added the cat_options array, so I could loop through that, and then loop through the next array is cat['category'] was = to $nav['category']. I added some options as I didn't want all pages visible in the nav.
Previous post for reference: PHP Page Navigation Optimizing - Setting "active" on nav items
So, if the active page is in category 1 for example, I need to set it like so "<div class="menu-item has-sub active">"
I've marked the spot in the HTML as "<div class="menu-item has-sub $CAT_ACTIVE">" below.
Here is a picture for reference, the category wont expand due to not being active, I can manually expand it, but thats not intuitive for a lot of people.
<?
/**
* Set active navigation page (highlighted in navigation menu) based on which page we're on.
*/
$cat_options = [
['category' => '1', 'category_image' => 'fa fa-th-large', 'category_name' => 'Dashboard'],
['category' => '2', 'category_image' => 'fas fa-battery-half', 'category_name' => 'Health'],
['category' => '3', 'category_image' => 'fas fa-wrench', 'category_name' => 'Tools'],
['category' => '4', 'category_image' => 'fas fa-user-secret', 'category_name' => 'Administration'],
];
$nav_options = [
['page_link' => 'index.php', 'category' => '1', 'link_display' => 'yes', 'link_text' => 'Home' ],
['page_link' => 'checklist.php', 'category' => '1', 'link_display' => 'yes', 'link_text' => 'Health Checks' ],
['page_link' => 'outages.php', 'category' => '1', 'link_display' => 'yes', 'link_text' => 'Outage Management' ],
['page_link' => 'outage_detail.php', 'category' => '1', 'link_display' => 'no', 'link_text' => 'Outage Details' ],
['page_link' => 'outage_add.php', 'category' => '1', 'link_display' => 'no', 'link_text' => 'Add Outage' ],
['page_link' => 'tasks.php', 'category' => '1', 'link_display' => 'yes', 'link_text' => 'Tasks/Issues' ],
['page_link' => 'tasks_closed.php', 'category' => '1', 'link_display' => 'yes', 'link_text' => 'Closed Tasks' ],
['page_link' => 'task_detail.php', 'category' => '1', 'link_display' => 'no', 'link_text' => 'Task Details' ],
['page_link' => 'task_add.php', 'category' => '1', 'link_display' => 'no', 'link_text' => 'Add Task' ],
['page_link' => 'links.php', 'category' => '1', 'link_display' => 'yes', 'link_text' => 'Common Links' ],
['page_link' => 'health/tunnel_status.php', 'category' => '2', 'link_display' => 'yes', 'link_text' => 'AGC Tunnel Status' ],
['page_link' => 'health/qcall_status.php', 'category' => '2', 'link_display' => 'yes', 'link_text' => 'qCall Status' ],
['page_link' => 'health/ata_status.php', 'category' => '2', 'link_display' => 'yes', 'link_text' => 'ATA Status' ],
['page_link' => 'health/fax_status.php', 'category' => '2', 'link_display' => 'yes', 'link_text' => 'Fax Status' ],
['page_link' => 'health/tandem_health.php', 'category' => '2', 'link_display' => 'yes', 'link_text' => 'Tandem Health (CICS)' ],
['page_link' => 'health/oosagc.php', 'category' => '2', 'link_display' => 'yes', 'link_text' => 'AGC OOS MTAs' ],
['page_link' => 'health/total_oos_graph.php', 'category' => '2', 'link_display' => 'yes', 'link_text' => 'Total OOS MTAs' ],
['page_link' => 'health/dialogic.php', 'category' => '2', 'link_display' => 'yes', 'link_text' => 'Dialogic Status' ],
['page_link' => 'health/netscreen.php', 'category' => '2', 'link_display' => 'yes', 'link_text' => 'Netscreen Status' ],
['page_link' => 'health/telovations.php', 'category' => '2', 'link_display' => 'yes', 'link_text' => 'Telovations Status' ],
['page_link' => 'tools/password-gen.php', 'category' => '3', 'link_display' => 'yes', 'link_text' => 'Password Generator' ],
['page_link' => 'tools/pcmm_check.php', 'category' => '3', 'link_display' => 'yes', 'link_text' => 'PCMM Host Check' ],
['page_link' => 'tools/elements.php', 'category' => '3', 'link_display' => 'yes', 'link_text' => 'Network Elements' ],
['page_link' => 'tools/passwords.php', 'category' => '3', 'link_display' => 'yes', 'link_text' => 'Password Vault' ],
['page_link' => 'admin/users.php', 'category' => '4', 'link_display' => 'yes', 'link_text' => 'User Admin' ],
['page_link' => 'admin/checks.php', 'category' => '4', 'link_display' => 'yes', 'link_text' => 'Health Check Admin' ],
['page_link' => 'admin/reports.php', 'category' => '4', 'link_display' => 'yes', 'link_text' => 'Health Check Reports' ]
];
$arr = [];
foreach( $nav_options as $key => $nav_opt ) {
$url = BASE_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'];
$arr[$key]['category'] = $nav_opt['category'];
$arr[$key]['link_display'] = $nav_opt['link_display'];
} else {
// not active
$arr[$key]['css_class'] = '';
$arr[$key]['link_href'] = $url;
$arr[$key]['link_text'] = $nav_opt['link_text'];
$arr[$key]['category'] = $nav_opt['category'];
$arr[$key]['link_display'] = $nav_opt['link_display'];
}
}
?>
<!-- BEGIN menu -->
<div class="menu">
<div class="menu-header">Navigation</div>
<?
foreach ( $cat_options as $cat) {
echo "
<div class=\"menu-item has-sub $CAT_ACTIVE\">
<a href=\"javascript:;\" class=\"menu-link\">
<div class=\"menu-icon\">
<i class=\"".$cat['category_image']."\"></i>
</div>
<div class=\"menu-text\">".$cat['category_name']."</div>
<div class=\"menu-caret\"></div>
</a>
<div class=\"menu-submenu\">";
foreach ( $arr as $nav) {
if ($nav['category'] == $cat['category'] AND $nav['link_display'] == 'yes') {
echo "
<div class=\"menu-item ".$nav['css_class']."\">
<a href=\"".$nav['link_href']."\" class=\"menu-link \"><div class=\"menu-text\">".$nav['link_text']."</div></a>
</div>
";
}
}
echo "
</div>
</div>";
}
?>
<!-- BEGIN minify-button -->
<div class="menu-item d-flex">
<a href="javascript:;" class="app-sidebar-minify-btn ms-auto" data-toggle="app-sidebar-minify"><i class="fa fa-angle-double-left"></i></a>
</div>
<!-- END minify-button -->
</div>
<!-- END menu -->
Upvotes: 0
Views: 136
Reputation: 387
Found a simple solution!
$cat_options = [
['category' => '1', 'active' => '', 'category_image' => 'fa fa-th-large',
'category_name' => 'Dashboard'],
['category' => '2', 'active' => '', 'category_image' => 'fas fa-battery-half',
'category_name' => 'Health'],
['category' => '3', 'active' => '', 'category_image' => 'fas fa-wrench',
'category_name' => 'Tools'],
['category' => '4', 'active' => '', 'category_image' => 'fas fa-user-secret',
'category_name' => 'Administration'],
];
Added a new field to the array and then in the logic for page=page, I set that field to active.
if( $_SERVER['PHP_SELF'] == $url ){
// active
$arr[$key]['css_class'] = 'active';
$cat_options[$nav_opt['category']]['active'] = 'active';
$arr[$key]['link_href'] = $url;
$arr[$key]['link_text'] = $nav_opt['link_text'];
$arr[$key]['category'] = $nav_opt['category'];
$arr[$key]['link_display'] = $nav_opt['link_display'];
}
Upvotes: 0