Same navigation-bar on desktop/mobile

AI-generated summary

The discussion revolves around implementing consistent navigation bars across desktop and mobile versions of a website. satonotdead prefers reusing the desktop navbar on mobile for a uniform look. Don shares a solution involving a theme component and provides a JavaScript code snippet to enable this consistency. Lilly confirms that the solution works successfully.

Continuing the discussion from Use desktop navigation-bar on mobile?:

We don’t like this (bad):

We like consistency, and we are not using all the selectors on the desktop (good) navbar:

navigation-bar

So, reusing this navbar on mobile is fine for us, in order to display latest, categories, and top.

Is that possible without breaking changes?

AI point me here, because there were changes on core in 2024, and making this change is not as easy as before.

Hello :wave:

I have this theme component: Floating Navigation Controls and Desktop Navigation Bar for Mobile, and there have been some requests to make it work again, as it’s currently broken.
Previously, the component used to override the template, but that method no longer works.

However, I hadn’t noticed this in the core code until now :sweat_smile:

If everything works, it’s actually easier to implement now with value transformer than before.

Add this to a theme component JS section in admin:

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  api.registerValueTransformer("navigation-bar-dropdown-mode", ({ value }) => {
    return false;
  });
});

Hopefully works :slight_smile:

this works :slight_smile:

thanks Don!