# Aggiungi il pulsante 'Non risolti' nel menu superiore usando HTML personalizzato

**URL:** https://meta.discourse.org/t/add-unsolved-button-to-top-menu-using-custom-html/59758
**Category:** Development
**Tags:** how-to
**Created:** [23 Marzo 2017, 11:50am UTC](https://meta.discourse.org/t/add-unsolved-button-to-top-menu-using-custom-html/59758 "2017-03-23T11:50:18Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![Chanka\_Dod](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chanka_dod/32/69649_2.png) [@Chanka\_Dod](https://meta.discourse.org/u/Chanka_Dod)
#### Post date: [23 Marzo 2017, 11:50am UTC](https://meta.discourse.org/t/add-unsolved-button-to-top-menu-using-custom-html/59758/1 "2017-03-23T11:50:18Z")

</div>

Hi Folks  
I found [discourse solved plugin](https://meta.discourse.org/t/discourse-solved-accepted-answer-plugin/30155) quite useful in my forum. Then I tried to add an Unsolved button to top menu. Since it was not straight forward I adopted this [solution](https://meta.discourse.org/t/best-way-to-customize-top-menu/35336/3) and altered it a bit.

Check out my changed code

```javascript
<script>
  Discourse.ExternalNavItem = Discourse.NavItem.extend({
    href : function() {
      return this.get('href');
    }.property('href')
  });

  I18n.translations.en.js.filters.unresolved = { title: "Unresolved", help: "Unresolved Topics" };

  Discourse.NavItem.reopenClass({
    buildList : function(category, args) {
      var list = this._super(category, args);
      if(!category) {
        list.push(Discourse.ExternalNavItem.create({href: '/latest?solved=no', name: 'unresolved'}));
      } else {
         list.push(Discourse.ExternalNavItem.create({href: '/c/'+category.slug+'?solved=no', name: 'unresolved'}));
      }
      return list;
    }
  });
</script>

```

I am a newbie here; I hope this will be useful to ppl like me.

Cheers

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [23 Marzo 2017, 11:59am UTC](https://meta.discourse.org/t/add-unsolved-button-to-top-menu-using-custom-html/59758/2 "2017-03-23T11:59:10Z")

</div>

That works great, if you want to only display the buttons on certain categories then you can do some fairly simple logic to check the category name. I also filter out “closed” topics for my “unsolved” button.

This is what I use:

```plaintext
<script>
  Discourse.ExternalNavItem = Discourse.NavItem.extend({
    href : function() {
      return this.get('href');
    }.property('href'),
  });

  I18n.translations.en.js.filters.Completed = { title: "Completed", help: "Topics that have been marked as solved" };
  I18n.translations.en.js.filters.Outstanding = { title: "Outstanding", help: "Topics that are not yet marked as solved" };

  Discourse.NavItem.reopenClass({
    buildList : function(category, args) {
     var list = this._super(category, args);
     if(!category) {
          //Don't display anything
     }else if(category.slug==='support') {
        list.push(Discourse.NavItem.create({href: '/c/support?solved=yes', name: "Completed"}));
        list.push(Discourse.NavItem.create({href: '/c/support?solved=no&status=open', name: "Outstanding"}));
      }else if(category.slug==='jobs') {
        list.push(Discourse.NavItem.create({href: '/c/jobs?solved=yes', name: "Completed"}));
        list.push(Discourse.NavItem.create({href: '/c/jobs?solved=no&status=open', name: "Outstanding"}));
      }
      return list;
    }
  });
</script>

```

---

<div class="post-metadata">

### Author: ![Chanka\_Dod](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chanka_dod/32/69649_2.png) [@Chanka\_Dod](https://meta.discourse.org/u/Chanka_Dod)
#### Post date: [23 Marzo 2017, 12:06pm UTC](https://meta.discourse.org/t/add-unsolved-button-to-top-menu-using-custom-html/59758/3 "2017-03-23T12:06:25Z")

</div>

This is a useful solution I can use. Thanks

---

<div class="post-metadata">

### Author: ![Chanka\_Dod](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chanka_dod/32/69649_2.png) [@Chanka\_Dod](https://meta.discourse.org/u/Chanka_Dod)
#### Post date: [13 Luglio 2017, 6:18am UTC](https://meta.discourse.org/t/add-unsolved-button-to-top-menu-using-custom-html/59758/4 "2017-07-13T06:18:29Z")

</div>

I encountered that this is not working if sub categories are added. Try the following block if you add sub categories.

```plaintext
if(!category) {
        list.push(Discourse.ExternalNavItem.create({href: '/latest?solved=no', name: 'unresolved'}));
      } else { 
          if(!category.parentCategory) {
            list.push(Discourse.ExternalNavItem.create({href: '/c/'+category.slug+'?solved=no', name: 'unresolved'}));
        } else {
            list.push(Discourse.ExternalNavItem.create({href: '/c/'+category.parentCategory.slug+'/'+category.slug+'?solved=no', name: 'unresolved'}));
        }
        
      }

```

Cheers

---

<div class="post-metadata">

### Author: ![Kahi](https://avatars.discourse-cdn.com/v4/letter/k/e47774/32.png) [@Kahi](https://meta.discourse.org/u/Kahi)
#### Post date: [16 Ottobre 2017, 1:58pm UTC](https://meta.discourse.org/t/add-unsolved-button-to-top-menu-using-custom-html/59758/5 "2017-10-16T13:58:28Z")

</div>

> [@david](#):
>
> That works great, if you want to only display the buttons on certain categories then you can do some fairly simple logic to check the category name. I also filter out “closed” topics for my “unsolved” button.
> 
> This is what I use:
> 
> ```plaintext
> <script>
> Discourse.ExternalNavItem = Discourse.NavItem.extend({
> href : function() {
> return this.get('href');
> }.property('href'),
> });
> 
> I18n.translations.en.js.filters.Completed = { title: "Completed", help: "Topics that have been marked as solved" };
> I18n.translations.en.js.filters.Outstanding = { title: "Outstanding", help: "Topics that are not yet marked as solved" };
> 
> Discourse.NavItem.reopenClass({
> buildList : function(category, args) {
> var list = this._super(category, args);
> if(!category) {
> //Don't display anything
> }else if(category.slug==='support') {
> list.push(Discourse.NavItem.create({href: '/c/support?solved=yes', name: "Completed"}));
> list.push(Discourse.NavItem.create({href: '/c/support?solved=no&status=open', name: "Outstanding"}));
> }else if(category.slug==='jobs') {
> list.push(Discourse.NavItem.create({href: '/c/jobs?solved=yes', name: "Completed"}));
> list.push(Discourse.NavItem.create({href: '/c/jobs?solved=no&status=open', name: "Outstanding"}));
> }
> return list;
> }
> });
> </script>
> 
> ```

> [@Chanka\_Dod](#):
>
> I encountered that this is not working if sub categories are added. Try the following block if you add sub categories.
> 
> if(!category) {  
> list.push(Discourse.ExternalNavItem.create({href: ‘/latest?solved=no’, name: ‘unresolved’}));  
> } else {  
> if(!category.parentCategory) {  
> list.push(Discourse.ExternalNavItem.create({href: ‘/c/’+category.slug+‘?solved=no’, name: ‘unresolved’}));  
> } else {  
> list.push(Discourse.ExternalNavItem.create({href: ‘/c/’+category.parentCategory.slug+‘/’+category.slug+‘?solved=no’, name: ‘unresolved’}));  
> }
> 
> ```
> }
> 
> ```
> 
> Cheers

I’m having a little issue with combining those two. What should I have if I want both only a certain particular category and subcategory to show Solved/Unsolved?

---

<div class="post-metadata">

### Author: ![alehandrof](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alehandrof/32/119526_2.png) [@alehandrof](https://meta.discourse.org/u/alehandrof)
#### Post date: [16 Ottobre 2017, 2:02pm UTC](https://meta.discourse.org/t/add-unsolved-button-to-top-menu-using-custom-html/59758/6 "2017-10-16T14:02:36Z")

</div>

It would be great if someone were to post a generic version (without the specific categories) of this as a [theme component](https://meta.discourse.org/t/how-to-develop-custom-themes/60848).

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [16 Ottobre 2017, 2:09pm UTC](https://meta.discourse.org/t/add-unsolved-button-to-top-menu-using-custom-html/59758/7 "2017-10-16T14:09:36Z")

</div>

> [@alehandrof](#):
>
> It would be great if someone were to post a generic version (without the specific categories) of this as a theme component.

A generic version could be made, but for category-specific stuff it needs a small amount of work to be done on the solved plugin first:

> [@Sort by Solved/Unsolved Questions in Category](https://meta.discourse.org/t/sort-by-solved-unsolved-questions-in-category/65153/7):
>
> Agreed. I had a very brief look at adding it in the form of a theme component, but I think it will need some changes in the plugin itself first. I think we need to a Boolean to the category serialiser, as currently there’s no way to know whether a category has “discourse-solved” enabled, its only shipped to the client on a “per-topic” basis. Definitely achievable though slight_smile

---

<div class="post-metadata">

### Author: ![sunjam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sunjam/32/175682_2.png) [@sunjam](https://meta.discourse.org/u/sunjam)
#### Post date: [6 Novembre 2020, 3:58pm UTC](https://meta.discourse.org/t/add-unsolved-button-to-top-menu-using-custom-html/59758/8 "2020-11-06T15:58:56Z")

</div>

Ciao, sto verificando se questo è diventato un componente del tema che non riesco a trovare. Non ho visto nulla di esplicito, ma le istruzioni sopra sembrano valide per aggiungere un pulsante del menu superiore rispettando le sottocategorie, nei test più recenti passati. Grazie!

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [25 Maggio 2024, 11:44am UTC](https://meta.discourse.org/t/add-unsolved-button-to-top-menu-using-custom-html/59758/9 "2024-05-25T11:44:20Z")

</div>



---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [25 Maggio 2024, 11:44am UTC](https://meta.discourse.org/t/add-unsolved-button-to-top-menu-using-custom-html/59758/10 "2024-05-25T11:44:23Z")

</div>