UI: Move section navigation to sidebar

[dennisreimann]

Proof of concept for the new sidebar structure, including the active section navigation. As discussed in yesterday's design meeting — this changes the navigation for the Store Settings and Server Settings, so that we can discuss it.

I think it works very well, we'd onlty need to ensure that plugins also update/migrate.

Desktop

Mobile

[dstrukt]

So fast!

So I think most of the functionality has been covered, but just running through it myself, and on this PR for posterity and testing:

1

• The sub-navigation (assuming the parent has any sub-nav items) should not be active if the parent Wallet, Settings, etc.. is not active:

2

• Clicking on the parent Settings will land you on the first item in the sub-navigation list:
• Which will allow us to keep the main CTA(s) consistent at the top right:

3

• Then you navigate to one of the subpages, and the same main CTA is in the top right corner:

4

• Then you navigate a page deeper, with the CTAs still in the right, just a few more / different:
• The only additional consideration here is do we keep the parent item active as well (colors in the sidebar), or just the current page?

5

• One thing to note is the padding/margins, if no sub-navigation, the margin below is only 24px or 32px (the height of the header is 152px for example). If sub-navigation exists, the margin below is 16px to ensure a little bit of spacing, if nothing additional is added. We could ensure that everything has a default margin below this case if we also bump it up to 24px (the height of the header then being 182px). The only thing to consider here is scrolling, these top sections should stay fixed, like our other views to ensure consistency. I believe you'll notice these details and adjust once implemented:

Finally, I'm not sure we'll want to do this for all the pages this could apply to, as this PR would become quite large, but it could be added to a section at a time (plugins, wallet, etc..) if we find we like the updated navigation structure!

Can also add that it closes, assuming we do all views:
#3827
#5581

[dennisreimann]

Thanks for the detailed feedback! Yes, all of these are valid and open points.

Wanted to provide it to get a better feel for this as a potential approach — there are indeed lots of details to work on of we go for it and I'd rather do it once my other PRs are done, because it would most likely resuot in larger conflicts if we do them alongside each other.

So think of this in its current form more like something that'll help us evaluate this approach. I for one like the result and would +1 it.

[pavlenex]

Tried to build but got this.

[dennisreimann]

@pavlenex try a dotnet clean && dotnet restore and then do another build. This looks like there's something cached and I changed those methods.

[pavlenex]

dotnet clean && dotnet restore

Yeah tried that multiple times, nuked everything volumes, and even folders and images, but will give it another try.

Edit: hm something is wrong with this PR, let's see if others can build it I can't on Ryder.

[dstrukt]

Will try to build it either tomorrow or Monday morning and see I run into the same errors. I've also been having trouble with some builds, dependencies, etc...

[dennisreimann]

Something is broken, CI is failing too. Will fix.

[dennisreimann]

4. The only additional consideration here is do we keep the parent item active as well (colors in the sidebar), or just the current page?

I'd say only the current page — if we want to be fancy, we could also highlight the icon of the active section, but not it's associated main page name.

Finally, I'm not sure we'll want to do this for all the pages this could apply to, as this PR would become quite large, but it could be added to a section at a time (plugins, wallet, etc..) if we find we like the updated navigation structure!

Yes, if we tackle everything (moving CTA's etc.) this will be a larger undertaking. Let's settle on the approach while we wait for the other open PRs to be finished, as this will touch many views and tests.

[dstrukt]

I'd say only the current page — if we want to be fancy, we could also highlight the icon of the active section, but not it's associated main page name.

Let's keep it the way it is then!

Yes, if we tackle everything (moving CTA's etc.) this will be a larger undertaking. Let's settle on the approach while we wait for the other open PRs to be finished, as this will touch many views and tests.

Maybe we just tackle the Store Settings first in a single PR, and see how it feels for a whole section.

[dennisreimann]

Given the extend of the changes I think it would be worthwhile to do this combined with #5581 once most of the other PRs are done. While this is on hold we can decide on the details.

[pavlenex]

Gave it a quick try, must say it's growning on me, a lot of user-testing and some of the cleanups wrt settings naming should be done. Can't say for sure if this is the way to go, but the more I used it, the more I liked it, looking forward to what the team things, and then we should do some user-tetsting with community.

Approach ack.

[dennisreimann]

Rebased and added the account pages. Now all pages with subnavigation are working and we can get to the details once we decide this is something for v2.0

[dennisreimann]

Decision from the design meeting: Deploy a test version, gather feedback and consensus from team members and afterwards ask testers for additional feedback.

[dennisreimann]

@dstrukt I think I changed most of it — can you give it another look and see if I missed pages or details?

[dstrukt]

Will take a look today when the branch is deployed (thank you @ndeet)!

[dennisreimann]

It's not deployed yet, we'll figure that out next week.

[dstrukt]

Have been testing the deployed branch, overall this is a very solid change and improvement imo!

There are definitely things that could be improved (and it should be highlighted this isn't the final form when sharing):

adding the breadcrumbs to the sub-pages on the create views, etc.. to help the user keep track of where they are (when navigating 2-3 level deep sub-pages)

or more minor, but nice QOL upgrades i.e. keep the scroll position on the left sidebar for the Server Settings or Account, but given we have to refresh, vs. a PWA type reload, it's probably not possible.

the Account menu is a little inconsistent now as well, and makes me think for both Server Settings / Account, we could mirror the functionality of the Store Settings, in that the default page is the general page, and everything else is more specific

anyway, just some quick thoughts, still thinking over more as i click through it

[dennisreimann]

adding the breadcrumbs to the sub-pages on the create views, etc.. to help the user keep track of where they are (when navigating 2-3 level deep sub-pages)

Can you take care of this?

or more minor, but nice QOL upgrades i.e. keep the scroll position on the left sidebar for the Server Settings or Account, but given we have to refresh, vs. a PWA type reload, it's probably not possible.

Done in a0232f2.

the Account menu is a little inconsistent now as well, and makes me think for both Server Settings / Account, we could mirror the functionality of the Store Settings, in that the default page is the general page, and everything else is more specific

• I think for Account it works, as it lands on the Update Account page. Which page should it be otherwise?
• Server Settings: The closest I can think of is the Policies page. Right now we land on the Users page ­— whall I change this to be Policies or something else?

[dstrukt]

Can you take care of this?

I'm confident with a basic template/example, I could carry it across multiple views - but without, I can certainly try!

• I think for Account it works, as it lands on the Update Account page. Which page should it be otherwise?

Landing page is correct, I just mean the little modal we currently pop-up is a little different than the others (which works perfectly fine), but similar to SS, it would be out of scope, but probably something worth making consistent in future updates.

• Server Settings: The closest I can think of is the Policies page. Right now we land on the Users page ­— whall I change this to be Policies or something else?

Good point, I think in the future rolling details about the Server / BTCPay version, etc.. maybe combing Policies, etc.. could be the way to go, but out of scope, so what we're doing currently is sufficient!

Still poking around on the deployed branch!