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.

Closes #3827. Closes #5581.

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]

This PR can now be user-tested on https://testing.btcpay.tech/

@pavlenex @dstrukt @ndeet @NicolasDorier @Kukks

[dstrukt]

I've tested this quite a bit, and it's very solid. Awesome job @dennisreimann!

I still think the breadcrumbs, and the variable header pattern/component outlined in the previous comment would really round out this PR and update to its full potential, but it could also be a follow up PR, that I could also help implement, but as mentioned I might need your assistance with setting up a template @dennisreimann.

tACK

[dennisreimann]

@dstrukt In 0f51afc I added breadcrumbs to Invoices, Forms and Roles. You can take it from here and if you want to adjust the breadcrumbs in general, see this commit in the design repo: btcpayserver/btcpayserver-design@828b7ab

[dstrukt]

Updated all of the breadcrumbs I could, found a few issues along the way:

• Opening Manage Plugins expands the Server Settings list and should not

• Couldn't manage to figure out Pull Payments breadcrumbs, looks like the way we pull in the Store ID is a little unique in this view? Not sure.

[dstrukt]

Making changes like this:

[dennisreimann]

@dstrukt Thanks, I fixed the Plugins case and added the breadcrumbs to the pull payment views. Keep on going 👍

[dstrukt]

I'm just pushing through all of the view, and am about to have to go to bed, but documenting the issues I'm having:

• Getting a 404 when attempting to set the 2FA breadcrumb on the Register sub-page, and not 100% sure why

• Similar 404 with Access Tokens
• And the nested Create Token

• And Webhooks

• And the Payout Processors (on-chain / lightning)

all of the breadcrumbs have been added, another sweep on your end might be helpful, but i think i got everything

[dstrukt]

• Getting a 404 when attempting to set the 2FA breadcrumb on the Register sub-page, and not 100% sure why

Fixed all but this one so far.

[dstrukt]

tACK - LGTM!