Как изменить порядок кнопок в заголовке?

Всем привет! Я хочу полностью переделать шапку форума Discourse.

Дизайнер нашей компании набросал для меня такой макет, но с помощью CSS у меня не получилось его реализовать.

Однако у меня возникла проблема с перемещением кнопки профиля в начало. Я искал информацию в источниках и нашёл упоминание файла \app\assets\javascripts\discourse\app\widgets\header.js.

Используя эту подсказку, я смог убрать иконки из продакшена и немного продвинуться вперёд: [Solved] How to use virtual-dom's "h" helper in <head> for header-dropdown hamburger widget override? + How to override @computed method?

Но переместить кнопку у меня так и не получилось.

Сейчас форум выглядит так:

А нужно вот так (переместить кнопку аккаунта и изменить иконку):

Подскажите, куда именно нужно копать, чтобы это сделать?

2 лайка

Вы можете сделать что-то подобное с помощью CSS:

.d-header-icons { 
  display: flex;
}

.header-dropdown-toggle.current-user { 
  order: 1; 
}
.header-dropdown-toggle.search-dropdown { 
  order: 2; 
}
.header-dropdown-toggle.hamburger-dropdown { 
  order: 3; 
}
5 лайков

Спасибо, очень хорошо.

Небольшая доработка мне помогла.

2 лайка

Эта тема была автоматически закрыта через 2 дня после последнего ответа. Новые ответы больше не принимаются.