새 사이드바를 왼쪽에서 오른쪽으로 변경 (영어 포럼)

안녕하세요,

몇일 전 포럼을 검색하고 새 채팅방에서 이에 대해 질문을 했었습니다. 포럼에 게시하도록 조언을 받았습니다. 누군가 도움을 줄 수 있기를 바랍니다.

새로운 사이드바를 오른쪽으로 이동시키는 플러그인이 있나요?

아니면 왼쪽에서 오른쪽으로 전환하는 내장 기능이 있나요?

5개의 좋아요

이 기능을 수행하는 내장 방식이나 제가 알고 있는 기존 플러그인은 없습니다. 따라서 이를 가능하게 하는 커스터마이징이 가능할 수는 있지만, 새로운 영역을 개척해야 하며 예상치 못한 문제에 부딪힐 가능성이 높습니다.

5개의 좋아요

데스크톱 뷰용:

    body #main-outlet-wrapper {
        grid-template-areas: "content sidebar";
        grid-template-columns: minmax(0, 1fr) 0;
    }
    
    body.sidebar-animate #main-outlet-wrapper {
        grid-template-areas: "content sidebar";
    }
    body.has-sidebar-page #main-outlet-wrapper {
        grid-template-areas: "content sidebar";
        grid-template-columns: minmax(0, 1fr) var(--d-sidebar-width);
        padding: 0 0 0 10px;
    }
8개의 좋아요

감사합니다. 여기서 붙여넣으면 되나요?

안전을 위해, Desktop->CSS 폴더에 넣어 주세요.

6개의 좋아요

감사합니다! 부분적으로 작동합니다. 샌드위치 메뉴는 여전히 왼쪽 상단에 위치해 있으며 로고를 밀어내고 있습니다.

샌드위치 메뉴가 네비게이션 바에서 원래 위치, 즉 오른쪽 아이콘과 함께 유지되기를 원합니다.

또한 사이드바를 켜면 실제로 페이지 폭이 좁아집니다. (사이드바가 활성화되면 무시되는 사용자 지정 페이지 폭이 있습니다)

잘하셨네요 @Lhc_fl :clap:

이 기능을 위한 사이트 설정이 있습니다. 네비게이션 메뉴 항목을 찾아 "헤더 드롭다운"으로 설정해 보세요 :slight_smile:

4개의 좋아요

아니요, 질문의 핵심을 완전히 놓치고 계신 것 같습니다. 헤더 드롭다운을 활성화하면 사이드바가 제거됩니다. :slightly_smiling_face:

이 스레드에서는 사이드바를 왼쪽에서 오른쪽으로 "전환"하되, 햄버거 아이콘은 항상 그랬던 것처럼 오른쪽에 두는 것에 대해 묻고 있습니다. (오른쪽이 더 적절한 위치라고 할 수도 있겠네요)

사이드바와 아이콘을 모두 오른쪽에 둘 수 있는 방법이 나올 때까지 저는 이미 "Header Dropdown"을 활성화해 두었습니다.

왼쪽의 로고는 "포럼 홈"으로 이동합니다(좋은 점입니다). 하지만 이제 로고 자리에 사이드바 토글 아이콘이 배치되어 실수로 사이드바를 토글하게 됩니다. 모든 메뉴 아이콘은 오른쪽에 남아 있어야 한다고 생각합니다.

사이드바 토글은 계속 토글할 필요가 없으므로, 로고 왼쪽으로 이동시키는 것은 핫스팟이 너무 큽니다.

사이드바도 마찬가지입니다. 저는 페이지 콘텐츠는 왼쪽, 사이드바는 오른쪽으로 배치하는 것을 선호합니다.

이것은 어디까지나 개인적인 선호일 뿐이라고 생각합니다. 따라서 다른 포럼 소유자들은 왼쪽으로 모두 배치하는 것에 만족할 수 있으니, 단순히 문의하는 것입니다.

4개의 좋아요

