헤더 카테고리 내비게이션 바

문제가 있습니다. 상단 왼쪽 코너에만 표시되고 전체 너비로 표시되지 않습니다. 전체 너비 및 헤더 검색 테마 구성 요소를 사용하고 있습니다. 플러그인은 설치되어 있지 않습니다.

2개의 좋아요

헤더 카테고리 내비게이션 바와 전체 폭 컴포넌트를 함께 사용했을 때 문제를 재현할 수 있습니다.

3개의 좋아요

전체 폭(full width) 컴포넌트와 함께 이 기능을 작동시키려면 테마에 몇 가지 CSS를 추가해야 합니다…

아래와 같은 코드를 추가하면 더 나은 결과를 얻을 수 있습니다:

html:not(.has-full-page-chat) .custom-categories-navbar {
  grid-column-start: 1;
  grid-column-end: -1;
}

.has-sidebar-page .d-header > .wrap .contents {
  gap: 0 1em;
}
4개의 좋아요

감사합니다, 문제가 해결되었습니다!

또한, 거기에 표시되는 카테고리 정렬 방법이 있는지 궁금합니다.

1개의 좋아요

순서가 카테고리 페이지와 같은 것 같습니다. Reordering categories and setting fixed category positions 링크를 따라가면 변경할 수 있습니다.

3개의 좋아요

다음 문제:

토픽 안에서 카테고리를 클릭하려고 하면 다음과 같은 현상이 발생합니다:

메뉴가 사라집니다.

콘솔 오류:

custom-categories-navbar.js:64 Uncaught (in promise) 
TypeError: Cannot read properties of null (reading 'scrollIntoView')
    at n.setActiveSlug (custom-categories-navbar.js:64:52)
    at new n (custom-categories-navbar.js:48:12)
    at EmberGlimmerComponentManager.createComponent (base-component-manager.js:26:14)
    at EmberGlimmerComponentManager.createComponent (ember-component-manager.js:51:29)
    at M.create (manager.js:543:1)
    at Object.evaluate (runtime.js:2676:1)
    at Object.evaluate (runtime.js:1052:1)
    at It.evaluateSyscall (runtime.js:4204:1)
    at It.evaluateInner (runtime.js:4175:1)
    at It.evaluateOuter (runtime.js:4168:1)
    at Wt.next (runtime.js:4999:1)
    at Wt._execute (runtime.js:4986:1)
    at Wt.execute (runtime.js:4979:1)
    at $t.insertItem (runtime.js:4468:1)
    at $t.sync (runtime.js:4429:1)
    at $t.evaluate (runtime.js:4366:1)
    at Dt._execute (runtime.js:4247:1)
    at Dt.execute (runtime.js:4232:1)
    at qt.rerender (runtime.js:4547:1)
    at hr.render (index.js:4674:1)
    at index.js:4934:1
    at Nt (runtime.js:4080:1)
    at gr._renderRoots (index.js:4916:1)
    at gr._renderRootsTransaction (index.js:4960:1)
    at gr._revalidate (index.js:4992:1)
    at invoke (backburner.js.js:280:1)
    at h.flush (backburner.js.js:197:1)
    at p.flush (backburner.js.js:358:1)
    at B._end (backburner.js.js:798:1)
    at B.end (backburner.js.js:589:1)
    at B._run (backburner.js.js:842:1)
    at B._join (backburner.js.js:819:1)
    at B.join (backburner.js.js:629:1)
    at Array.<anonymous> (index.js:4765:1)
    at B._trigger (backburner.js.js:896:1)
    at B._end (backburner.js.js:811:1)
    at B._boundAutorunEnd (backburner.js.js:523:1)
3개의 좋아요

여기서도 같은 문제가 발생합니다

재현 방법: 카테고리를 클릭한 후 F5 키를 누르세요

5개의 좋아요

이 문제를 수정할 수 있도록 일부 업데이트를 진행했습니다.

5개의 좋아요

수고하셨습니다!

