[Workaround Found] Is there a way to lock the first q-tab?

[Q-Brad]

Hi all,

I was wondering if there was a way to lock a q-tab into the first position? Or just the first q-tab? My current solution is to have two q-tabs strips next to each other, therefore, “search” is in the first q-tabs strip, and everything else is in the right-hand tabs strip. Here are the thoughts behind all this:

1. I don’t want the “search” tab to just be a button as I have it linked to my router as a q-route-tab. When it is selected it gets highlighted just like any other tab.
2. I want to always be able to have the search tab available, even if the right-hand tabs scroll horizontally.
3. The top image shows that the tab strips don’t seem to be the same height - but this can be an optical illusion and my eyes are messed up. For some reason it doesn’t look right.
4. By having 2 tab strips side-by-side I notice that the shadow-2 from the two strips are overlapping. I want to keep the shadow below the strips - I just don’t want them to overlap side-by-side.

Hence the question agian - Is there some way to lock a tab into place?

[Q-Brad]

I figured out a nice solution:

I wrapped the two tab strips in a toolbar and just set some toolbar properties, and done. Nice.

<q-toolbar class="shadow-2" style="padding: 0; min-height: 0px; display: inherit;">
	<q-tabs class="sr-tabs" dense align="left" inline-label indicator-color="primary" no-caps style="float:left">
		<q-route-tab name="search" icon="search" label="Search" to="/candidates/search" />
	</q-tabs>
	<q-tabs dense align="left" v-model="tab" inline-label indicator-color="primary" no-caps>
		<q-route-tab icon="mail" to="/candidates/mail" exact />
		<q-tab name="alarms" icon="alarm" label="Alarms" />
		<q-tab name="movies" icon="movie" label="Movies" />
		<q-tab name="photos" icon="photo" label="Photos" />
		<q-tab name="videos" icon="slow_motion_video" label="Videos" />
	</q-tabs>
</q-toolbar>

It looks much better now: