NoteJS/MOBILE_SIDEBAR_FEATURE.md

Мобильный боковой слайдер - Документация функции

Обзор

На мобильных устройствах добавлена новая функция мобильного бокового слайдера, который предоставляет доступ к календарю, поиску и тегам. Эта функция значительно улучшает пользовательский опыт на мобильных устройствах, предоставляя полный функционал ПК версии в удобной форме.

Технические характеристики

Точка срабатывания адаптивности

• Мобильная версия: ширина экрана ≤ 768px
• ПК версия: ширина экрана > 768px

Компоненты слайдера

1. Кнопка открытия (☰)

   • Позиция: фиксированная, левый верхний угол
   • Z-index: 999
   • Стиль: кнопка с выпуклым эффектом (box-shadow)

2. Основной слайдер (.mobile-sidebar)

   • Позиция: фиксированная, слева
   • Ширина: 280px
   • Высота: 100vh (во всю высоту экрана)
   • Анимация: плавное выдвижение (0.3s ease)
   • Z-index: 1000

3. Оверлей (.mobile-sidebar-overlay)

   • Позиция: фиксированная, полный экран
   • Фон: полупрозрачный чёрный (rgba(0, 0, 0, 0.5))
   • Z-index: 999
   • Функция: закрытие слайдера при клике

4. Кнопка закрытия

   • Позиция: верхний правый угол слайдера
   • Размер: 40x40px
   • Иконка: mdi:close

Содержимое слайдера

1. Календарь (renderCalendarMobile)

- 42 дня (6 недель x 7 дней)
- Полная навигация по месяцам
- Выделение сегодняшнего дня (синий цвет)
- Выделение выбранного дня (зелёный цвет)
- Индикатор дней с заметками (зелёная точка)
- Дни соседних месяцев (серый цвет, меньший размер)

2. Поле поиска

- Синхронизировано с основным поиском
- Задержка 300ms перед поиском (оптимизация)
- Кнопка очистки (✕)
- Подержка Escape для сброса

3. Теги (renderTagsMobile)

- Все уникальные теги из заметок
- Показывает количество заметок для каждого тега
- Визуальное выделение активного тега
- Полная функциональность фильтрации

Функциональность

Управление слайдером

// Открытие слайдера
mobileMenuBtn.addEventListener("click", () => {
  mobileSidebar.classList.add("open");
  sidebarOverlay.classList.add("open");
  document.body.style.overflow = "hidden";
});

// Закрытие слайдера
sidebarCloseBtn.addEventListener("click", () => {
  mobileSidebar.classList.remove("open");
  sidebarOverlay.classList.remove("open");
  document.body.style.overflow = "auto";
});

// Закрытие при клике на оверлей
sidebarOverlay.addEventListener("click", () => {
  mobileSidebar.classList.remove("open");
  sidebarOverlay.classList.remove("open");
  document.body.style.overflow = "auto";
});

Синхронизация

Все действия в мобильном слайдере автоматически синхронизируются с ПК версией:

1. Выбор даты в календаре

   • Срабатывает handleDayClickMobile()
   • Перерисовываются оба календаря
   • Обновляются теги и основной календарь

