F NAV - 모바일 내비게이션 탭

:information_source: 요약 F NAV - 모바일 내비게이션 탭
:eyeglasses: 미리보기 Theme Creator
:hammer_and_wrench: 저장소 GitHub - VaperinaDEV/f-nav-for-mobile: F NAV - Mobile Navigation Tabs · GitHub
:heart: 도움이 되셨나요? > ./support --coffee
:question: 설치 가이드 테마 또는 테마 컴포넌트 설치 방법
:open_book: Discourse 테마가 처음이신가요? Discourse 테마 사용 입문 가이드

이 테마 컴포넌트를 설치하세요

안녕하세요 :wave:

이전에 이를 테마 컴포넌트 컨셉으로 Development 토픽을 생성했으며, 이제 Customization > Theme component 상태가 되었습니다.

:warning: 실제 사용 전에 반드시 테스트해 주세요.

이 컴포넌트에 대한 일부 정보: F NAV - Theme component concept


테마 컴포넌트 소개. 모바일용 Discourse 탭 바를 더 동적으로 만들고, 예를 들어 알림 등을 처리할 수 있는 기능을 추가하면 좋겠다는 게시물을 많이 읽었습니다. F-NAV는 이를 수행할 수 있으며 더 많은 기능을 제공합니다…

헤더

햄버거 메뉴, 사용자 메뉴, 검색 및 채팅을 숨기고, 기본 사용자 메뉴 프로필 탭 내용을 포함하는 프로필(아바타) 메뉴 버튼을 추가합니다.

설정

로그아웃 항목 앞에 사용자 정의 항목을 추가할 수 있는 설정도 포함하고 있습니다.
사용자 정의 항목을 쉽게 추가할 수 있는 세 개의 필드가 포함되어 있습니다.

F NAV에 해당 탭을 배치하지 않으려는 경우 헤더에 표시되도록 하는 데 유용한 기본 헤더 아이콘 표시/숨김 설정이 있습니다.

탭에 다양한 기능을 연결할 수 있습니다. 이러한 기능은 각 탭이 동적으로 변경되도록 허용합니다.

Screenshot 2024-12-13 at 13.06.14

이러한 변경 사항은 다음과 같습니다:

기능

home

  • 토픽 경로에서 홈 탭 아이콘을 왼쪽 화살표로 전환하여 뒤로 가기 기능을 추가합니다
    Screenshot 2024-12-13 at 12.29.33
  • 새 토픽 또는 읽지 않은 토픽 표시 점(dot)을 추가합니다
    Screenshot 2024-12-13 at 12.30.52

hamburger (햄버거 메뉴를 엽니다)


multi

multi tab

채팅이 비활성화되었거나 사용자가 사용자 설정에서 꺼둔 경우 멀티 탭은 자동으로 메시지 탭으로 변경됩니다.

알림 버블은 긴급한지에 따라 변경됩니다.

멀티 탭의 긴급 알림은 녹색이며 다음과 같이 보입니다. :arrow_down_small:


확장됨

개인 메시지는 항상 녹색이지만, 예를 들어 읽지 않은 채널 메시지 알림과 같이 원래처럼 채팅은 파란색일 수 있습니다.

확장됨

단일 알림


message

  • 알림과 함께 메시지 버튼을 추가하고, 클릭하면 빠른 확인을 위해 메시지 모달을 엽니다

chat

  • 그 기능과 함께 채팅 버튼을 추가합니다

notificationToRoute

  • 방해 금지가 활성화되면 벨 아이콘이 벨-슬래시 아이콘으로 변경되고 방해 금지 종료 시간이 표시됩니다
    Screenshot 2024-12-13 at 13.02.35

  • 알림 메뉴를 우회하여 프로필 알림 페이지로 리디렉션합니다

    • 알림이 있으면 /notifications?filter=unread로 리디렉션합니다
    • 알림이 없으면 /notifications로 리디렉션합니다
    • 검토 가능한 콘텐츠가 있으면 빨간 깃발이 표시되고 /review로 리디렉션합니다

notificationMenu

  • 방해 금지가 활성화되면 벨 아이콘이 벨-슬래시 아이콘으로 변경되고 방해 금지 종료 시간이 표시됩니다
    Screenshot 2024-12-13 at 13.02.35

  • 알림 메뉴를 엽니다


search

  • 컨텍스트 기반 /search 페이지로 리디렉션합니다

설정

설정을 가능한 한 간단하게 만들려고 노력했습니다.
네 개의 필드가 포함됩니다.

  • name: 이는 설정에서 탭을 더 쉽게 식별하기 위한 것입니다.
  • icon: 탭에 아이콘을 추가합니다. 참고: 기능을 선택한 경우 이 설정으로 오버라이드할 수 없는 아이콘이 있을 수 있습니다.
  • destination: 사용자 정의 탭에 목적지를 추가합니다. 참고: 목적지를 처리하는 기능을 선택한 경우 이를 비워 둘 수 있습니다. 이 컴포넌트는 /my/... 목적지를 자동으로 /u/username/...로 변환하여 탭의 활성 상태가 올바르게 추가되도록 합니다.
  • function: 탭에 기능을 선택합니다.

