В приложении есть 2 уровня пользователей, обычный юзер и админ. Нужно сделать компонент хедера в котором будет некая информация одинаковая для всех, а некоторая - только для админов.
Есть базовый компонент хедера :
<div class="user-header>
<img src="logo">
<div class="user-header__links>"
...
</div>
</div>
В 'user-header__links' идут ссылки, некоторые из которых должны показываться только админам. Так же, в хедере должен ещё быть dropdown, так же доступны лишь администраторам.
Я вижу 3 варианта решения :
1) Сделать 2 разных компонента, т.е. оставить UserHeader, и он будет служить для юзера, и скопировать этот код в новый компонент, отредактировать как нужно и получим adminHeader, добавив нужные элементы и ссылки
2) В UserHeader сделать пропсы / слоты для прокидывания дополнительного контента в него, и тогда adminHeader будет выглядеть как-то так :
<UserHeader links={some additional links for admins}>
<AdminDropdown/>
</UserHeader/>
3) Оставить один компонент AppHeader и в него позапихивать элементы и для юзеров, и для админов и на "админские" элементы просто ставить проверку и если юзер ещё и админ, то показывать.
Понимаю что впринципе все варианты рабочие, но прийти к пониманию какой вариант более удобный и практичный как-то не выходит. Так же, если возможно есть какие-то статьи касаемо этих моментов - буду благодарен за ссылки.
Средний