Conditional/dynamic display of top navbar item

[sreenadh-kred]

I am trying to add signup, login, and logout using pages. So I want to hide the hide signup and login when the user is logged in and show the logout menu.

Currently, the navbar items are defined in docusaurus.config.js. Is there any other method / API to add the navbar item dynamically?

[slorber]

For now, you can't add custom navbar items, but I'd like to support that use-case in the future.
Until we have this feature, you can only swizzle the Navbar and add your own stuff there.

To reduce the code you need to maintain when using swizzle, I'd like to introduce "placeholder/slot components" meant to be swizzled, such as NavbarStart NavbarCenter `NavbarEnd. If you let me see a mockup of your design this is helpful to understand your use-case and design this feature properly (you can use Excalidraw.com for that)

---

If you want to handle login from a Docusaurus site, I'd suggest to swizzle the @theme/Root component to add a React state/Provider here that will hold the "logged in" state of the user, and then consume that state in the Navbar component.
For now, the layout/navbar is unmounted/remounted on every page navigation, so it can't hold state otherwise that state would be reset. If you need to do a request to check authentication status, it needs to be done at the very top of the tree where it's possible to preserve the fetched state.

[Siemienik]

Probably it isn't a response directly to the question, however, You could add just a button "Account" and then on the target page handle if the login form or the account page is displayed.

[markcarroll]

I am trying to do the same thing. Having a Sign In/Out button seems like a very common scenario. It is frustrating we have to resort to a hack for this since the rest of the nav config is so elegant. Do you have any different suggestions on how to do this?

My current scenario is that there are some pages on the doc site that show user related stuff (API keys etc), so I create a new page and inside the page I have a Layout tag and then within that put an Amplify UI Authenticator element containing the page content. There is no way to insert this element into the Nav as fas as I can tell without having to rewrite a large chuck of the Navbar functionality.

[wade-liwei]

how's going with the feature?

[slorber]

Feature is tracked here: #7227

A workaround is available until we provide first-class support