Create a public chat room dropdown in navigation

[baris]

I am back with another simple tutorial to add a dropdown into the main navigation for public chats

End result

First we need to create the navigation item in the ACP at /admin/settings/navigation. Create a new custom route with the settings shown below. Make sure dropdown is enabled and you give the element a class of navigation-chats. You can leave the dropdown items empty since we will populate it dynamically. Don't forget to save the navigation settings.

Then go to /admin/appearance/customise#custom-js and add the below custom javascript. This will load the publicRooms and populate the dropdown dynamically.

(async function () {
  if (app.user.uid) {
    const chats = await $.get(`${config.relative_path}/api/user/${app.user.userslug}/chats`);
    const dropdown = $('.navigation-chats .dropdown-menu, .navigation-chats .collapse');    
    chats.publicRooms.forEach((room) => {
      const roomHref = `${config.relative_path}/user/${app.user.userslug}/chats/${room.roomId}`;
      const roomIcon = `<i class="fa ${room.icon}"></i>`;
      dropdown.append(`<li><a class="dropdown-item" href="${roomHref}">${roomIcon} ${room.roomName}</a></li>`); 
    });
  }
})();

That should be it once you save the custom javascript and reload your forum you should see a new navigation item with your public rooms.

[DownPW]

ouaa very cool

Thanks for the trick @baris

I love this kind of stuff

---

EDIT :

Working perfectly on Desktop but seems to not work on Smartphone @baris or did i miss something ?

It's possible to make it work for both (Smartphone an Desktop) ?

[baris]

@DownPW I've updated the instructions in the main post, it should work on both desktop and mobile now. Thanks for reporting.

[DownPW]

Thanks dude @baris

Works great know on Smartphone an Desktop

Love it !