left dirge
I am wondering if it is possible to somehow nest the navbar component without blocking the outer one.
My use-case is that I'm adding documentation to my web app and want to have a fixed navbar on the side for the documentation section. while keeping the main nav there too.
I welcome alternative solutions to getting the same layout (fixed side area with scrollable content to the right) but haven't been able to find a sensible solution yet.
I'm aware I can do something like position={{}} which does get the navbar next to the main nav but I don't see how to layout the content and avoid it going behind the inner navbar.
waxen sparrow
I am wondering if it is possible to somehow nest the navbar component without bl...
You can use AppShell component
https://mantine.dev/core/app-shell
left dirge
Thanks for the suggestion! I I'm afrain AppShell doesn't solve my problem — I am using it for the outer nav already, but I don't see a way to use it effectively to handle per-page subnavigation with an added sidebar. If every page had subnavigation I would happily change my navbar component but because it is a one-off that would make for poorer code.
gaunt cape
do you mean you want something like that?
or do you want after you go inside the page you want to have another links for another pages?
left dirge
Ah yes, sorry for the ambiguity. I mean the second option.
gaunt cape
You can use Grid component to divide your page to 2 sections 1 section will show a subnav which actually multiple buttons or that navigate you to where you want to go. and the second section will show you your page.
left dirge
@coarse moss that is essentially the structure I am after, but I don't want it as part of my main navbar component that I can have just on some pages
@gaunt cape A grid was one of the first things I tried but I couldn't for the life of me get the desired combination of fixed, full-height navbar (first column) and scrollable second column. I'm sure there is a way to do it with a grid and that is quite simple but I haven't figured that out. I'd also like to be quite specific with the width of the nav and so I think the 12pt grid might be too restrictive for that, but I imagine the approach would translate if I can find one.
gaunt cape
you need to place the ScrollArea inside the second Grid.col so the the scolling will only be on the second grid
for the width of the Grid it does not have to be 12
https://codesandbox.io/s/laughing-dhawan-ztvy2c?file=/src/App.tsx
I will fix more and show you
left dirge
Didn't see you can change the column count! that's great
I did setup the columns as they are in that codesandbox, but couldnt find a way to fix the first colum so it didn't scroll
gaunt cape
I did setup the columns as they are in that codesandbox, but couldnt find a way ...
you need to set hieght for the scroll area to make it work
left dirge
Yeah I think I got close to this solution at one point, but couldn't see a way to set height dynamically aside from viewport height (which could work for me for now actually as I have no headers/footers
Do you know if there's any other approach there?
gaunt cape
why do you need to make the height dynamic for the scroll area. The scroll area need a fixed height so it can scroll to the end of the content. otherwise the page it self will get a scroll intead of the insider scroll area that you have set it
coarse moss
