@Coude Thanks a lot, will try it out however my main aim to to when the header hides out, it should do that gracefully. thanks for your input, i’m trying it out now!

Guys Please help, i’m stuck here for hours now.

<template>
<q-layout view=“hHh LpR fff”>
<q-header transition-hide=“fade” reveal elevated class=“bg-pink-10 q-pa-xs text-white animate” height-hint=“98”>
<q-toolbar class=“vertical-middle”>
<q-btn
dense
flat
round
icon=“menu”
class=“lt-md”
@click=“left = !left”
/>

    <q-toolbar-title style="min-height: 150px">
      <q-avatar style="min-height: inherit;font-size: 150px;">
        <img class="top-logo" src="../assets/index.svg" />
      </q-avatar>
    </q-toolbar-title>

    <q-space />
    <div style="min-width: 300px;">
      <q-input
        dark
        placeholder="Search..."
        borderless
        v-model="search"
        color="grey-1"
        type="search"
      >
        <template v-slot:append>
          <q-icon name="search" />
        </template>
      </q-input>
    </div>
    <q-space />
    <div class=" q-gutter-md">
      <q-btn outline class="grey-1 q-pa-xs" label=" Sign In" />
      <q-btn outline class="grey-1 q-pa-xs" label="Sign Up" />
    </div>
    <q-btn
      dense
      flat
      round
      icon="menu"
      class="lt-md"
      @click="right = !right"
    />
  </q-toolbar>

  <q-tabs
    class="gt-sm"
    v-model="tab"
    align="justify"
    narrow-indicator
    :style="{ color: 'whitesmoke' }"
  >
    <q-tab name="women" label="WOMEN" @click="toggle('women')" />
    <q-tab name="men" label="MEN" @click="toggle('men')" />
    <q-tab name="kids" label="KIDS" @click="toggle('kids')" />
    <q-tab name="brands" label="BRANDS" @click="toggle('brands')" />
    <q-tab name="about" label="ABOUT" @click="toggle('about')" />
  </q-tabs>

  <div class="absolute fill-content">
    <q-tab-panels
      v-model="tab"
      animated
      class="bg-grey-4 text-white text-center"
      v-on:scroll.passive="removeTabPanels"
    >
      <q-tab-panel name="women">
        <div class="wrap">
          <tab-links :links="womenNavLinks" />
          <div
            v-for="(post, index) in women.slice(0, 3)"
            v-bind:item="post"
            v-bind:index="index"
            v-bind:key="post.imagePath"
          >
            <card-component
              :imagePath="getImage(post.imagePath)"
              :price="post.price"
              :productName="post.productName"
            />
          </div>
        </div>
      </q-tab-panel>

      <q-tab-panel name="men">
        <div class="wrap">
          <tab-links :links="menNavLinks" />
          <div
            v-for="(post, index) in men.slice(0, 3)"
            v-bind:item="post"
            v-bind:index="index"
            v-bind:key="post.imagePath"
          >
            <card-component
              :imagePath="getImage(post.imagePath)"
              :price="post.price"
              :productName="post.productName"
            />
          </div>
        </div>
      </q-tab-panel>

      <q-tab-panel name="kids">
        <div class="wrap">
          <tab-links :links="kidsNavLinks" />
          <div
            v-for="(post, index) in kids.slice(0, 3)"
            v-bind:item="post"
            v-bind:index="index"
            v-bind:key="post.imagePath"
          >
            <card-component
              :imagePath="getImage(post.imagePath)"
              :price="post.price"
              :productName="post.productName"
            />
          </div>
        </div>
      </q-tab-panel>

      <q-tab-panel name="brands">
        <div class="wrap">
          <tab-links :links="brandsNavLinks" />
          <div
            v-for="(post, index) in getBestBrands"
            v-bind:item="post"
            v-bind:index="index"
            v-bind:key="post.imagePath"
          >
            <card-component
              :imagePath="getImage(post.imagePath)"
              :price="post.price"
              :productName="post.productName"
            />
          </div>
        </div>
      </q-tab-panel>

      <q-tab-panel name="about">
        <div class="wrap">
          <div class="text-h6">Mails</div>
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
        </div>
      </q-tab-panel>
    </q-tab-panels>
  </div>
</q-header>

<q-drawer v-model="left" side="left" class="lt-md" overlay elevated>
  <!-- drawer content -->
</q-drawer>

<q-drawer v-model="right" side="right" class="lt-md" overlay elevated>
  <!-- drawer content -->
</q-drawer>

<q-page-container>
  <router-view />
</q-page-container>

<q-footer elevated class="bg-grey-8 text-white">
  <q-toolbar>
    <q-toolbar-title>
      <q-avatar>
        <img class="top-logo" src="../assets/index.svg" />
      </q-avatar>
      Title
    </q-toolbar-title>
  </q-toolbar>
</q-footer>

</q-layout>
</template>