Боковая панель
Drawer — боковая панель, которая выезжает сбоку экрана поверх страницы. В личном кабинете LearnUp в ней лежит меню: на телефоне его открывают кнопкой, а на компьютере оно видно всегда. daisyUI делает такую панель без JavaScript — на скрытом флажке.
Как устроен drawer
| Класс | Что это |
|---|---|
drawer | Внешний блок всего макета |
drawer-toggle | Скрытый флажок: отмечен — панель открыта |
drawer-content | Основное содержимое страницы |
drawer-side | Сама панель |
drawer-overlay | Затемнение, щелчок по которому закрывает панель |
Флажком управляют теги <label for="...">: щелчок по <label> переключает флажок с тем же id. Поэтому кнопка открытия и затемнение — это <label>.
Выезжающая панель
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="drawer min-h-72">
<input id="sidebar" type="checkbox" class="drawer-toggle">
<div class="drawer-content p-4">
<label for="sidebar" class="btn btn-primary">Открыть меню</label>
<p class="mt-4">Здравствуйте, Анна! У вас 2 активных курса.</p>
</div>
<div class="drawer-side">
<label for="sidebar" aria-label="Закрыть меню" class="drawer-overlay"></label>
<ul class="menu min-h-full w-60 bg-base-200 p-4">
<li><a href="#dashboard">Главная</a></li>
<li><a href="#my-courses">Мои курсы</a></li>
<li><a href="#settings">Настройки</a></li>
</ul>
</div>
</div>Нажмите «Открыть меню» — слева выедет серая панель со ссылками, а страница затемнится. Щелчок по затемнению закрывает панель. Порядок важен: флажок идёт первым, затем drawer-content, затем drawer-side.
Постоянная панель на широком экране
Модификатор drawer-open держит панель открытой и ставит её рядом с содержимым, а не поверх. С префиксом lg: это происходит только на экранах от 1024 пикселей, а кнопку открытия на них прячут утилитой lg:hidden:
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="drawer min-h-72 lg:drawer-open">
<input id="dashboard-menu" type="checkbox" class="drawer-toggle">
<div class="drawer-content p-4">
<label for="dashboard-menu" class="btn btn-ghost lg:hidden">☰ Меню</label>
<h1 class="mt-2 text-2xl font-bold">Мои курсы</h1>
</div>
<div class="drawer-side">
<label for="dashboard-menu" aria-label="Закрыть меню" class="drawer-overlay"></label>
<ul class="menu min-h-full w-60 bg-base-200 p-4">
<li class="menu-title">LearnUp</li>
<li><a href="#dashboard">Главная</a></li>
<li><a href="#my-courses" class="menu-active">Мои курсы</a></li>
</ul>
</div>
</div>Окно примера уже 1024 пикселей, поэтому здесь видна кнопка «☰ Меню». В проекте на широком экране панель будет стоять слева постоянно, а кнопка исчезнет. drawer-end ставит панель справа вместо левой стороны.
Частая ошибка
Указать в for у <label> не тот id, что у флажка, — например, for="menu" при id="sidebar". Кнопка тогда выглядит нормально, но ничего не открывает, а если ошибка в затемнении, открытую панель уже не закрыть. Значения for у всех <label> и id флажка должны совпадать, и на странице с двумя панелями у каждой свой id.