.user

Области, по которым можно водить курсором и при этом не терять фокус: http://prntscr.com/auyvea. Сделаны через всевдо-элементы и полностью прозрачны они. К сожалению, неустойчивы к изменению высоты менюшки. Если будут появляться новые компоненты - придется подгонять.

Я так понимаю, что некоторые компоненты, например "страж", могут присутствовать или отсутствовать. И это надо учитывать. На этот и потенциальные другие кейсы проработал модификаторы. Важно проставлять их всегда.
.user__actions_items_2
.user__actions_items_3
.user__actions_items_4
.user__actions_items_5
.user__actions_items_6
.user__actions_items_7
.user__actions_items_8
.user__actions_items_9
.user__actions_items_10









У айтема с пипкой модификатор .user__link_peak

Премиальный айтем .user__link_premium

Показ шарика о том, что новые сообщения появились: .user_unread





.user_disabled

Может быть кейс, когда надо скрыть выпадайку. Например кликнули в "профиль" в выпадайке, когда мы и так находимся в профиле. Если ничего не предпринимать, то кажется, что ничего вовсе и не произошло. Но для наглядности можно скрыть выпадайку. Для этого вешаем класс .user_disabled на 300ms. Этот класс заблокирует наведение, меню исчезнет и все.





Тач устройства

Наведения нет в принципе на "тач" устройствах. И, к сожалению, мы никак не может отследить тач устройства. Если ничего не предпринять, то менюшка на тачах не будет доступна, а больше нигде ссылок на эти страницы нет

Решение раз

Будем пологать, что все что уже чем 1340px (на основной брейкпоинт перехода от планшетного дизайна к десктопному) есть тач устройство. Да, там могут быть и обычные ноуты, но лучше перестраховаться. Детектим ширину, если она строго меньше чем 1340px, то отменяем клик по аватарке, который должен был вести в профиль и по этому клику начинаем тугглить класс user_drop, который фиксирует выпадайку.

Чтобы перейти в профиль пользователям таких устройств придет нажить "профиль" в выпадайке.

Решение два

Ловим клик по аватарке и проверяем, показана ли выпадайка или нет. Если показана, то все ок, не надо ниче предпринимать, пользователь ее видел. Если нет, то отменяем клик и показываем выпадайку через тот же туггл user_drop.

Тут может быть еще кейс того, что пользователь пришел в аватарка табуляциями, и менбшки он не видит. В этом случае его поведение аналогично тач устройства.

Бонусом получаем то, что повторный клик по аватарка нас все-таки отведет в профиль.

Потестить этот кейс на десктопах можно табуляциями.

Возможно тут надо действовать немного иначе. Возможно пользователь один раз тапнув по аватарке захочет закрыть выпадайку. А не идти в профиль. В этом случае надо смотреть на наличие .user_drop уже в блоке. Сейчас в демке сделано именно так.