Sidebar/Navbar positioning

[matasbern]

Hello,

I'm trying to think of how to place the Navbar next to the sidebar instead of spanning the entire top of the page with it.
Idea is to keep Sidebar darkmode, and navbar to be kept white.
Any ideas how I could achieve this currently?

Many thanks

[crdo]

@matasbern thanks for sponsoring our project.

I have created a quick diff of what i think you want.
I made the changes to the MainLayoutBase.razor - the layout component of the Blocks app.
What you need to do is to somehow tell the Sidebar only, that it needs to switch to the dark variant. To do that, there needs to be the dark-mode data attribute on one of its parents. The style="display: contents;" is a little trick that tells the browser to pretend that the parent div is not there, so it does not affect the flexbox layout of the page.

results to

Let me know if this is what you wanted.

[matasbern]

Hi, thanks for such a fast response @crdo !
The solution you provided worked, except I have a problem with @Body part that doesnt fit within the container. Example:

As you can see, sidebar is white while you would expect it to stay in place while scrolling down the page.

Many thanks

[crdo]

@matasbern what browser do you use? There are some specific styles in the Blocks app could cause such a side effects. I suggest you try to use it in your own repo/use-case.

[crdo]

I tried the solution with removing the Blocks specific styles in Safari and Edge on macOS and it works just fine.

[matasbern]

Hi, It did worked fine on new solution and later on managed to accomodate all this inside my existing project. Thanks you @crdo