헤더의 버튼 순서를 어떻게 변경하나요?

[anton21m]

여러분 안녕하세요. Discourse의 헤더를 완전히 다시 만들고 싶습니다.
우리 회사 디자이너가 저를 위해 이런 디자인을 스케치해 주었고, CSS의 도움을 받아 꽤 많이 진행했습니다.

하지만 프로필 버튼을 맨 앞으로 이동하는 데 문제가 생겼습니다. 자료를 검색하다가 \app\assets\javascripts\discourse\app\widgets\header.js라는 것을 찾았습니다.
이 파일의 도움으로 production 아이콘을 제거하고 조금 더 많은 작업을 수행할 수 있었습니다. [Solved] How to use virtual-dom's "h" helper in <head> for header-dropdown hamburger widget override? + How to override @computed method?

그러나 버튼을 이동하지는 못했습니다.
현재 포럼은 다음과 같이 보입니다:

다음과 같이 만드는 것이 필요합니다: (계정 버튼을 이동하고 아이콘 변경)

이를 수행하기 위해 어디를 살펴봐야 할까요:

[awesomerobot (Kris)]

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; 
}

[anton21m]

고맙습니다, 아주 좋습니다.

@awesomerobot

CSS로 이렇게 할 수 있습니다:

.panel .d-header-icons {
  display: flex;
}
.d-header-icons #current-user{
  order: 1;
}
.d-header-icons .header-dropdown-toggle {
  order: 2;
}

조금 수정하니 도움이 되었습니다