How to organise multiple QPageContainers within a QLayout?

[r03ert0]

I’m coding a “user” page with multiple sub-pages (using routing). There’s a tab with user projects, user settings, etc.

I would like to have a QCard with user information (picture, webpage, etc.) on the left that would stay there all the time (part of User.vue), and the tabs with the content of the project, settings, etc. routes on the right, that would change depending on the tab (Projects.vue, for example).

How can I layout this? Is it even correct to have multiple QPageContainers within a single QLayout? I started to try to use a Flex Grid to organise the unchanging part (QCard) and the Tab contents, but it doesn’t work for the moment…

Thanks in advance!

[r03ert0]

I just did a quick test with a <table> (no shame :D), and it works! So the flexbox should also work with some more dedication:

<table>
<tr>
    <td><q-page-container><q-page>QCard goes here</q-page></q-page-container></td>
    <td><q-page-container><q-page>And router-view goes here</q-page></q-page-container></td>
</tr>
</table>

[s.molinari]

I’ve never done this myself, but the “sticky” QCard for the user information should be in a UserLayout.vue and the page container would have the page load as it should. The pages themselves would needs a “spacer” to fill in where the QCard is, so there is no overlapping. Totally theoretical on my part, but I believe it should work.

Scott

[rstoenescu]

Also, one other way to do it, if QCard content depends on each page: https://v1.quasar-framework.org/layout/page-sticky#Expanded