EVOLUTION-NINJA
Edit File: headerSidebar.php
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Green Palace Heritage</title> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <!-- bootstrap --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script> <!-- Include Font Awesome CDN --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <!-- bootstrap icons --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"> <!--<link rel="stylesheet" href=<?//php echo base_url('public/assets/css/bootstrap-icons.min.css');?>">--> </head> <style> /* Dark Mode */ body.dark-mode { background-color: #121212; color: #ffffff; } #modeToggle { display: flex; align-items: center; gap: 0.5rem; } #modeToggle i { font-size: 1.5rem; color:white; border:none; } .main_nav { justify-content: end } .main_user>p { margin: 0; color: rgb(90 89 89); font-weight: 500; } .main_user>p:nth-child(2) { font-size: 14px; } .main_nav>.navbar-nav a { color: #213555 !important; font-weight: 500; font-size: 16px; } .main_nav>.navbar-nav a:hover { background-color: aliceblue; } .user_drop { left: -163px !important; } @media only screen and (max-width:628px) { .main_nav { margin-top: 10px; display: flex; justify-content: start } .user_drop { left: 0px !important; } } :root { --primary-color: #4a90e2; --bg-color: #f4f7fa; --text-color: #333; --sidebar-bg: #ffffff; --sidebar-hover: #e6f0ff; } body { font-family: 'Poppins', sans-serif; margin: 0; padding: 0; background-color: var(--bg-color); color: var(--text-color); } .sidebar { height: 100vh; width: 250px; position: sticky; z-index: 1; top: 0; left: 0; /*background-color: #151c28;*/ background-color:#008400; overflow-x: hidden; transition: 0.3s; box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); white-space: nowrap; } .sidebar-header { padding: 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e0e0e0; } .sidebar-header h3 { margin: 0; font-size: 1.2em; color: var(--primary-color); } .toggle-btn { background: none; border: none; color: var(--text-color); font-size: 20px; cursor: pointer; transition: 0.2s; } .toggle-btn:hover { color: var(--primary-color); } .sidebar a { padding: 15px 25px; text-decoration: none; font-size: 16px; display: flex; align-items: center; transition: 0.2s; } .sidebar>a{ font-weight: 500 !important; } .sidebar a:hover { background-color: var(--sidebar-hover); color: var(--primary-color); } .sidebar a i { min-width: 30px; font-size: 20px; } #main { transition: margin-left .3s; padding: 20px; /* margin-left: 250px; */ } .sidebar.closed { width: 70px; } .sidebar.closed .sidebar-header h3 { display: none; } .sidebar.closed a span { display: none; } .sidebar.closed~#main { /* margin-left: 70px; */ } /* Style for submenu */ .sub-menu { display: none; padding-left: 20px; } .sidebar a{ font-size: 15px; color:white } .sub-menu li { list-style-type: none; } .sub-menu li>a{ color:#edcbcb !important } @media screen and (max-width: 768px) { .sidebar { width: 70px; } .sidebar .sidebar-header h3 { display: none; } .sidebar a span { display: none; } #main { /* margin-left: 70px; */ } .sidebar.open { width: 250px; } .sidebar.open .sidebar-header h3 { display: block; } .sidebar.open a span { display: inline; } .sidebar.open~#main { /* margin-left: 250px; */ } } </style> <body> <div class="container-fluid " style="box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;background-color: #008400;border: 1px solid #3e3e3e"> <nav class=" navbar navbar-expand-lg navbar-light"> <a class="navbar-brand " href="#"> <img src="<?php echo base_url('public/assets/images/final smart.svg');?>" alt="Logo" width="230px" style="background-color:white;padding:5px 10px;border:1px solid lightgrey;box-shadow:2px 2px 10px lightgrey;"> <!-- Logo --> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class=" collapse navbar-collapse main_nav " id="navbarSupportedContent"> <p id="modeToggle" style="margin:5px 30px 0 0;"> <i id="toggleIcon" class="fas fa-moon"></i> </p> <!-- Bell Icon Container --> <div style="position: relative; display: inline-block;"> <svg xmlns="http://www.w3.org/2000/svg" style="color: #FC8F54; cursor: pointer;" width="26" height="26" data-toggle="modal" data-target="#exampleModal" fill="currentColor" class="bi bi-bell" viewBox="0 0 16 16"> <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2M8 1.918l-.797.161A4 4 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4 4 0 0 0-3.203-3.92zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5 5 0 0 1 13 6c0 .88.32 4.2 1.22 6" /> </svg> <!-- Notification Count Badge --> <span id="notificationCount" class="badge badge-danger" style="position: absolute; top: 0; right: 0; transform: translate(50%, -50%); display: none;"> 0 </span> </div> <!-- Notification Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Notifications</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <ul id="notificationList" class="list-group"> <li class="list-group-item text-muted">Loading...</li> </ul> </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary" id="markAsReadBtn">Mark All as Read</button> </div> </div> </div> </div> <!-- Example single danger button --> <div class="btn-group mr-5 ml-5"> <a data-toggle="dropdown" aria-expanded="false"> <img src='<?php echo base_url("public/assets/images/Rectangle 4141 (1).png")?>' alt="user image" class="rounded-circle" width="50px"> </a> <div class="dropdown-menu user_drop"> <div class="d-flex align-items-center p-2"> <img src='<?php echo base_url("public/assets/images/Rectangle 4141 (1).png")?>' alt="user image" class=" rounded-circle" width="50px"> <div class="main_user ml-2 "> <p style="width:150px"> <?php echo session()->get('username');?></p> <p> <?php echo session()->get('promoter_id');?></p> </div> </div> <hr> <a class="dropdown-item" href="<?php echo base_url('home'); ?>"> <i class="bi bi-x-diamond-fill" style="color: rgb(104 82 82 / 41%);"></i> Dashboard</a> <?php if(session()->get("role") == 1): ?> <a class="dropdown-item" href="<?php echo base_url('profile-page') ?>"> <i class="bi bi-x-diamond-fill" style="color: rgb(104 82 82 / 41%);"></i> Profile</a> <?php endif; ?> <!-- <a class="dropdown-item" href="#">Another action</a> --> <div class="dropdown-divider"></div> <div class="dropdown-item"><a class="btn btn-danger" href="<?php echo base_url('logout'); ?>"><i class="bi bi-box-arrow-right"></i> Log Out</a></div> </div> </div> </div> </nav> </div> <!-- side bar --> <div> <nav id="sidebar" style=" display: grid; grid-template-columns: auto 1fr;"> <div id="mySidebar" class="sidebar"> <div class="sidebar-header"> <h3></h3> <button class="toggle-btn" onclick="toggleNav()"> <i class="fas fa-bars " style="color:white"></i> </button> </div> <?php if (session()->get('role') == 2): ?> <a href="<?php echo base_url('user-homepage');?>" onclick="toggleSubMenu(this)"> <i class="bi bi-house-door"></i><span>Home</span> </a> <?php endif;?> <?php if (session()->get('role') == 0): ?> <a href="<?php echo base_url('admin-homepage');?>" onclick="toggleSubMenu(this)"> <i class="bi bi-house-door"></i><span>Home</span> </a> <a href="<?php echo base_url('Create-Scheme');?>" onclick="toggleSubMenu(this)"><i class="fas fa-chart-line"></i> <span>Master</span> </a> <ul class="sub-menu"> <div> <li><a href="<?php echo base_url('Create-Scheme');?>">Create Scheme</a></li> <!--<li><a href="#">Document</a></li>--> <!--<li><a href="#">Project</a></li>--> </div> </ul> <a href="<?php echo base_url('Create-Promoter');?>"><i class="bi bi-person-vcard"></i> <span>Create Partners</span></a> <a href="" onclick="toggleSubMenu(this)"><i class="fas fa-chart-line"></i> <span>Initial Pins</span> </a> <ul class="sub-menu"> <div> <li> <a href="<?php echo base_url('Admin-Approval-Panel');?>"><i class="fas fa-user"></i> <span>Initial Pins Request <br> Approval </span></a></li> <li> <a href="<?php echo base_url('Admin-Approved-Pins');?>"><i class="fas fa-user"></i> <span>Approved Initial Pins</span></a></li> </div> </ul> <a href="" onclick="toggleSubMenu(this)"><i class="fas fa-chart-line"></i> <span>Repayment Pins</span> </a> <ul class="sub-menu"> <div> <li> <a href="<?php echo base_url('Repayment-Approval-Panel');?>"><i class="fas fa-user"></i> <span>Repayment Pin <br> Approval </span></a></li> <li> <a href="<?php echo base_url('Admin-Approved-RepaymentPins');?>"><i class="fas fa-user"></i> <span>Approved Repayment <br> Pins</span></a></li> </div> </ul> <a href="<?php echo base_url('withdraw-request-approval');?>"><i class="fas fa-user"></i> <span>Withdraw Approval</span></a> <a href="<?php echo base_url('');?>" onclick="toggleSubMenu(this)"><i class="fas fa-chart-line"></i> <span>Reports</span> </a> <ul class="sub-menu"> <div> <li><a href="<?php echo base_url('Customer-report');?>">Customers report</a></li> <li><a href="<?php echo base_url('Initial-pins-report');?>">Initial pins report</a></li> <li><a href="<?php echo base_url('repayment-pins-report');?>">Repayment pins report</a></li> <li><a href="<?php echo base_url('Withdraw-report'); ?>">Withdraw Report</a></li> <li><a href="<?php echo base_url('payment-report'); ?>">Payment Report</a></li> <li><a href="<?php echo base_url('promoter-report'); ?>">Promoter Report</a></li> </div> </ul> <?php endif;?> <?php if (session()->get('role') == 1): ?> <a href="<?php echo base_url('home');?>" onclick="toggleSubMenu(this)"> <i class="bi bi-house-door"></i><span>Home</span> </a> <a href="<?php echo base_url('my-pin-requests'); ?>"><i class="bi bi-person-vcard"></i> <span>My pin requests</span></a> <a href="<?php echo base_url('Repayment-Pins-Request'); ?>"><i class="bi bi-person-vcard"></i> <span>Repayment Pins Request</span></a> <a href="<?php echo base_url('Customer-register'); ?>" onclick="toggleSubMenu(this)"><i class="fas fa-chart-line"></i> <span>Customers</span> </a> <ul class="sub-menu"> <div> <li><a href="<?php echo base_url('Customer-register'); ?>">Customer Registration</a></li> <li><a href="<?php echo base_url('Customer-details'); ?>">Customer Details</a></li> <li><a href="<?php echo base_url('Customer-payments'); ?>">Customer Payments</a></li> <!--<li><a href="<?php echo base_url('Withdraw-report'); ?>">Withdraw Report</a></li>--> </div> </ul> <?php endif;?> <?php if (session()->get('role') == 0): ?> <a href="<?php echo base_url("instructions");?>"><i class="fas fa-cog"></i> <span>Instructions</span></a> <?php endif;?> </div> <!-- <div id="main"> <h2>Modern Sidebar with Internal Toggle</h2> <p>The toggle button is inside the sidebar at the top. Click it to expand or collapse the sidebar.</p> </div> </div> </body> --> <script> // Toggle the visibility of the sidebar function toggleNav() { const sidebar = document.getElementById("mySidebar"); const main = document.getElementById("main"); // Toggle the sidebar open/closed sidebar.classList.toggle("closed"); if (window.innerWidth <= 768) { sidebar.classList.toggle("open"); } // Close all submenus when the sidebar is toggled closeAllSubMenus(); } // Toggle the visibility of the submenu function toggleSubMenu(link) { const subMenu = link.nextElementSibling; // If the submenu is already visible, hide it if (subMenu && subMenu.style.display === "block") { subMenu.style.display = "none"; } else { // Otherwise, show the submenu subMenu.style.display = "block"; // Close other open submenus when a new submenu is toggled const allSubMenus = document.querySelectorAll('.sub-menu'); allSubMenus.forEach(function (menu) { if (menu !== subMenu) { menu.style.display = 'none'; } }); } } // Function to close all submenus function closeAllSubMenus() { const subMenus = document.querySelectorAll('.sub-menu'); subMenus.forEach(function (submenu) { submenu.style.display = 'none'; }); } // Function to ensure sidebar opens when a link in the sidebar is clicked function openSidebarOnLinkClick() { const sidebar = document.getElementById("mySidebar"); const main = document.getElementById("main"); // Open sidebar if it is closed if (sidebar.classList.contains("closed")) { sidebar.classList.remove("closed"); if (window.innerWidth <= 768) { sidebar.classList.add("open"); } } // Close all submenus when a link is clicked closeAllSubMenus(); } // Add event listeners to sidebar links const sidebarLinks = document.querySelectorAll('#mySidebar a'); sidebarLinks.forEach(link => { link.addEventListener('click', function (event) { // Ensure sidebar opens if it was closed openSidebarOnLinkClick(); // Check if the clicked link has a submenu (not the link that just navigates) if (link.nextElementSibling && link.nextElementSibling.classList.contains('sub-menu')) { // Prevent the link's default behavior so the submenu can toggle event.preventDefault(); toggleSubMenu(link); } }); }); </script> <script> document.addEventListener("DOMContentLoaded", function () { const modeToggle = document.getElementById('modeToggle'); const toggleIcon = document.getElementById('toggleIcon'); const body = document.body; if (localStorage.getItem('mode') === 'dark') { body.classList.add('dark-mode'); toggleIcon.classList.remove('fa-moon'); toggleIcon.classList.add('fa-sun'); } modeToggle.addEventListener('click', function () { body.classList.toggle('dark-mode'); if (body.classList.contains('dark-mode')) { localStorage.setItem('mode', 'dark'); toggleIcon.classList.remove('fa-moon'); toggleIcon.classList.add('fa-sun'); } else { localStorage.setItem('mode', 'day'); toggleIcon.classList.remove('fa-sun'); toggleIcon.classList.add('fa-moon'); } }); }); </script> <script> $(document).ready(function () { fetchNotifications(); $('.bi-bell, #notificationCount').on('click', function () { $('#exampleModal').modal('show'); }); $('#markAsReadBtn').on('click', function () { markNotificationsAsRead(); }); function fetchNotifications() { $.ajax({ url: '<?= base_url('notifications');?>', method: 'GET', dataType: 'json', success: function (data) { console.log('Fetched Notifications:', data); if (data.notifications.length > 0) { $('#notificationCount').text(data.unreadCount).show(); var notificationHTML = ''; $.each(data.notifications, function (index, notification) { notificationHTML += '<li class="list-group-item">' + notification.message + '</li>'; }); $('#notificationList').html(notificationHTML); } else { $('#notificationCount').hide(); $('#notificationList').html('<li class="list-group-item text-muted">No new notifications.</li>'); } }, error: function (jqXHR, textStatus, errorThrown) { console.error('Error fetching notifications:', textStatus, errorThrown); } }); } function markNotificationsAsRead() { $.ajax({ url: '<?= base_url('mark_as_read'); ?>', method: 'POST', dataType: 'json', success: function (data) { if (data.result === 1) { $('#notificationCount').text(0).hide(); // Hide count after reading $('#notificationList').html('<li class="list-group-item text-muted">No new notifications.</li>'); } }, error: function (jqXHR, textStatus, errorThrown) { console.error('Error marking notifications as read:', textStatus, errorThrown); } }); } }); </script> <!-- </html> -->