I am on “http://localhost/jmsp-local/admin/receipt/add.php” but still “Book Receipts” and “Blogs/Articles” categories are opened and the sub-category of it is also Active
The sidebar-menu code file is located in “C:xampphtdocsjmsp-localadminadmin-partialssidebar-menu-dir.php” and I am including it in “C:xampphtdocsjmsp-localadminreceiptadd.php”
I have attached sidebar-menu-dir.php code.
<?php
require '../config/database2.php';
if (session_status() == PHP_SESSION_NONE) {
session_start();
}
// Then your existing code
if(isset($_SESSION['user-id'])){
$id = filter_var($_SESSION['user-id'], FILTER_SANITIZE_NUMBER_INT);
$query = "SELECT firstname, lastname, avatar FROM users WHERE id=$id ";
$result = mysqli_query($connection, $query);
$users = mysqli_fetch_assoc($result);
}
// CHECK LOGIN STATUS
if(!isset($_SESSION['user-id'])){
header('location: ' . ROOT_URL . 'sign-in.php');
die();
}
$current_page = $_SERVER['REQUEST_URI'];
$base_path = '/jmsp-local/admin/';
function getCurrentSection() {
global $current_page, $base_path;
// Add logging to track the execution flow
error_log("getCurrentSection: Current page: $current_page");
if (strpos($current_page, $base_path . 'receipt/') !== false) {
error_log("getCurrentSection: Returning 'system-receipts'");
return 'system-receipts';
} elseif (strpos($current_page, $base_path . 'book-receipt/') !== false) {
error_log("getCurrentSection: Returning 'book-receipts'");
return 'book-receipts';
} elseif (strpos($current_page, $base_path . 'blog-article/') !== false) {
error_log("getCurrentSection: Returning 'blogs-articles'");
return 'blogs-articles';
}
error_log("getCurrentSection: Returning empty string");
return '';
}
function isOpenCategory($category) {
$current_section = getCurrentSection();
error_log("isOpenCategory: Current section: $current_section, Checked category: $category");
return ($current_section === $category) ? 'show' : '';
}
function isActive($page_path) {
global $current_page, $base_path;
$is_active = (strpos($current_page, $base_path . $page_path) !== false);
error_log("isActive: Current page: $current_page, Checked page: $page_path, Active: $is_active");
return $is_active ? 'active font-weight-bold' : '';
}
function isCategoryActive($category) {
$current_section = getCurrentSection();
error_log("isCategoryActive: Current section: $current_section, Checked category: $category");
return ($current_section === $category) ? 'active' : '';
}
// Function to check if the current page is any "receipt" page
function isReceiptPage() {
global $current_page, $base_path;
$receipt_pages = [
'index.php',
'add.php',
'manage.php',
'view.php',
];
foreach ($receipt_pages as $page) {
if (strpos($current_page, $base_path . 'receipt/' . $page) !== false) {
return true;
}
}
return false;
}
// Function to check if the current page is any "book-receipt" page
function isBookReceiptPage() {
global $current_page, $base_path;
$book_r_pages = [
'index.php',
'add.php',
'manage.php',
'view.php',
];
foreach ($book_r_pages as $page) {
if (strpos($current_page, $base_path . 'book-receipt/' . $page) !== false) {
return true;
}
}
return false;
}
// Function to check if the current page is any "blog-article" page
function isBlogsArticlesPage() {
global $current_page, $base_path;
$blogs_articles_pages = [
'index.php',
'manage.php',
];
foreach ($blogs_articles_pages as $page) {
if (strpos($current_page, $base_path . 'blog-article/' . $page) !== false) {
return true;
}
}
return false;
}
?>
<style>
@media (max-width: 767px) {
.nav-item .collapse {
display: none;
}
.nav-item .collapse.show {
display: block !important;
}
.nav-link[aria-expanded="true"] .menu-arrow {
transform: rotate(180deg);
}
}
</style>
<nav class="sidebar sidebar-offcanvas" id="sidebar">
<ul class="nav">
<li class="nav-item nav-profile">
<div class="nav-link">
<div class="profile-image">
<img src="<?= ROOT_URL . 'images/' . $users['avatar']?>" alt="<?= $users['firstname'] . " " . $users['lastname']?> Avatar Icon" />
</div>
<div class="profile-name">
<p class="designation">
Welcome,
</p>
<p class="name">
<?= $users['firstname'] . " " . $users['lastname']?>
</p>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="<?= ROOT_URL ?>"">
<i class="fa fa-home menu-icon"></i>
<span class="menu-title">Dashboard</span>
</a>
</li>
<!-- System Receipt Pages -->
<li class="nav-item">
<a class="nav-link <?= isCategoryActive('system-receipts') ?>"
data-toggle="collapse"
href="#"
role="button"
aria-expanded="<?= isOpenCategory('system-receipts') ? 'true' : 'false' ?>"
aria-controls="system-receipts">
<i class="uil uil-receipt menu-icon"></i>
<span class="menu-title">System Receipts</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse <?= isOpenCategory('system-receipts') ?>" id="system-receipts">
<ul class="nav flex-column sub-menu">
<li class="nav-item">
<a class="nav-link <?= isActive('receipt/add.php') ?>"
href="<?= ROOT_URL ?>receipt/add.php">Add New Receipt</a>
</li>
<li class="nav-item">
<a class="nav-link <?= isActive('receipt/index.php') ?>"
href="<?= ROOT_URL ?>receipt/index.php">Today's Receipts</a>
</li>
<li class="nav-item">
<a class="nav-link <?= isActive('receipt/manage.php') ?>"
href="<?= ROOT_URL ?>receipt/manage.php">Manage Receipts</a>
</li>
<li class="nav-item">
<a class="nav-link <?= isActive('receipt/view.php') ?>"
href="<?= ROOT_URL ?>receipt/view.php">View Receipts</a>
</li>
</ul>
</div>
</li>
<!-- Book Receipt Pages -->
<li class="nav-item">
<a class="nav-link <?= isCategoryActive('book-receipts') ?>"
data-toggle="collapse"
href="#book-receipts"
role="button"
aria-expanded="<?= isOpenCategory('book-receipts') ? 'true' : 'false' ?>"
aria-controls="book-receipts">
<i class="uil uil-book menu-icon"></i>
<span class="menu-title">Book Receipts</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse <?= isOpenCategory('book-receipts') ?>" id="book-receipts">
<ul class="nav flex-column sub-menu">
<li class="nav-item">
<a class="nav-link <?= isActive('book-receipt/add.php') ?>"
href="<?= ROOT_URL ?>book-receipt/add.php">Add New Receipt</a>
</li>
<li class="nav-item">
<a class="nav-link <?= isActive('book-receipt/index.php') ?>"
href="<?= ROOT_URL ?>book-receipt/index.php">Today's Receipts</a>
</li>
<li class="nav-item">
<a class="nav-link <?= isActive('book-receipt/manage.php') ?>"
href="<?= ROOT_URL ?>book-receipt/manage.php">Manage Receipts</a>
</li>
<li class="nav-item">
<a class="nav-link <?= isActive('book-receipt/view.php') ?>"
href="<?= ROOT_URL ?>book-receipt/view.php">View Receipts</a>
</li>
</ul>
</div>
</li>
<!-- Blogs/Articles Pages -->
<li class="nav-item">
<a class="nav-link <?= isCategoryActive('blogs-articles') ?>"
data-toggle="collapse"
href="#blogs-articles"
role="button"
aria-expanded="<?= isOpenCategory('blogs-articles') ? 'true' : 'false' ?>"
aria-controls="blogs-articles">
<i class="uil uil-document-layout-left menu-icon"></i>
<span class="menu-title">Blogs/Articles</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse <?= isOpenCategory('blogs-articles') ?>" id="blogs-articles">
<ul class="nav flex-column sub-menu">
<li class="nav-item">
<a class="nav-link <?= isActive('blog-article/add.php') ?>"
href="<?= ROOT_URL ?>blog-article/add.php">Add New Blog/Article</a>
</li>
<li class="nav-item">
<a class="nav-link <?= isActive('blog-article/manage.php') ?>"
href="<?= ROOT_URL ?>blog-article/manage.php">Manage Blogs/Articles</a>
</li>
</ul>
</div>
</li>
<li class="nav-item d-none d-lg-block">
<a class="nav-link" data-toggle="collapse" href="#sidebar-layouts" aria-expanded="false" aria-controls="sidebar-layouts">
<i class="fas fa-columns menu-icon"></i>
<span class="menu-title">Sidebar Layouts</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="sidebar-layouts">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> <a class="nav-link" href="pages/layout/compact-menu.html">Compact menu</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/layout/sidebar-collapsed.html">Icon menu</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/layout/sidebar-hidden.html">Sidebar Hidden</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/layout/sidebar-hidden-overlay.html">Sidebar Overlay</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/layout/sidebar-fixed.html">Sidebar Fixed</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#ui-basic" aria-expanded="false" aria-controls="ui-basic">
<i class="far fa-compass menu-icon"></i>
<span class="menu-title">Basic UI Elements</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="ui-basic">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> <a class="nav-link" href="pages/ui-features/accordions.html">Accordions</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/ui-features/buttons.html">Buttons</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/ui-features/badges.html">Badges</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/ui-features/breadcrumbs.html">Breadcrumbs</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/ui-features/dropdowns.html">Dropdowns</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/ui-features/modals.html">Modals</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/ui-features/progress.html">Progress bar</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/ui-features/pagination.html">Pagination</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/ui-features/tabs.html">Tabs</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/ui-features/typography.html">Typography</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/ui-features/tooltips.html">Tooltips</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#ui-advanced" aria-expanded="false" aria-controls="ui-advanced">
<i class="fas fa-clipboard-list menu-icon"></i>
<span class="menu-title">Advanced Elements</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="ui-advanced">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> <a class="nav-link" href="pages/ui-features/dragula.html">Dragula</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/ui-features/clipboard.html">Clipboard</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/ui-features/context-menu.html">Context menu</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/ui-features/slider.html">Sliders</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/ui-features/carousel.html">Carousel</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/ui-features/colcade.html">Colcade</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/ui-features/loaders.html">Loaders</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#form-elements" aria-expanded="false" aria-controls="form-elements">
<i class="fab fa-wpforms menu-icon"></i>
<span class="menu-title">Form elements</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="form-elements">
<ul class="nav flex-column sub-menu">
<li class="nav-item"><a class="nav-link" href="../pages/forms/basic_elements.html">Basic Elements</a></li>
<li class="nav-item"><a class="nav-link" href="../pages/forms/advanced_elements.html">Advanced Elements</a></li>
<li class="nav-item"><a class="nav-link" href="../pages/forms/validation.html">Validation</a></li>
<li class="nav-item"><a class="nav-link" href="../pages/forms/wizard.html">Wizard</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#editors" aria-expanded="false" aria-controls="editors">
<i class="fas fa-pen-square menu-icon"></i>
<span class="menu-title">Editors</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="editors">
<ul class="nav flex-column sub-menu">
<li class="nav-item"><a class="nav-link" href="pages/forms/text_editor.html">Text editors</a></li>
<li class="nav-item"><a class="nav-link" href="pages/forms/code_editor.html">Code editors</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#charts" aria-expanded="false" aria-controls="charts">
<i class="fas fa-chart-pie menu-icon"></i>
<span class="menu-title">Charts</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="charts">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> <a class="nav-link" href="pages/charts/chartjs.html">ChartJs</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/charts/morris.html">Morris</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/charts/flot-chart.html">Flot</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/charts/google-charts.html">Google charts</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/charts/sparkline.html">Sparkline js</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/charts/c3.html">C3 charts</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/charts/chartist.html">Chartists</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/charts/justGage.html">JustGage</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#tables" aria-expanded="false" aria-controls="tables">
<i class="fas fa-table menu-icon"></i>
<span class="menu-title">Tables</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="tables">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> <a class="nav-link" href="../pages/tables/basic-table.html">Basic table</a></li>
<li class="nav-item"> <a class="nav-link" href="../pages/tables/data-table.html">Data table</a></li>
<li class="nav-item"> <a class="nav-link" href="../pages/tables/js-grid.html">Js-grid</a></li>
<li class="nav-item"> <a class="nav-link" href="../pages/tables/sortable-table.html">Sortable table</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="pages/ui-features/popups.html">
<i class="fas fa-minus-square menu-icon"></i>
<span class="menu-title">Popups</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages/ui-features/notifications.html">
<i class="fas fa-bell menu-icon"></i>
<span class="menu-title">Notifications</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#icons" aria-expanded="false" aria-controls="icons">
<i class="fa fa-stop-circle menu-icon"></i>
<span class="menu-title">Icons</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="icons">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> <a class="nav-link" href="pages/icons/flag-icons.html">Flag icons</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/icons/font-awesome.html">Font Awesome</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/icons/simple-line-icon.html">Simple line icons</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/icons/themify.html">Themify icons</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#maps" aria-expanded="false" aria-controls="maps">
<i class="fas fa-map-marker-alt menu-icon"></i>
<span class="menu-title">Maps</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="maps">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> <a class="nav-link" href="pages/maps/mapeal.html">Mapeal</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/maps/vector-map.html">Vector Map</a></li>
<li class="nav-item"> <a class="nav-link" href="pages/maps/google-maps.html">Google Map</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#auth" aria-expanded="false" aria-controls="auth">
<i class="fas fa-window-restore menu-icon"></i>
<span class="menu-title">User Pages</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="auth">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> <a class="nav-link" href="pages/samples/login.html"> Login </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/samples/login-2.html"> Login 2 </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/samples/register.html"> Register </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/samples/register-2.html"> Register 2 </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/samples/lock-screen.html"> Lockscreen </a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#error" aria-expanded="false" aria-controls="error">
<i class="fas fa-exclamation-circle menu-icon"></i>
<span class="menu-title">Error pages</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="error">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> <a class="nav-link" href="pages/samples/error-404.html"> 404 </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/samples/error-500.html"> 500 </a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#general-pages" aria-expanded="false" aria-controls="general-pages">
<i class="fas fa-file menu-icon"></i>
<span class="menu-title">General Pages</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="general-pages">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> <a class="nav-link" href="pages/samples/blank-page.html"> Blank Page </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/samples/profile.html"> Profile </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/samples/faq.html"> FAQ </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/samples/faq-2.html"> FAQ 2 </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/samples/news-grid.html"> News grid </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/samples/timeline.html"> Timeline </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/samples/search-results.html"> Search Results </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/samples/portfolio.html"> Portfolio </a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#apps" aria-expanded="false" aria-controls="apps">
<i class="fas fa-briefcase menu-icon"></i>
<span class="menu-title">Apps</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="apps">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> <a class="nav-link" href="pages/apps/email.html"> Email </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/apps/calendar.html"> Calendar </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/apps/todo.html"> Todo </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/apps/gallery.html"> Gallery </a></li>
</ul>`
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="collapse" href="#e-commerce" aria-expanded="false" aria-controls="e-commerce">
<i class="fas fa-shopping-cart menu-icon"></i>
<span class="menu-title">E-commerce</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="e-commerce">
<ul class="nav flex-column sub-menu">
<li class="nav-item"> <a class="nav-link" href="pages/samples/invoice.html"> Invoice </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/samples/pricing-table.html"> Pricing Table </a></li>
<li class="nav-item"> <a class="nav-link" href="pages/samples/orders.html"> Orders </a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="pages/documentation.html">
<i class="far fa-file-alt menu-icon"></i>
<span class="menu-title">Documentation</span>
</a>
</li>
</ul>
</nav>
<!--
<script>
document.addEventListener('DOMContentLoaded', function() {
var systemReceiptsLink = document.querySelector('a[href="#system-receipts"]');
systemReceiptsLink.addEventListener('click', function(e) {
if (window.innerWidth <= 767) { // Mobile breakpoint
e.preventDefault();
var target = document.querySelector(this.getAttribute('href'));
if (target) {
target.classList.toggle('show');
this.setAttribute('aria-expanded', target.classList.contains('show'));
}
}
});
});
</script> -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var dropdowns = document.querySelectorAll('.nav-item > .nav-link[data-toggle="collapse"]');
dropdowns.forEach(function(dropdown) {
dropdown.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation(); // Stop the event from bubbling up
var target = document.querySelector(this.getAttribute('href'));
if (target) {
// Toggle the clicked dropdown
target.classList.toggle('show');
this.setAttribute('aria-expanded', target.classList.contains('show'));
// Close other open dropdowns
dropdowns.forEach(function(otherDropdown) {
if (otherDropdown !== dropdown) {
var otherTarget = document.querySelector(otherDropdown.getAttribute('href'));
if (otherTarget && otherTarget.classList.contains('show')) {
otherTarget.classList.remove('show');
otherDropdown.setAttribute('aria-expanded', 'false');
}
}
});
}
});
});
// Prevent clicks inside the dropdown from closing it
document.querySelectorAll('.collapse').forEach(function(collapse) {
collapse.addEventListener('click', function(e) {
e.stopPropagation();
});
});
// Close dropdowns when clicking outside
document.addEventListener('click', function(e) {
if (!e.target.closest('.nav-item')) {
dropdowns.forEach(function(dropdown) {
var target = document.querySelector(dropdown.getAttribute('href'));
if (target && target.classList.contains('show')) {
target.classList.remove('show');
dropdown.setAttribute('aria-expanded', 'false');
}
});
}
});
});
</script>[enter image description here](https://i.sstatic.net/lGadyhn9.png)
I am on “C:xampphtdocsjmsp-localadminadmin-partialssidebar-menu-dir.php” and I included I have attached “sidebar-menu-dir.php” code.
<?php include '../admin-partials/sidebar-menu-dir.php'; ?>
I don’t want “Book Receipts” and “Blogs/Articles” to be automatically open when I am on the “System Receipts” category.
Can anyone help me with it?
New contributor
Kush_238 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.