여러분 안녕하세요. 모바일 기기에서 햄버거 패널이 화면 오른쪽에서 왼쪽으로 슬라이드 아웃되도록 설정하려고 합니다. 프로필 패널이 설정된 방식과 정확히 동일하게요. 햄버거 패널에 특화된 left: 0 규칙이 존재하는 것을 확인했습니다. CSS를 계속 조정해 보았지만, 프로필 패널의 왼쪽 슬라이드 동작을 재현하지 못했습니다. 햄버거 패널에 특화된 CSS가 그렇게 많지 않아서, 제가 정확히 무엇을 놓치고 있는지 모르겠습니다.
여기서 제가 놓치고 있는 부분이 무엇인지에 대한 팁이나 조언을 주시면 감사하겠습니다. 감사합니다.
여기에는 많은 CSS가 관여하지 않습니다. 애니메이션은 CSS로 처리되지만, 사용자가 오른쪽이나 왼쪽으로 스크롤/팬하여 메뉴를 닫는 경우를 처리하기 위해 오프셋 값은 JavaScript로 설정됩니다.
대부분의 로직은 여기 있습니다 - 이것은 하나의 메서드일 뿐이며, 해당 파일에는 관련 로직이 몇 가지 더 있습니다.
또한 사용자가 어두워진 배경을 클릭하여 메뉴를 닫는 경우를 처리하는 로직도 있습니다.
사용자 메뉴의 경우
햄버거 메뉴의 경우
햄버거 메뉴가 오른쪽으로 열리고 닫히도록 변경하려면 두 가지 작업이 필요합니다.
site-header 컴포넌트를 ModifyClass를 사용하여 수정하여 모든 메뉴가 오른쪽에서 열리도록 합니다. 현재는 메뉴에 클래스가 있는지 확인하므로, 다음과 같이 단순히 오버라이드하면 됩니다.
api.modifyClass("component:site-header", {
pluginId: "right-side-mobile-hamburger",
_leftMenuClass() {
// 왼쪽 메뉴는 원하지 않으므로 false를 반환합니다
return false;
}
});
메뉴를 닫을 때에도 오른쪽으로 닫히도록 해야 합니다. 스크롤/팬 이벤트의 경우, 위 스니펫으로 이미 처리됩니다. 이제 사용자가 어두워진 배경을 클릭하는 경우를 수정해야 합니다. Discourse는 사이트가 RTL 언어를 사용하는지 여부에 따라 이를 결정합니다. 이를 수정하려면 햄버거 패널이 위젯이므로 다른 plugin-api 메서드가 필요합니다.
api.reopenWidget("hamburger-menu", {
clickOutsideMobile() {
// 코어에서 가져온 코드를 적용합니다
this._super(...arguments);
// 그런 다음 오른쪽으로 닫히도록 변경 사항을 적용합니다
const panel = document.querySelector(".menu-panel");
const windowWidth = document.body.offsetWidth;
panel.style.setProperty("--offset", `${windowWidth}px`);
}
});
그 다음 해당 메뉴의 기본 스타일을 오버라이드하기 위해 몇 줄의 CSS를 추가하기만 하면 됩니다.