아, 네, 이해했습니다. 오른쪽 햄버거 아이콘이 실제 사이드바를 트리거하지 않는다는 사실을 잊고 있었네요. 동일한 콘텐츠이지만 사이드바가 아니라 드롭다운 형태를 원하시는 거죠.

Discourse의 코드를 살펴봤는데, 불행히도 저에게는 여전히 어떤 마법사의 난해한 공식처럼 보입니다.
:mage: :scroll:
두 컴포넌트가 매우 다르게 렌더링되는 것 같습니다.

사이드바 토글 위젯을 포함하는 헤더 콘텐츠: discourse/app/assets/javascripts/discourse/app/widgets/header-contents.js at fde9e6bc25227b69195181d45ee4360c25c279da · discourse/discourse · GitHub

사이드바 위젯: discourse/app/assets/javascripts/discourse/app/widgets/sidebar-toggle.js at 5b6604f5a7e1c8ff29fe556236dbf86872908b03 · discourse/discourse · GitHub

현재 오른쪽 햄버거 코드: discourse/app/assets/javascripts/discourse/app/widgets/header.js at c43cb0c5716a3671a682c87295f5a7dad61eb65d · discourse/discourse · GitHub

이 정보가 이 목적을 위해 테마 컴포넌트를 만드는 데 도움이 될 수도 있습니다.

3개의 좋아요

고마워! 참고로 이건 햄버거가 아니라 그릴드 치즈 샌드위치야. :nerd_face:

2개의 좋아요

메뉴를 오른쪽으로 이동시키고 싶은 이유가 궁금합니다. 모든 사이트에 더 나은 피드백이라고 생각하시는 건가요, 아니면 본인의 사이트에서 왼쪽 위치가 적합하지 않은 특별한 이유가 있나요? 예를 들어, 왼쪽에 다른 메뉴가 있는 건가요? 그렇지 않다면, 숨기거나 표시할 수 있는 내비게이션 메뉴의 왼쪽 위치가 업계 표준이 되어 가고 있다고 생각합니다.

어떤 말이 더 배고픔을 유발하는지! :rofl: 그래도 햄버거가 더 잘 알려져 있다고 생각합니다. 개인적으로는 햄버그라라고 부르는 걸 좋아합니다! :man_detective:

2개의 좋아요

자, 이 줄을 추가하세요.

span.header-sidebar-toggle {
    order: 1;
}

2개의 좋아요

참고로, 해당 기능을 배포한 후 몇몇 사용자가 오른쪽에 배치해 달라고 요청했습니다. 아마도 햄버거 메뉴 버튼의 위치가 익숙해서 그랬던 것 같습니다.

4개의 좋아요

수고 많으셨고 업데이트도 감사합니다. :coffee:

혹시 지금은 가능한가요?

1개의 좋아요

안녕하세요 @haydenjames :slight_smile:
이미 해당 내용을 기능 요청으로 이곳에 등록해 두셨습니다.
여러 주제에서 중복으로 게시물을 올릴 필요는 없으므로, Discourse 3.0 is Here! 에서 해당 게시물을 이동했습니다. :slight_smile:

또한, @Lhc_fl 님이 좋은 우회 해결책을 제공해 주셨습니다. :+1:

우회책은 거의 준비되어 있었습니다. 다만 햄버거 아이콘이 오른쪽에서 두 번째로 유지되어야 했고, 오른쪽 가장 첫 번째 위치가 아니어야 했습니다. 하지만 @Lhc_fl 님은 CSS만으로는 이를 달성할 수 없다고 확인해 주셨습니다.

저는 콘텐츠를 왼쪽에, 덜 사용되는 사이드바를 오른쪽에 배치하되, 원래 햄버거 아이콘의 위치를 이동하지 않는 방식을 선호합니다.

수정: 좌우를 자유롭게 선택할 수 있게 하고, 오른쪽 아이콘을 왼쪽과 오른쪽으로 나누지 않도록 하면 더 많은 포럼 운영자가 사이드바를 활성화할 것으로 생각합니다.

