before remake add chat window

src/pages/ProjectsPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <pn-page-template>
+  <pn-page-template @updateScrollPosition="onScroll">
     <template #title>
       <div class="q-pr-md ellipsis">
         {{ $t('projects__title') }}
@@ -18,10 +18,12 @@
     </template>
     <template #card-header>
       <pn-action-bar
+        v-if="projects.length !== 0"
         v-model="searchProject"
         placeholder="projects__search"
         :show-calendar-btn="false"
         :show-filter-btn="false"
+        :shadows="isScrolled"
       />
     </template>
     
@@ -60,7 +62,7 @@
                 >
                 {{ item.description }}
               </q-item-label>
-              <q-item-label lines="1" class="text-caption text-grey">
+              <q-item-label lines="1" caption>
                 <div class="flex items-center">           
                   <div class="flex items-center">
                     <q-icon name="mdi-chat-outline"/>
@@ -169,13 +171,17 @@
         appear
         enter-active-class="animated zoomIn"
         >
-        <pn-glass-btn type="fab" color="primary">
-        <q-btn
-          fab 
-          icon="add"
-          color="transparent"
-          @click="createNewProject"
-        />
+        <pn-glass-btn
+          type="fab"
+          color="primary"
+          >
+          <q-btn
+            @click="createNewProject"
+            fab unelevated
+            class="shadow-t"
+            icon="add"
+            color="transparent"
+          />
         </pn-glass-btn>
       </transition>
     </template>
@@ -314,6 +320,10 @@
     }
   }
 
+  const isScrolled = ref(false)
+  const onScroll = (pos: number) => {
+    isScrolled.value = pos > 1
+  }
 </script>
 
 <style scoped>