Игорь Надеин
0ec6a46831
- Добавлена bottom navbar с 5 кнопками (Главная, Уведомления, Поиск, Календарь, Ещё) - Панель отображается только на мобильных устройствах (до 768px) - Использованы системные CSS переменные и стили - Удалена кнопка гамбургера из верхней панели (дублирование функционала) - Добавлена синхронизация бейджей уведомлений - Поддержка светлой и темной темы - Backdrop-filter для полупрозрачности в iOS-стиле
82 lines
3.0 KiB
JavaScript
82 lines
3.0 KiB
JavaScript
/**
|
|
* Bottom Navigation Bar
|
|
* Управление нижней панелью навигации для мобильных устройств
|
|
*/
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Кнопка уведомлений в нижней панели
|
|
const bottomNotificationToggle = document.getElementById('bottomNotificationToggle');
|
|
const notificationDropdown = document.getElementById('notificationDropdown');
|
|
const notificationBadge = document.getElementById('notificationBadge');
|
|
const bottomNotificationBadge = document.getElementById('bottomNotificationBadge');
|
|
|
|
// Синхронизация бейджей между верхней и нижней панелью
|
|
function syncNotificationBadges() {
|
|
if (notificationBadge && bottomNotificationBadge) {
|
|
const count = notificationBadge.textContent;
|
|
const hasNotifications = !notificationBadge.classList.contains('d-none');
|
|
|
|
bottomNotificationBadge.textContent = count;
|
|
if (hasNotifications) {
|
|
bottomNotificationBadge.classList.remove('d-none');
|
|
} else {
|
|
bottomNotificationBadge.classList.add('d-none');
|
|
}
|
|
}
|
|
}
|
|
|
|
// Наблюдатель за изменениями бейджа уведомлений
|
|
if (notificationBadge) {
|
|
const observer = new MutationObserver(syncNotificationBadges);
|
|
observer.observe(notificationBadge, {
|
|
attributes: true,
|
|
childList: true,
|
|
characterData: true,
|
|
subtree: true
|
|
});
|
|
// Первоначальная синхронизация
|
|
syncNotificationBadges();
|
|
}
|
|
|
|
// Открытие уведомлений из нижней панели
|
|
if (bottomNotificationToggle && notificationDropdown) {
|
|
bottomNotificationToggle.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
const isVisible = notificationDropdown.style.display !== 'none';
|
|
|
|
if (isVisible) {
|
|
notificationDropdown.style.display = 'none';
|
|
} else {
|
|
notificationDropdown.style.display = 'block';
|
|
// Позиционируем над нижней панелью
|
|
notificationDropdown.style.bottom = '70px';
|
|
notificationDropdown.style.right = '10px';
|
|
notificationDropdown.style.top = 'auto';
|
|
notificationDropdown.style.left = 'auto';
|
|
}
|
|
});
|
|
}
|
|
|
|
// Кнопка поиска в нижней панели
|
|
const bottomSearchToggle = document.getElementById('bottomSearchToggle');
|
|
|
|
if (bottomSearchToggle) {
|
|
bottomSearchToggle.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
// Перенаправляем на страницу поиска
|
|
window.location.href = '/search/';
|
|
});
|
|
}
|
|
|
|
// Закрытие выпадающих элементов при клике вне их
|
|
document.addEventListener('click', function(e) {
|
|
if (notificationDropdown &&
|
|
!notificationDropdown.contains(e.target) &&
|
|
!bottomNotificationToggle?.contains(e.target)) {
|
|
notificationDropdown.style.display = 'none';
|
|
}
|
|
});
|
|
});
|