Edit file File name : _sidebar.php Content :<?php // This is a shared sidebar component $current_page = basename($_SERVER['PHP_SELF']); // Define navigation structure $nav_structure = [ 'Dashboard' => [ 'file' => 'dashboard.php', 'icon' => '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5"><rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/></svg>' ], 'Sales & Payments' => [ 'icon' => '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></svg>', 'sub_items' => [ 'Invoices' => 'invoices.php', 'Estimates' => 'estimates.php', 'Customers' => 'customers.php', 'Products & Services' => 'items.php' ] ], 'Expenses' => [ 'file' => 'expenses.php', 'icon' => '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5"><path d="M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z"/><path d="M16 8h-6a2 2 0 1 0 0 4h6a2 2 0 1 0 0-4Z"/></svg>' ], 'Human Resources' => [ 'file' => 'hr.php', 'icon' => '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>' ], 'Reports' => [ 'file' => 'reports.php', 'icon' => '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5"><path d="M3 3v18h18"/><path d="M18 17V9"/><path d="M13 17V5"/><path d="M8 17v-3"/></svg>' ] ]; // Determine if the sales section should be open $sales_pages = ['invoices.php', 'invoice-details.php', 'invoice-create.php', 'invoice-edit.php', 'estimates.php', 'customers.php', 'customer-create.php', 'customer-edit.php', 'customer-details.php', 'items.php', 'item-form.php']; $is_sales_page_active = in_array($current_page, $sales_pages); $hr_pages = ['hr.php', 'employee-form.php', 'run-payroll.php', 'payslip.php']; $is_hr_page_active = in_array($current_page, $hr_pages); ?> <aside class="fixed inset-y-0 left-0 z-20 flex h-full w-64 flex-col border-r bg-white transition-transform duration-300 lg:translate-x-0 -translate-x-full"> <div class="p-4 flex flex-col h-full"> <div class="mb-4"> <div class="relative"> <button id="create-new-btn" class="w-full h-10 font-bold text-lg text-white bg-primary hover:bg-opacity-90 rounded-full flex items-center justify-center gap-2"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg> Create new </button> <div id="create-new-menu" class="hidden absolute left-0 mt-2 w-56 bg-white rounded-lg shadow-lg border z-20"> <a href="invoice-create.php" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50">Invoice</a> <a href="estimates.php" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50">Estimate</a> <a href="customer-create.php" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50">Customer</a> <a href="item-form.php" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50">Product or Service</a> <a href="employee-form.php" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50">Employee</a> </div> </div> </div> <nav class="flex-grow space-y-1"> <?php foreach($nav_structure as $label => $item): ?> <?php $is_active_section = false; if ($label === 'Sales & Payments') $is_active_section = $is_sales_page_active; if ($label === 'Human Resources') $is_active_section = $is_hr_page_active; ?> <?php if (isset($item['sub_items'])): ?> <div class="collapsible-section <?php echo $is_active_section ? 'open' : ''; ?>"> <button class="collapsible-trigger w-full flex items-center justify-between p-2 text-sm font-medium text-slate-600 hover:bg-slate-100 rounded-lg"> <span class="flex items-center gap-3"> <?php echo $item['icon']; ?> <?php echo $label; ?> </span> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 chevron transition-transform"><polyline points="6 9 12 15 18 9"></polyline></svg> </button> <div class="collapsible-content pl-6 mt-1 space-y-1" style="<?php echo $is_active_section ? '' : 'display: none;'; ?>"> <?php foreach($item['sub_items'] as $sub_label => $sub_file): ?> <a href="<?php echo $sub_file; ?>" class="block pl-5 py-1.5 text-sm rounded-lg <?php echo ($current_page === $sub_file) ? 'font-semibold text-primary' : 'text-slate-500 hover:text-slate-800'; ?>"> <?php echo $sub_label; ?> </a> <?php endforeach; ?> </div> </div> <?php else: ?> <?php $is_active = ($current_page === $item['file']) || ($label === 'Human Resources' && $is_hr_page_active); ?> <a href="<?php echo $item['file']; ?>" class="flex items-center gap-3 rounded-lg p-2 text-sm font-medium <?php echo $is_active ? 'bg-blue-100 text-primary' : 'text-slate-600 hover:bg-slate-100'; ?>"> <?php echo $item['icon']; ?> <?php echo $label; ?> </a> <?php endif; ?> <?php endforeach; ?> </nav> <div class="mt-auto p-2"> <a href="settings.php" class="flex items-center gap-3 rounded-lg p-2 text-sm font-medium text-slate-600 hover:bg-slate-100 <?php echo ($current_page === 'settings.php') ? 'bg-blue-100 text-primary' : ''; ?>"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 0 2.4l-.15.08a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.38a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1 0-2.4l.15-.08a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg> Settings </a> </div> </div> </aside> <script> document.addEventListener('DOMContentLoaded', () => { const sidebar = document.querySelector('aside'); const toggleBtn = document.getElementById('sidebar-toggle'); const createNewBtn = document.getElementById('create-new-btn'); const createNewMenu = document.getElementById('create-new-menu'); if (toggleBtn && sidebar) { toggleBtn.addEventListener('click', () => { sidebar.classList.toggle('-translate-x-full'); }); } if (createNewBtn && createNewMenu) { createNewBtn.addEventListener('click', (e) => { e.stopPropagation(); createNewMenu.classList.toggle('hidden'); }); document.addEventListener('click', (e) => { if (!createNewMenu.contains(e.target) && !createNewBtn.contains(e.target)) { createNewMenu.classList.add('hidden'); } }); } document.querySelectorAll('.collapsible-trigger').forEach(trigger => { trigger.addEventListener('click', function() { const section = this.closest('.collapsible-section'); const content = section.querySelector('.collapsible-content'); const chevron = this.querySelector('.chevron'); section.classList.toggle('open'); if (content.style.display === 'none' || content.style.display === '') { content.style.display = 'block'; chevron.style.transform = 'rotate(180deg)'; } else { content.style.display = 'none'; chevron.style.transform = 'rotate(0deg)'; } }); }); }); </script> Save