How to create sticky header on page?

[Gnopps]

I’ve got a qpage inside a qlayout. On this qpage I’d like to have a sticky menu that covers the width of the qpage. I can do this with a qtoolbar, but I haven’t figured out how to make it sticky. If I use qpagesticky then it just becomes overlaid over the content and what I’m looking for is reducing the qpage size.

So question is, how do I create the green element C in the example below?

I’ve been searching here about making qtoolbar sticky or nesting layouts, but haven’t been able to figure out how to accomplish this yet. Any ideas here?

[s.molinari]

Does this do what you are looking for?

https://quasar.dev/layout/page-sticky#Example--Expanded

Scott

[Gnopps]

Thanks for your idea! I tried it before but didn’t add padding. Now when I added padding for the content, it worked.

However, expanded page-sticky doesn’t work with qsplitter, it expands over the split area. (i.e. into both ther before and after slots of qplitter). Any ideas on how that could be solved?

[s.molinari]

What is it that you are trying to “lay out”?

Scott

[Gnopps]

I’m trying to make the border between C/D and B draggable and am experiementing with qsplitter instead of qdrawer. It seems to be working except for this toolbar issue. However I managed to “solve” it in a hacky way, where the width of the qsticky is computed to be the same as the qsplitter-value. There ought to be a more elegant solution though:

<q-splitter v-model="splitterModel" :limits="[50, 100]">
   <template v-slot:before>
     <pageComponent/>
     <q-page-sticky expand position="top" :style="toolBarWidth">
       <q-toolbar class="bg-accent text-white">
         <q-toolbar-title>Page Title</q-toolbar-title>
       </q-toolbar>
     </q-page-sticky>
   </template>
   <template v-slot:after>
     <sidebarComponent />
   </template>
 </q-splitter>
</div>
</template>


<script>
export default {
computed: {
 toolBarWidth() {
   return "width:" + this.splitterModel + "%";
 }
},
data() {
 return {
   splitterModel: 75
 };
}

[s.molinari]

I would have thought 100% width for the sticky header would have worked.

Scott