# Discourse Tab Bar for Mobile

**URL:** https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696
**Category:** Theme component
**Created:** [12월 8, 2017, 6:05오후 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696 "2017-12-08T18:05:34Z")
**Posts on this page:** 20
**Page:** 3

<div class="post-metadata">

### Author: ![th21](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/th21/32/211915_2.png) [@th21](https://meta.discourse.org/u/th21)
#### Post date: [1월 28, 2022, 9:03오후 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/135 "2022-01-28T21:03:19Z")

</div>

안녕하세요, 탭 URL에 비 ASCII 문자를 지원하도록 추가하는 PR을 만들었습니다. 메인 브랜치에 병합할 수 있는지 확인해 주시겠어요?

> <https://github.com/OsamaSayegh/discourse-tab-bar-theme/pull/4>
>
> to enable highlight on tab

---

<div class="post-metadata">

### Author: ![Osama](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/osama/32/98013_2.png) [@Osama](https://meta.discourse.org/u/Osama)
#### Post date: [1월 31, 2022, 9:50오전 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/136 "2022-01-31T09:50:48Z")

</div>

네, PR이 병합되었습니다! @th21님 감사합니다!

---

<div class="post-metadata">

### Author: ![th21](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/th21/32/211915_2.png) [@th21](https://meta.discourse.org/u/th21)
#### Post date: [2월 5, 2022, 6:00오전 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/137 "2022-02-05T06:00:58Z")

</div>

병합 가능한지 확실하지 않아서 포크를 만들고, 로그인하지 않은 사용자에게 탭을 표시하기 위한 추가 설정을 추가했습니다.

