Имеется такая верстка и в некоторых блоках меню немного отличается. Где-то будет чек-бокс, где-то будет color, где-то будет просто текст без чек-бокса и color.
<div class="menu-container">
<div class="menu">
<div class="menu-content">
<div class="menu-title">Название меню 1</div>
<ul class="menu-list">
<li class="menu-item">
<label class="menu-item-name">
<span>Пункт 1</span>
<input type="checkbox">
</label>
</li>
</ul>
</div>
</div>
<div class="menu-desc">Описание меню</div>
</div>
<div class="menu-container">
<div class="menu">
<div class="menu-content">
<div class="menu-title">Название меню 2</div>
<ul class="menu-list">
<li class="menu-item">
<div class="menu-item-color" />
<label class="menu-item-name">
<span>Пункт 1</span>
<input type="checkbox">
<span>Название справа если checkbox`а нет</span>
</label>
</li>
</ul>
</div>
</div>
<div class="menu-desc">Описание меню</div>
</div>
Мой вариант такой, насколько он правильный? Да, я в курсе что checkbox это UI. Его само собой я вынесу.
components
- Menu // Весь блок menu-container, в котором будет MenuTitle, MenuList, MenuDesc
- MenuTitle // menu-title
- MenuList // menu-list
-- MenuItem // menu-item
- MenuDesc // menu-desc
- MenuColor // menu-item-color
Также некоторые могут сказать, что это вообще можно и не выносить в компоненты, согласен! Но я хочу чтобы было все красиво + возможно будет что-то ещё. Вот хочу раскинуть на компоненты :)
Простой