2. Ввод текста в поиск

   • Синхронизируется с основным полем поиска (#searchInput)
   • Вызывает searchNotes(query)
   • Обновляет индикатор фильтра

3. Клик на тег

   • Срабатывает handleTagClickMobile()
   • Синхронизируется с основными тегами
   • Обновляет оба календаря

Новые функции в app.js

renderCalendarMobile()

Отображает календарь в мобильном слайдере. Использует тот же алгоритм, что и основной календарь.

handleDayClickMobile()

Обработчик клика на день в мобильном календаре. Обновляет фильтр и перерисовывает все компоненты.

renderTagsMobile()

Отображает теги в мобильном слайдере. Синхронизируется с основными тегами.

handleTagClickMobile()

Обработчик клика на тег в мобильном слайдере. Обновляет фильтр и перерисовывает компоненты.

initSearchMobile()

Инициализирует поле поиска в мобильном слайдере. Синхронизируется с основным поиском.

Стили в style.css

Ключевые CSS классы

.mobile-menu-btn          /* Кнопка открытия меню */
.mobile-sidebar           /* Основной контейнер слайдера */
.mobile-sidebar.open      /* Состояние открытого слайдера */
.sidebar-close-btn        /* Кнопка закрытия */
.sidebar-content          /* Контейнер содержимого */
.mobile-sidebar-overlay   /* Оверлей */
.mobile-sidebar-overlay.open  /* Состояние открытого оверлея */

Медиа-запрос

@media (max-width: 768px) {
  .mobile-menu-btn {
    display: flex;        /* Показываем кнопку меню */
  }
  .container-leftside {
    display: none !important;  /* Скрываем ПК версию панели */
  }
  /* Дополнительные адаптации */
}

Преимущества реализации

✅ Полная функциональность - все функции как в ПК версии ✅ Синхронизация - изменения в слайдере сразу отражаются везде ✅ Удобство - легко открыть/закрыть ✅ Экономия места - не занимает постоянное место на экране ✅ Хороший UX - оверлей и плавные анимации ✅ Производительность - минимальные затраты на отрисовку ✅ Доступность - полная поддержка клавиатуры (Escape)

Тестирование

Чек-лист тестирования

• Кнопка меню появляется на экранах ≤ 768px
• Кнопка меню исчезает на экранах > 768px
• Слайдер открывается при нажатии кнопки
• Слайдер закрывается кнопкой ✕
• Слайдер закрывается кликом на оверлей
• Календарь отображается правильно
• Навигация по месяцам работает в обе стороны
• День выбирается и фильтрует заметки
• Выбранный день синхронизируется между слайдером и основным календарем
• Поле поиска синхронизируется
• Теги отображаются правильно
• Клик на тег применяет фильтр
• Все фильтры работают одновременно

Браузеры и поддержка

• ✅ Chrome / Chromium
• ✅ Firefox
• ✅ Safari
• ✅ Edge
• ✅ Все современные мобильные браузеры

Примеры кода

Пример 1: Открытие/закрытие слайдера

// HTML
<div class="mobile-menu-btn" id="mobileMenuBtn">
  <span class="iconify" data-icon="mdi:menu"></span>
</div>

// JavaScript
document.getElementById("mobileMenuBtn").addEventListener("click", function () {
  document.getElementById("mobileSidebar").classList.add("open");
  document.getElementById("sidebarOverlay").classList.add("open");
  document.body.style.overflow = "hidden";
});

Пример 2: Синхронизация поиска

// При вводе в мобильное поле
searchInputMobile.addEventListener("input", function () {
  const query = this.value;
  searchNotes(query);
  
  // Синхронизируем с основным полем
  document.getElementById("searchInput").value = query;
});

Пример 3: Синхронизация календарей

// При нажатии на месяц в мобильном календаре
prevMonthBtnMobile.addEventListener("click", function () {
  currentDate.setMonth(currentDate.getMonth() - 1);
  renderCalendar();      // Обновляем основной календарь
  renderCalendarMobile(); // Обновляем мобильный
});

Возможные улучшения в будущем

1. 🎯 Анимация свайпа (жесты) для открытия/закрытия
2. 🎨 Темная тема (dark mode) для слайдера
3. 📊 Статистика по тегам в слайдере
4. 🔔 Уведомления о днях с заметками
5. ⌨️ Горячие клавиши для быстрого открытия слайдера
6. 📍 Сохранение позиции прокрутки при открытии/закрытии
7. 🎭 Переходы и анимации при перелистывании месяцев

Заключение

Мобильный боковой слайдер - это полнофункциональное решение для мобильной версии приложения NoteJS, которое предоставляет удобный доступ ко всем инструментам фильтрации и поиска, сохраняя при этом максимум пространства на экране для просмотра заметок.