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

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

#### 3. Теги (renderTagsMobile)
```javascript
- Все уникальные теги из заметок
- Показывает количество заметок для каждого тега
- Визуальное выделение активного тега
- Полная функциональность фильтрации
```

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

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

```javascript
// Открытие слайдера
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 классы

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

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

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

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

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

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

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

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

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

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

## Примеры кода

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

```javascript
// 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: Синхронизация поиска

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

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

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

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

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

## Заключение

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