관리자는 단순히 탭을 생성/제거/변경하고 기능 중 하나를 선택하거나 탭에 사용자 정의 목적지를 추가할 수 있습니다.
기능 :arrow_down_small:

예를 들어, 토픽 생성 탭을 추가하는 것은 다음과 같이 간단해 보입니다.


Screenshot 2024-12-12 at 18.55.50


크레딧: 모바일용 Discourse 탭 바F NAV - 테마 컴포넌트 컨셉 토픽에서 피드백을 주신 모든 분께 감사합니다. :heart:

22개의 좋아요

This is awesome and legit should be the default behavior and will save my thumb from trying to reach too often the far top screen of my :mobile_phone:.

I’m not a fan of the prominent “online” toggle as I think most people don’t need to change this setting often, I guess most users choose to opt-out of their online presence once and for all so not sure of the constant reminder that this option exists.

You’ve apparently made lot of very useful navigation modification theme components. I’d like to use some, but how much do you see yourself maintaining all of this in the long run? I tend very much to use only official theme components to ensure reliability.

I didn’t see the original tab bar official theme component, so I’ll have a look at it.

7개의 좋아요

Thanks for the component @don I’ve been here for a long time you’re really doing great work.

3개의 좋아요

This should be a bug

2개의 좋아요

Ah thanks, this is FKB theme related. I’ll update the theme.

3개의 좋아요

Here is the fix: Compatibility: Adds support for F NAV theme component by VaperinaDEV · Pull Request #51 · VaperinaDEV/fkb-pro-theme · GitHub
Please update the FKB theme and enable this new setting.
Screenshot 2024-12-14 at 9.17.02

3개의 좋아요

Hello @don, how can I use fa-regular icons like in the picture? I did some research and couldn’t find any information on how to do it after switching to Fontawesome 6.

3개의 좋아요

Hello :waving_hand: It should work with far-bell. I had plans to make it regular to solid when tab is active, I’ll check this but if I remember correctly the house icon only have solid in free version. :thinking:

1개의 좋아요

Thanks, I solved my problem. @Don

1개의 좋아요

The home icon, that changes to back button when open a topic. Why, we can use swaiping for that (like when returning to home screen of the Hub :smirking_face:). My users were complaining quite lot about that, because know they have to reach logo for that (1st world problem, I know :joy:)

2개의 좋아요

I think we can add it to a function I am just thinking of where to place this. This can be a single tab and you can add it the navigation which only shows in DiscourseHub.

1개의 좋아요

Actually DiscourseHub works just fine with swiping down. I just didn’t know that.

That question of home/back button is bigger because I have to explain it to others.

3개의 좋아요

The back button is only activate in topics to makes the back navigation easier between topics. It’s from the home function which you can turn off and then this will keep the home destination.

The settings cannot be reorder yet and if you have an existed selection you cannot clear it but I add a new function none which will be the same behaviour like you leave the function field empty. This way you don’t have to recreate the whole navigation tabs.

This is how it should be if you want to disable the back button and keep the home everywhere.

https://github.com/VaperinaDEV/f-nav-for-mobile/commit/d1e94a0f7dec92437c34bfa70122e18e68906edb

3개의 좋아요

Fantastic as always. I have to agree from the quick preview on theme creator. This really should be package in core with a toggle for classic mobile and Improved Mobile.

I can see this opening things like longer banner site logo. Cleaner option for extras in the header like local selector and more. Very very nice as always Don!

3개의 좋아요

The Pencil Icon and the nav topics are collapsing with the nav bar.

1개의 좋아요
4개의 좋아요

Hi Don. Thank you for your awesome work. I like it.
I have a question. After I click on the Hamburger or Notification, sometimes I don’t need to take any further actions. At this time, I need to go back to the article list. However, I can only close the Hamburger or Notification by clicking on the blank page. This may lead to accidentally clicking on the avatar or reply.

To give another simple example, when I am on the chat page and need to go back to the home page, I have to click the back button in the upper left corner, which is actually not user-friendly on mobile devices.

So, is it possible to keep the menu bar always at the top?

I hope my description can be understood.

2개의 좋아요

Hi Max :wave:

Can you make some screenshot / screen record about the issue?

On /chat we hide the navigation and use the default chat header. I am not sure that worth to display the nav on chat because that can cause issues on different browsers maybe but I will check this.

1개의 좋아요

Hi Don :smiley:
Thank you for your reply.
Please refer to the screenshots below. The first two screenshots mean that when I want to close the Hamburger or Notification, I can only click on the yellow area. The problem is that it’s easy to accidentally click on the article or avatar.

The third screenshot means that I have to click the back button in the upper left corner to leave the chat interface.



1개의 좋아요

Thanks for the clarification :blush:

Yeah, I see. The issue happens here is not the component but a core issue when you have enabled the reduce motion setting on your device. Is that enabled on your device?

When the reduce motion is turned off. The header-cloak (dark area behind the menu) is blocking the click action.

When I enable it on my device, it won’t block the user click.

If this is the case, you can safely close the menus with swipe gestures too.

I think I have a topic about this issue somewhere :thinking:

That is the default chat header.

I will check if we can enable the nav there too.

3개의 좋아요