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

:discourse2: 요약 Header Categories Navbar는 사이트 헤더에 상위 카테고리 링크 메뉴를 추가하는 간단한 컴포넌트이며, 필요할 경우 가로 스크롤 오버플로우 기능이 추가됩니다.
:eyeglasses: 미리보기 Theme Creator에서 미리보기
:hammer_and_wrench: 저장소 https://github.com/discourse/discourse-categories-navbar
:question: 설치 가이드 테마 또는 테마 컴포넌트 설치 방법
:open_book: Discourse 테마 초보자? Discourse 테마 사용 입문가 가이드

이 테마 컴포넌트 설치

기능

이 테마 컴포넌트는 사이트 헤더에 상위 카테고리 링크 메뉴를 추가합니다:

설정

이름 설명
카테고리 드롭다운 숨기기 토픽 목록 내비게이션에서 카테고리 드롭다운을 숨깁니다
모든 브레드크럼 내비게이션 숨기기 토픽 목록 내비게이션에서 모든 브레드크럼을 숨깁니다
토픽 스크롤 시 숨기기 활성화되면 데스크톱에서 토픽 제목이 헤더에 고정될 때 내비게이션이 숨겨집니다

:discourse2: 우리가 호스팅을 제공하나요? 테마 컴포넌트는 Standard, Business, Enterprise 플랜에서 사용 가능합니다.

20개의 좋아요

This is really cool - I love it, Kris! It will combine with the sidebar beautifully, allowing the core cats up top and a short personalised selection on the bar.

I’ve noticed two little UX issues that could really give it a lift if addressed:

UX: Category selection highlight

When on a category list, the correct category has a lovely subtle underline.

However, this doesn’t persist if a Topic or a subcategory is entered.

It would be lovely if it did persist in both of those situations.

UX: scroll / overflow on mobile

There is a nice little fade / subtle arrow visible when there is overflow of the categories on desktop.

Overflow is much more likely on mobile, but on my device (Chrome / Android) these subtle cues are not present - and it isn’t clear that scrolling is possible.

It might also help to have the categories bar a little taller on mobile to make scrolling easier.

6개의 좋아요

Another couple of UX issues on mostly applying to mobile:

Mobile topic breadcrumb clash

In mobile topic views, the breadcrumb navigation clashes with the categories navbar:

Highlighted category not in view

Also, the category selected isn’t scrolled to automatically - this means that it is not apparent that it is selected unless the user scrolls the Navbar. This is vital really.

Desktop only?

I do wonder if it isn’t really ready for mobile yet, and it would be really handy to have a setting to only apply it to desktop (at least for now).

4개의 좋아요

Thanks for the quick feedback! I’ve merged in some updates that should address these.

3개의 좋아요

Brilliant - very happy to give feedback when it is listened to! You’ve had to make quite a few additions to it I note.

I’ll take that as a nice little Christmas :gift: to one another :heart_eyes:.

You’ve fixed this when a Subcategory has been entered - wonderful!

However, it does not apply when a topic is entered - is that deliberate? Personally, I believe that it would make sense if the category stays highlighted while the user is ‘in’ it, which includes the topics and not just the category discovery views.

Also, when I enter another page (such as /admin) the category remains selected. It would be better if no category was selected in this case.

I can see the fade on mobile now, but not an arrow / chevron. If possible this would be super helpful as the fade is pretty damn subtle:

Desktop: image

Mobile: image

Request #1 - UX

Hide the Navbar when scrolling in a topic. It all gets a bit busy!
image

Also, it might be better on desktop to have the Navbar located where the breadcrumb / tags are in that image instead of below them.

Request #2 - Feature

Could you please add a CSS class to each Nav Pill so it would be easy to hide some if needed?

I ask because I have a couple of (private) parent categories which are only parents in order to enable subcategories, and they clutter up the general navigation in an undesirable way.

I’ve hidden these for now using their href, but that is of course pretty dicey!

Request #3 - UX

An option to sort Sidebar Categories alphabetically.

As I’m implementing this, I’ve removed the parent categories from the default sidebar categories list. This means that my users now have just a list of 1-5 subcategories that are relevant to them.

However, they are a bit scrambled and in no logical order as the order on /Categories for subs doesn’t really make sense . It would be very helpful for these subcats to be alphabetic to help this!!

5개의 좋아요

Colors are bit off when selected

  • default light and dark palettes

Ideas?

3개의 좋아요

Thanks for reporting! this should fix it:

https://github.com/discourse/discourse-categories-navbar/pull/2

2개의 좋아요

Works perfectly. Thanks!

2개의 좋아요

Hello! First of all, I would like to note that this is a very useful component of the topic and I want to thank you for the work you have done :raised_hands:
On my instance, this component caused an error, I checked for compatibility with other plugins and theme components and at this point I have not yet found a conflict. Could the component itself be the cause?

Enabling this component distorts the presentation of the content.
Here’s a video:


In order to detect an error, you need to click on any post from the latest posts page /latest, the post will open in standard mode, then you need to go back to the latest posts page.

1개의 좋아요

@Aizada_M - I can’t seem to reproduce this. Is this happening to you when you preview from the component?

2개의 좋아요

Greetings! Sorry for the long response :raised_hands:
I didn’t use the preview, I tested it with the component enabled.

1개의 좋아요

This works 100% of the time when I click on the category name under the topic title.

1개의 좋아요

I’ve noticed that the text in the Head Categories Navbar suddenly changed to font-up-1 (whereas I think it was font-down-1 before). This is quite jarring and unpleasant, as it is the same as all the other nav pills.

I’ve over-ridden it with this CSS, which is much more pleasing:

// fixes text size of header navbar
.custom-categories-navbar .nav-pills>li>a {
    font-size: var(--font-0);
}

I prefer font-0 actually as it is different enough and a bit easier to use.

1개의 좋아요

The core CSS did not change, and the component does not set the font size. :thinking:
Maybe you had custom CSS before?

2개의 좋아요

4 posts were split to a new topic: Broken mobile styling of Header Categories Navbar

Love this TC, thank you! Would be great to customize which items do and do not appear!

3개의 좋아요

I love it but the theme component seems broken in the latest version of discourse

EDIT: it’s works fine, but needed to desactive “chat” and “Dark-Light Toggle” icons in the header

2개의 좋아요

It works for me with chat active :slight_smile:

3개의 좋아요

yes it’s because of my logo. If i cut it a little bit, its works with chat and dark-light toggle. I"m using:

.d-header #site-logo {
max-height: 30px;
}

for now

2개의 좋아요

Hey, i just saw a bug now, you can reproduce like that. On mobile:

1- Click on one category in the header
2 - Click on one post in the category and Scroll at the end
3 - Click on the same category on the header

All the category header will disappear. I just tryed it on my forum and on the demo

EDIT:

it’s the same if you go to a category and refresh( f5) the page. All category will disappear.

EDIT:

Is there any fix for it? Thanks

4개의 좋아요