사이드바 정렬 순서를 헤더 카테고리 내비게이션에도 적용할 수 있는 옵션을 추가해 주실 수 있을까요? 이렇게 하면 사용자가 헤더 카테고리 내비게이션에 원하는 정렬 순서를 직접 적용할 수 있게 됩니다.

1개의 좋아요

이 방법은 유용하지만 더 이상 작동하지 않습니다. 대신 다음을 시도해 보세요

html:not(.has-full-page-chat) .d-header:has(.horizontal-overflow-nav) {
    height: 5em !important;
}
2개의 좋아요

첫 번째 게시글의 미리보기 링크에서 “페이지를 찾을 수 없음” 오류 발생

2개의 좋아요

아, 죄송합니다. 지금 다시 시도해 보세요. :+1:

1개의 좋아요

카테고리가 몇 개뿐이라면 로고 옆 헤더에 내비게이션 바를 포함할 수 있을까요?

감사합니다.
올레

도움이 되셨다니 기쁩니다. 감사합니다.

웹사이트에서 내비게이션 바를 가운데로 정렬할 수 있는지 궁금합니다.

로고가 있는 헤더 영역에 내비게이션 바를 포함할 수도 있을까요?

또한 /login과 /signup 페이지에서는 헤더가 없는데도 내비게이션 바가 표시되므로, 이 페이지들에서는 내비게이션 바를 숨길 수 있는지 궁금합니다.

감사합니다.
올레 드림

표시 위치를 헤더 하단으로 변경하는 방법?

이미 헤더의 하단에 있지 않나요? 제가 오해하고 있다면, 포크를 해서 해당 컴포넌트의 플러그인 아웃렛을 변경해 보실 수 있습니다.

<header class="d-header"> 안에 있는 걸 말해요

1개의 좋아요

가장 편안하고 사용하기 좋은 내비게이션 시스템이 얼마 전 업데이트 이후 사라져 버렸어요 :scream:

이 시스템이 다시 돌아올 가능성이 있을까요?

그리고 아니요, 콘솔에 어떤 오류가 표시되는지는 모르겠습니다. 요즘은 아이패드를 사용하고 있기 때문이죠.

수정:

너무 성급하게 행동했네요. 문제가 플러그인 https://github.com/thoka/discourse-reach-and-rights에서 비롯된 것이었습니다.

혼란을 드려 죄송합니다.

1개의 좋아요

하위 카테고리가 존재할 때 메뉴 드롭다운에 이를 표시하는 방법(또는 다른 구성 요소)이 있나요?

홈페이지로 돌아가도 선택된 카테고리가 여전히 하이라이트됨

안녕하세요! 이 컴포넌트를 만들어 주셔서 감사합니다!

카테고리 내비게이션 바나 사이드바를 통해 카테고리를 선택한 후, 포럼 로고를 클릭하여 홈페이지로 돌아가면 내비게이션 바에서 해당 카테고리가 여전히 밑줄(하이라이트)이 쳐진 것을 확인했습니다.

재현 방법:

  1. 내비게이션 바 또는 사이드바를 통해 카테고리를 엽니다.
  2. 내비게이션 바에서 해당 카테고리가 하이라이트되는지 확인합니다.
  3. 홈페이지로 돌아가기 위해 포럼 로고를 클릭합니다.
  4. 이전에 선택했던 카테고리가 여전히 하이라이트 상태입니다.

예상 동작: 홈페이지로 돌아갈 때 어떤 카테고리도 하이라이트되지 않아야 합니다.

custom-categories-navbar.gjs 파일을 살펴보니, 원인은 setActiveSlug() 함수에 있는 것으로 보입니다. 현재 라우트에 카테고리가 있으면 activeSlug를 업데이트하지만, 카테고리가 없는 라우트일 경우 이를 초기화하지 않기 때문입니다.

기존 조건문에 else를 추가하면 이 문제가 해결될까요?

} else {
  this.activeSlug = "";
}

이렇게 하면 홈페이지로 돌아갈 때 활성 카테고리가 초기화되면서, 카테고리 및 하위 카테고리 내부의 기존 하이라이트 동작은 유지됩니다.

감사합니다,
Prof. Caju