Реализуйте меню и тестовый блок для администрации и пользователя в онлайн-школе. На вход в файл index.pug с сервера поступает объект с пользователем в следующем виде:
const user = {
login: 'student',
password: 'studentpass',
name: 'Студент',
surname: 'Студентович',
role: 'user',
testing: true,
}
Главными полями являются role и testing, отвечающие за тип пользователя и вывод тестовой информации для администрации соответственно. В общем виде меню для любого типа пользователя имеет следующие пункты:
- Настройки
- Промокод
- Доступ в подарок
- Помощь
- Выйти. Является кнопкой
Если пользователь имеет любую роль отличную от user, то добавляются новые пункты в меню. Порядок расположения и блоки-разделители смотрите в примере ниже.
- Учительская
- Менторство
- Маркетинг
Если значение переменной role равно admin и значение testing истинно, то добавляется ещё одна секция с заголовком и данными из файла testing.pug
Пример вёрстки администратора с включенным блоком тестирования
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>School Profile</title>
</head>
<body>
<section class="profile-links">
<h1>Студент Студентович</h1>
<nav><a href="#">Настройки</a>
<div class="divider"></div>
<a href="#">Промокод</a>
<a href="#">Доступ в подарок</a>
<div class="divider"></div>
<a href="#">Учительская</a>
<a href="#">Менторство</a>
<a href="#">Маркетинг</a>
<div class="divider"></div>
<a href="#">Помощь</a>
<button>Выйти</button>
</nav>
<section>
<h2>Сводка по тестированию</h2>
<p>Тестовые данные для администрации</p>
</section>
</section>
</body>
</html>