Questions about layout

[helpmelearn]

Just trying to figure out how the Layout Component works.

1. I still don’t get the view code. hhr lpr llh
   For the most part I have it how I want, but the right side bar seems to pass through the header when I open and close it. (Side bar is blow the header).
   Not sure how to fix that.

2. How do I have the side bar start closed.

3. I can’t figure out how to load a menu page into the main view area. I tried setting up some routes /test/main that does take me to the page, but no menu at the top.

[helpmelearn]

I think I solved one part. In the document it said :
“If your layout uses Vue Router sub-routes (recommended), then it makes sense to use Vue’s <router-view> component, which is just a placeholder where sub-routes are injected.”

I thought sub routes was /test and test/sub-route-page.
But that doesn’t seem to be the case, sub-routes = children pages
https://router.vuejs.org/en/essentials/nested-routes.html
I can’t figure out why the child page has a scroll bar.

[benoitranque]

regarding the view code:

// split your screen in 9 pieces

X   X   X
X   X   X
X   X   X

// the center is the page content


X   X   X
X   p   X
X   X   X

// top is header, bottom is footer


X   h   X
X   p   X
X   f   X

// left and right drawers


X   h   X
l   p   r
X   f   X

// who gets the corners?
// in this case both top corners go to header, bottom corners to respective drawer

h    h   h
l    p   r
l    f   r

// finally scrolling. using an upper case letter will
// for header/footer make them non scrolling. They will be fixed while page content scrolls
// drawers: they get their own scroll, not shared with page scroll

// I want my header fixed to the top, and both drawers to have their own scroll. 
// My footer should stay at the bottom, and only appear once the whole page has been scrolled down

// result

H  H  H
L  p  R
L  f  R

// finally place those in one line, slicing the block horizontally:

view="HHH LpR LfR"

// I hope this helps

```

[kosirm]

Thanks @benoitranque this should be linked in documentation. Finally simple and understandable explanation of the view property!

[metalsadman]

@kosirm it’s explained here https://quasar.dev/layout/layout#Understanding-the-“view”-prop furthermore, you can test (interactively) how it would look like thru the layout builder https://quasar.dev/layout-builder 2nd step.

[kosirm]

Thanks @metalsadman yes i know i read that … but @benoitranque explainded it better for my taste