현재 사이드바를 활성화하면 메뉴 아이콘이 왼쪽 가장자리와 오른쪽 가장자리로 나뉘고, 포럼 로고가 이동하여 햄버거 아이콘이 포럼 홈 클릭 바로 옆에 위치하게 됩니다.

다음과 같은 형태를 유지하고 싶습니다:
image

동시에 다음과 같은 형태를 갖추는 것입니다:

미래에 이것이 가능할까요… 감사합니다. :handshake:

4개의 좋아요

해당 테마 컴포넌트를 수정하여 햄버거 메뉴의 위치를 조정할 수 있을지도 모릅니다.

1개의 좋아요

정확히 이해하지 못한 것 같습니다. 죄송합니다. 해당 플러그인의 스크린샷은 아이콘을 왼쪽 끝과 오른쪽 끝으로 나누는 새로운 Discourse 방식과 정확히 동일해 보입니다.

그러나 메뉴 토글 햄버거 아이콘이 포럼 홈으로 돌아가기 로고에 너무 가깝게 배치되는 것은 원치 않습니다. 사이드바에서 토글을 사용하고, 사이드바 토글 아이콘이 왼쪽 로고 핫스팟 위치에 있지 않은 상태에서 포럼을 정상적으로 사용하고 싶습니다.

현재 개발자가 구현한 방식대로 메뉴를 OFF로 토글해도 페이지 너비가 이미 좁은 너비로 돌아가기 때문에 어떤 가치나 이점도 없습니다. 이 때문에 대부분의 사용자는 사이드바를 계속 켜고 끄지 않을 것이며, 이는 당연한 일입니다.

설령 그렇게 하더라도, 홈으로 돌아가기 로고 핫스팟 왼쪽에 햄버거 아이콘을 배치하는 것은 (제 생각에) 좋은 위치가 아니며, 상단 메뉴바의 모든 아이콘이 오른쪽에 배치되었던 Discourse의 이전 디자인 원칙에도 어긋납니다. 저는 다음과 같은 방식을 유지하고 싶습니다:
image
…동시에 콘텐츠는 왼쪽에, 사이드바는 오른쪽에 배치하는 것입니다. (위 스크린샷 참조)

답변해 주셔서 감사합니다! 우리가 동일한 변경 사항을 언급하고 있는지 더 잘 이해하기 위해 해당 플러그인에 대해 더 읽어보겠습니다.

1개의 좋아요

제가 말한 것은 @Lhc_fl의 컴포넌트와 함께 패널을 오른쪽으로 이동시키는 것을 의미합니다. 제가 링크한 컴포넌트의 코드를 살펴보면, 검색창과 프로필 사이에 햄버거 메뉴를 다시 배치할 수 있을 것입니다. 이는 Lhc_fl이 만든 현재 우회 작업 방식에 대한 요청과 문제를 제가 정확히 이해하고 있다는 전제 하에 말씀드립니다.

이미 메뉴를 이동시키기 위한 코드를 사용하고 있으므로, 원하는 효과를 달성하기 위해 수정할 수 있는 예시로 코드의 세부 사항이 포함되어 있을 수 있습니다.

모바일에서는 스크린샷이 데스크톱 모드에서 원하는 위치에 있습니다.

경험이 있는 사람이 모바일에서 사용된 코드를 추출하여 데스크톱에 적용할 수 있을 것입니다. 이를 위해 데스크톱에서 모바일 보기로 사이트를 로드하면서 '요소 검사’를 사용하는 방법 중 하나 또는 둘 다 활용할 수 있습니다.

너비에 대해서는 사이트 너비를 변경할 수 있는 새로운 컴포넌트가 있으니, 탐구해 볼 가치가 있을 것입니다.

1개의 좋아요

네, 그렇게 되기를 희망하고 있습니다. 모바일과 데스크톱 메뉴 아이콘에 대해 말씀하신 내용은 정확합니다.

1개의 좋아요