styles changes

src/App.vue

@@ -5,7 +5,7 @@ import NavBar from '@/components/Navbar/NavBar.vue'
 <template>
   <NavBar />
 
-  <n-grid responsive="screen" item-responsive cols="24" :x-gap="16" :y-gap="16">
+  <n-grid responsive="screen" item-responsive cols="24" :x-gap="16" :y-gap="16" class="shift">
     <n-gi span="xs:1 s:1 m:2 l:2 xl:3 xxl:3" />
 
     <n-gi span="xs:22 s:22 m:20 l:20 xl:18 xxl:18">
@@ -16,4 +16,8 @@ import NavBar from '@/components/Navbar/NavBar.vue'
   </n-grid>
 </template>
 
-<style scoped></style>
+<style scoped>
+.shift{
+  padding-top: 10px;
+}
+</style>

src/components/Navbar/NavBar.vue

@@ -12,10 +12,6 @@ const showMobileMenu = ref(false)
 const route = useRoute()
 const activeKey = ref('collection')
 
-// watch(() => authStore.isAuthenticated, (newVal) => {
-//   console.log('Auth state changed:', newVal)
-// }, { immediate: true })
-
 const mainMenu = computed(() => {
   return [
     { label: 'Collection', key: 'collection' },
@@ -121,10 +117,9 @@ const renderLabel = (option) => {
   padding: 0 20px;
   height: 60px;
   background: #fff;
-  border-bottom: 1px solid #eee;
+  border-bottom: 2px solid #18a058;
   position: relative;
   z-index: 10;
-  margin-bottom: 10px;
 }
 
 .logo {

src/styles/styles.css

@@ -52,3 +52,51 @@
 .text-center {
   text-align: center;
 }
+
+.sticky-search-container {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  padding: 8px 0;
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px;
+  background-color: #eeeeee;
+  border-bottom: 1px solid #c8c8c8;
+  border-radius: 8px;
+  flex-wrap: wrap;
+}
+
+.toolbar-item {
+  flex-shrink: 0;
+}
+
+.search-wrapper {
+  flex-grow: 1;
+  min-width: 200px;
+}
+
+.selector {
+  min-width: 220px;
+}
+
+@media (max-width: 768px) {
+  .selector {
+    flex-basis: 100%;
+    margin-left: auto;
+  }
+}
+
+@media (max-width: 768px) {
+  .search-wrapper {
+    flex-basis: 100%;
+  }
+}
+
+:deep(.mobile-full-width) {
+  width: 100%;
+}

src/views/ChartsView.vue

@@ -6,7 +6,6 @@ import ChartsCard from '@/views/ChartsView/ChartsCard.vue'
 import router from '@/router/index.js'
 import ChartsSearch from '@/views/ChartsView/ChartsSearch.vue'
 
-
 const { getChartsPrices } = useChartsApi()
 
 const pricesList = ref([])
@@ -40,22 +39,21 @@ function handleSelectDays(days) {
   fetchPrices(days)
 }
 
-const searchQuery = ref('');
-
+const searchQuery = ref('')
 
 const filteredPrices = computed(() => {
   if (!searchQuery.value.trim()) {
-    return pricesList.value;
+    return pricesList.value
   }
-  const q = searchQuery.value.toLowerCase();
-  return pricesList.value.filter(item =>
-    item.name.toLowerCase().includes(q)
-  );
-});
+  const q = searchQuery.value.toLowerCase()
+  return pricesList.value.filter((item) => item.name.toLowerCase().includes(q))
+})
 </script>
 
 <template>
+  <div class="sticky-search-container">
     <ChartsSearch v-model="searchQuery" />
+  </div>
   <PeriodSelector @days="handleSelectDays" />
   <n-grid responsive="screen" cols="1 s:1 m:1 l:2 xl:2 2xl:2" class="grid-main">
     <n-gi class="grid-item" v-for="item in filteredPrices" :key="item.merch_uuid">
@@ -67,5 +65,4 @@ const filteredPrices = computed(() => {
 </template>
 
 <style scoped>
-
 </style>

src/views/ChartsView/ChartsSearch.vue

@@ -25,17 +25,11 @@ watch(localValue, (newVal) => {
 </script>
 
 <template>
-  <div class="search-bar">
+  <div class="toolbar">
     <n-input v-model:value="localValue" placeholder="Search..." clearable />
   </div>
 </template>
 
 <style scoped>
-.search-bar {
-  flex-shrink: 0;
-  flex-grow: 1;
-  min-width: 200px;
-  width: 100%;
-  margin-bottom: 10px;
-}
+
 </style>

src/views/CollectionView.vue

@@ -26,22 +26,21 @@ onMounted(() => {
   fetchMerch()
 })
 
-const searchQuery = ref('');
-
+const searchQuery = ref('')
 
 const filteredMerch = computed(() => {
   if (!searchQuery.value.trim()) {
-    return merchList.value;
+    return merchList.value
   }
-  const q = searchQuery.value.toLowerCase();
-  return merchList.value.filter(item =>
-    item.name.toLowerCase().includes(q)
-  );
-});
+  const q = searchQuery.value.toLowerCase()
+  return merchList.value.filter((item) => item.name.toLowerCase().includes(q))
+})
 </script>
 
 <template>
+  <div class="sticky-search-container">
     <CollectionToolbar v-model="searchQuery" />
+  </div>
   <n-grid responsive="screen" cols="2 s:3 m:4 l:5 xl:6 2xl:7" class="grid-main">
     <n-gi class="grid-item" v-for="item in filteredMerch" :key="item.merch_uuid">
       <router-link :to="`/details/${item.merch_uuid}`" class="card-link">
@@ -51,6 +50,4 @@ const filteredMerch = computed(() => {
   </n-grid>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/views/CollectionView/CollectionToolbar.vue

@@ -57,44 +57,5 @@ watch(localValue, (newVal) => {
 </template>
 
 <style scoped>
-.toolbar {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 16px;
-  background-color: #f5f5f5;
-  border-bottom: 1px solid #e0e0e0;
-  border-radius: 8px;
-  flex-wrap: wrap;
-}
 
-.toolbar-item {
-  flex-shrink: 0;
-}
-
-.search-wrapper {
-  flex-grow: 1;
-  min-width: 200px;
-}
-
-.selector {
-  min-width: 220px;
-}
-
-@media (max-width: 768px) {
-  .selector {
-    flex-basis: 100%;
-    margin-left: auto;
-  }
-}
-
-@media (max-width: 768px) {
-  .search-wrapper {
-    flex-basis: 100%;
-  }
-}
-
-:deep(.mobile-full-width) {
-  width: 100%;
-}
 </style>