Difficult to hide the Nav component

[silveltman]

Link to reproduction

Update by @jacobsfletch on 10/19/23:

It is currently difficult to hide the Nav component because of changes made to Payload 2.0 Admin. See below for the results of hiding the Nav through custom CSS alone. Ideally the Nav can be conditionally rendered through the config in some way. At the very least, when navigating to Live Preview, the Nav needs to auto close. Or better yet, expose a new prop on admin configs that allows this to be set on a collection-by-collection basis (until user preferences take over).

To Reproduce

Setup the new 2.0 live preview > change window size to above/below 1440px

Describe the Bug

Above 1440px width:

below 1440px width:

The bugs seems to come from me aplying the following custom css:

.nav, .nav-toggler {
    display: none !important
}

I did this because of this issue: #3496

It might be intended, but to me it does not make sense to have UI styling being dependant on other elements existing yes or no. This prevents easy customization.

Payload Version

2.0

[jacobsfletch]

Hey @silveltman! Thanks for report here. Couple follow ups:

It might be intended, but to me it does not make sense to have UI styling being dependant on other elements existing yes or no. This prevents easy customization.

So "existing" in your case is not quite accurate, you are simply hiding it. The DOM element still exists on the page. This means that in order us to adjust the CSS in the Admin based on the presence of a nav, there's currently no mechanism for us to do that. That adjustment to the CSS was necessary to achieve Admin 2.0.

So this being said, I think the better thing to do in this case is hide the nav via the config. We would have to further support this in code, but it would look something like this:

// payload.config.ts
{
  // ...
  admin: {
    components: {
      Nav: null
    }
  }
}

I just tested this out with: Nav: () => null and it does in fact prevent the nav from rendering, but we would need to support Nav: null and then adjust the various portions of the admin that rely on the existence of the Nav.

What do you think about this?

[jacobsfletch]

It's also possible that we could export the useNav context and hooks, etc. so that you can control the nav this way as well.

[jacobsfletch]

Hey @silveltman just following up here. What exactly is your goal? I wonder if there's another way we can solve this for your use case. Are you trying to automatically close the sidebar when live preview is open? Or are you simply hiding the nav always for all users? Making the nav optional is more involved after taking a second pass.

[silveltman]

Hi @jacobsfletch , this is not something I really need at the moment. I tried to do it because of this "bug" i was facing: #3496

But now you mention it, automatically closing when opening the visual editor would be nice imo. And now we're at it, also decreasing the padding-x on the fields, since all space is valueable when live editing

[jacobsfletch]

Hey @silveltman I think this is totally something we should do. I'm going to take another pass at improving the behavior of the Nav, and possibly look into supporting a conditional Nav through the config. That being said, I think this conversation is better suited as a Discussion marked as a new feature. I'm going to go ahead and convert it now so that we can keep it going.