How to prevent hide navigation panel while hide ui?

[kobe651jp]

I'm trying to customize the navigation panel by referencing DefaultNavigationPanel.

Everything works fine except when I hide the UI the navigation panel is not visible.

Is there a way to control the display of the navigation panel?

when show ui:

whe hide ui:

[Taha-Hassan-Git]

Hey there, I'm not entirely clear on what the question is, but hopefully something below will help.

If you want to prevent the other UI components from mounting at all then you can hide individual components by returning null inside the components object:
https://tldraw.dev/examples/ui/ui-components-hidden

If you return null on everything except the navigation panel component, then nothing else will be displayed.

However if you want the user to be able to toggle the visibility of everything except the navigation panel, we don't have a great solution for that right now! You can open an issue for it and describe your use case. In the meantime I would recommend using isFocusMode on the editor instance to control the state, and render different components accordingly, but you'll have to look at building your own TldrawUi component.

[kobe651jp]

My use case is in hideUi mode, where I want to hide the entire menu except the navigation panel.
This is because I want to zoom in, zoom out, move the field of view, etc. like Google Maps.

So, it would be very helpful if I could make the navigation visible in hideUi mode.

What does hideUi mode mean?

        <Tldraw
              components={components}
              store={store}
              hideUi={true}
            >

thank you for answering

[Taha-Hassan-Git]

hideUi prevents any UI components from mounting at all. It will not be possible for you to achieve what you're looking for by passing in the hideUi prop.

Instead you can look at hiding individual components like in this example: https://tldraw.dev/examples/ui/ui-components-hidden.