> **[GitHub - notedboi/discourse-tab-bar-theme](https://github.com/notedboi/discourse-tab-bar-theme)**
>
> Contribute to notedboi/discourse-tab-bar-theme development by creating an account on GitHub.

---

<div class="post-metadata">

### Author: ![MarcP](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/marcp/32/160184_2.png) [@MarcP](https://meta.discourse.org/u/MarcP)
#### Post date: [7월 15, 2022, 5:52오전 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/138 "2022-07-15T05:52:23Z")

</div>

탭 바에 뒤로 가기(BACK) 버튼을 추가할 수 있을까요? 아마도 간단한 자바스크립트 코드나 그런 걸로요. Discourse Hub 앱의 iOS 탭 바에서는 메인 Discourse 선택 페이지로 돌아가는 것을 막고 있습니다.

---

<div class="post-metadata">

### Author: ![miss](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/miss/32/265671_2.png) [@miss](https://meta.discourse.org/u/miss)
#### Post date: [7월 27, 2022, 8:09오전 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/139 "2022-07-27T08:09:03Z")

</div>

@Osama 그들과의 백/포워드를 추가하는 방법에 대한 아이디어가 있으신가요? 감사합니다.

---

<div class="post-metadata">

### Author: ![Osama](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/osama/32/98013_2.png) [@Osama](https://meta.discourse.org/u/Osama)
#### Post date: [7월 27, 2022, 1:06오후 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/140 "2022-07-27T13:06:18Z")

</div>

@miss @MarcP 해당 컴포넌트가 관리자가 각 탭을 커스터마이징할 수 있도록 허용하고 있으므로, 특정 탭을 하드코딩하여 뒤로/앞으로 내비게이션을 수행할 수 없습니다. 따라서 테마 설정을 통해 관리자가 어떤 탭을 뒤로 또는 앞으로 버튼으로 사용할지 결정할 수 있는 방법을 마련해야 합니다. 이는 컴포넌트에 추가되어야 할 새로운 기능이며, 이에 대한 PR을 기꺼이 받아들일 준비가 되어 있습니다. 이 작업에 관심이 있으시다면 시작하기 전에 제게 DM을 보내 주세요.

---

<div class="post-metadata">

### Author: ![th21](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/th21/32/211915_2.png) [@th21](https://meta.discourse.org/u/th21)
#### Post date: [8월 6, 2022, 1:44오전 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/141 "2022-08-06T01:44:16Z")

</div>

안녕하세요, 트리밍되지 않은 URL이 탭 대상 설정과 매칭될 수 있도록 옵션을 추가하는 PR을 하나 더 올렸습니다.

예를 들어, 옵션이 켜져 있을 경우 `/latest?order=created`와 `/latest`는 서로 다른 탭으로 취급되며 클릭 시 아이콘 색상이 변경됩니다.

확인해 주시고 병합이 가능한지 알려주시면 감사하겠습니다. 미리 감사합니다. 😀

> <https://github.com/OsamaSayegh/discourse-tab-bar-theme/pull/5>
>
> Add option to match full url without trimming, use case: /latest?order=created d…o not equal to /latest when the option is on.

---

<div class="post-metadata">

### Author: ![darkpixlz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkpixlz/32/549896_2.png) [@darkpixlz](https://meta.discourse.org/u/darkpixlz)
#### Post date: [8월 16, 2022, 11:49오후 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/143 "2022-08-16T23:49:35Z")

</div>

정말 마음에 들어요!

다만 Discourse Hub UI를 가리고 있는데, 이 부분 수정할 수 있을까요?

---

<div class="post-metadata">

### Author: ![hoangphuctran93](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hoangphuctran93/32/290976_2.png) [@hoangphuctran93](https://meta.discourse.org/u/hoangphuctran93)
#### Post date: [2월 11, 2023, 9:32오전 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/145 "2023-02-11T09:32:27Z")

</div>

안녕하세요, 이 테마 컴포넌트를 제공해 주셔서 감사합니다. 현재 제 웹사이트 [https://businesslab.vn](https://businesslab.vn) 에서 이 컴포넌트를 사용하고 있습니다. 최근 이 테마 컴포넌트 안에 "햄버거 메뉴 토글"과 "현재 사용자 헤더 드롭다운 토글"을 통합하는 아이디어가 떠올랐습니다. 이렇게 하면 헤더의 표시 공간이 더 미니멀해지고, 한 손 조작만으로도 탭 바(귀하의 테마 컴포넌트)로 내비게이션을 수행할 수 있을 것입니다. 이 제안에 관심을 가져 주시기를 바랍니다.  
 ![image](https://global.discourse-cdn.com/meta/original/4X/5/d/5/5d565426c8f6c228ef732c1f96d58b7e2ac03fea.png)  
 ![image](https://global.discourse-cdn.com/meta/original/4X/4/9/6/496ae6387ec5a0a3c25adea9731d32a5788b38a2.png)

---

<div class="post-metadata">

### Author: ![danielabc](https://avatars.discourse-cdn.com/v4/letter/d/b9e5f3/32.png) [@danielabc](https://meta.discourse.org/u/danielabc)
#### Post date: [3월 8, 2023, 10:17오후 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/146 "2023-03-08T22:17:27Z")

</div>

안녕하세요, 이 컴포넌트가 정말 훌륭해요! 만들어주셔서 축하드립니다! 이 컴포넌트가 현재 가장 최신 버전인가요? 아니면 더 현대적인 컴포넌트가 있나요? 저는 이 포럼에 처음 온 사람입니다.

---

<div class="post-metadata">

### Author: ![danielabc](https://avatars.discourse-cdn.com/v4/letter/d/b9e5f3/32.png) [@danielabc](https://meta.discourse.org/u/danielabc)
#### Post date: [3월 8, 2023, 11:17오후 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/147 "2023-03-08T23:17:05Z")

</div>

마지막 버튼에 특정 방식을 적용해서, 사용자가 버튼을 누르면 아이콘 또는 아이콘과 이름이 포함된 다른 버튼들이 나타나도록 해서 다른 옵션을 선택하게 할 수 있는 방법이 있을까요? 더 중요한 옵션들이 있어서 넣어야 했는데, 이런 방식이라면 완벽할 것 같습니다. 예를 들어

[https://i.gyazo.com/5476e059675ad0addce15a5cde0501ff.mp4](https://i.gyazo.com/5476e059675ad0addce15a5cde0501ff.mp4)

즉, 사용자가 아이콘을 클릭하면 클릭할 수 있는 다른 아이콘들이 나타나는 식입니다.

@th21 @osama

---

<div class="post-metadata">

### Author: ![danielabc](https://avatars.discourse-cdn.com/v4/letter/d/b9e5f3/32.png) [@danielabc](https://meta.discourse.org/u/danielabc)
#### Post date: [4월 2, 2023, 10:59오후 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/151 "2023-04-02T22:59:57Z")

</div>

탭바를 고정하려면 어떻게 해야 하나요? 아래로 스크롤하면 사라져서 항상 보이도록 하고 싶습니다!

---

<div class="post-metadata">

### Author: ![Tom\_Eagle](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tom_eagle/32/200481_2.png) [@Tom\_Eagle](https://meta.discourse.org/u/Tom_Eagle)
#### Post date: [4월 15, 2023, 8:05오후 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/152 "2023-04-15T20:05:40Z")

</div>

~~버튼 중 하나를 user-portfolio로 이동하게 하려고 시도했지만 성공하지 못했습니다.~~

~~이게 가능한가요?~~

수정: 해결했습니다…

```plaintext
my/activity/portfolio

```

---

<div class="post-metadata">

### Author: ![cmdntd](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cmdntd/32/192008_2.png) [@cmdntd](https://meta.discourse.org/u/cmdntd)
#### Post date: [5월 26, 2023, 1:16오전 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/153 "2023-05-26T01:16:33Z")

</div>

채팅 상자에서 탭 바가 넘치고 있습니다. 탭 바가 표시된 채로는 채팅을 할 수 없습니다.  
수정해 주실 수 있을까요?

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [6월 27, 2023, 8:49오전 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/154 "2023-06-27T08:49:59Z")

</div>

문제를 확인했습니다. 텍스트 입력 필드가 숨겨집니다.

---

<div class="post-metadata">

### Author: ![th21](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/th21/32/211915_2.png) [@th21](https://meta.discourse.org/u/th21)
#### Post date: [6월 27, 2023, 10:33오후 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/155 "2023-06-27T22:33:05Z")

</div>

빠른 해결책은 채팅 작성창 아래에 여백을 추가하는 것입니다. 매우 아름답지는 않지만, 사용자가 입력 상자를 토글할 수 있어야 합니다.

또한 탭 바의 크기도 조정했으므로, 이 CSS를 사용하려는 경우 탭 바의 원래 높이를 사용해야 합니다(하지만 얼마였는지 기억이 나지 않습니다).

```plaintext
.chat-composer__wrapper {
    margin-bottom: 35px 
}

```

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [6월 28, 2023, 12:35오후 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/156 "2023-06-28T12:35:05Z")

</div>

> [@th21](#):
>
> ```css
> .chat-composer__wrapper {
> margin-bottom: 35px 
> }
> 
> ```

이렇게 하면 동작은 하지만, 아래로 스크롤할 때 빈 공간이 남습니다.

(마진(margin-bottom)이 49px, 즉 탭 바 높이에 맞춰 녹화된 영상):

---

<div class="post-metadata">

### Author: ![th21](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/th21/32/211915_2.png) [@th21](https://meta.discourse.org/u/th21)
#### Post date: [6월 28, 2023, 3:05오후 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/157 "2023-06-28T15:05:41Z")

</div>

네, 말씀드렸듯이 아름답지는 않을 거예요.

---

<div class="post-metadata">

### Author: ![cmdntd](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cmdntd/32/192008_2.png) [@cmdntd](https://meta.discourse.org/u/cmdntd)
#### Post date: [6월 30, 2023, 6:18오후 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/158 "2023-06-30T18:18:31Z")

</div>

margin 대신 z-index를 확인해 보세요.  
(사용자가 채팅 중 탭을 절대 사용하지 않는다고 가정합니다)  
tab-bar의 z-index를 줄이면 더 보기 좋아집니다.

---

<div class="post-metadata">

### Author: ![th21](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/th21/32/211915_2.png) [@th21](https://meta.discourse.org/u/th21)
#### Post date: [6월 30, 2023, 6:31오후 UTC](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696/159 "2023-06-30T18:31:05Z")

</div>

> [@cmdntd](#):
>
> 사용자가 채팅할 때 탭 키를 절대 사용하지 않는다고 가정해 보겠습니다.

그래서 z-index 방식을 사용하지 않았고, 요소들이 겹쳐 보이는 것도 이상해 보입니다. 버그가 있는 것처럼 보이거든요.

[이전 페이지](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696.md?page=2)

[다음 페이지](https://meta.discourse.org/t/discourse-tab-bar-for-mobile/75696.md?page=4)
