Implementation of Notification System

This commit is contained in:
twotalesanimation
2025-12-16 22:40:24 +02:00
parent ebd7efe21c
commit 7ebc2f64cf
18 changed files with 501 additions and 232 deletions

View File

@@ -25,6 +25,7 @@ require_once($rootDir . "/src/config/env.php");
require_once($rootDir . "/src/config/session.php");
require_once($rootDir . "/src/config/connection.php");
require_once($rootDir . "/src/config/functions.php");
require_once($rootDir . "/src/helpers/notification_helper.php");
$is_logged_in = isset($_SESSION['user_id']);
if (isset($_SESSION['user_id'])) {
@@ -348,11 +349,17 @@ if ($headerStyle === 'light') {
<div class="profile-menu">
<div class="profile-info">
<span style="color: <?php echo $textColor; ?>;">Welcome, <?php echo $_SESSION['first_name']; ?></span>
<a href="account_settings">
<img src="<?php echo $_SESSION['profile_pic']; ?>?v=<?php echo time(); ?>" alt="Profile Picture" class="profile-pic">
</a>
<div class="notif-avatar-container" data-admin-id="<?php echo intval($_SESSION['user_id'] ?? 0); ?>">
<a href="account_settings">
<img src="<?php echo $_SESSION['profile_pic']; ?>?v=<?php echo time(); ?>" alt="Profile Picture" class="profile-pic">
</a>
<span id="notif-badge" class="notif-badge"></span>
</div>
<div id="notif-panel" class="notif-panel" style="display:none;"></div>
</div>
</div>
<link rel="stylesheet" href="assets/css/notifications.css">
<script src="assets/js/notifications_panel.js" defer></script>
<?php else : ?>
<a href="login" class="theme-btn style-two bgc-secondary">
<span data-hover="Log In">Log In</span>
@@ -372,6 +379,9 @@ if ($headerStyle === 'light') {
const profileInfo = document.querySelector('.profile-info');
if (profileInfo) {
profileInfo.addEventListener('click', function(event) {
// Ignore clicks on the notifications avatar so the notif panel
// can handle its own toggle without also toggling the profile dropdown.
if (event.target.closest && event.target.closest('.notif-avatar-container')) return;
const dropdownMenu = document.querySelector('.dropdown-menu2');
if (dropdownMenu) {
dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';