try to add scss

package.json

@@ -41,6 +41,9 @@
     "eslint": "^8.35.0",
     "eslint-plugin-vue": "^9.9.0",
     "jsdom": "^21.1.0",
+    "node-sass": "^8.0.0",
+    "sass": "^1.61.0",
+    "sass-loader": "^13.2.2",
     "typescript": "^4.9.3",
     "vite": "^4.1.0",
     "vitest": "^0.29.2",

src/theme/myapp.scss

@@ -0,0 +1,10 @@
+ion-button#cartBtn {
+  position:relative;
+  #bd {
+    top:0px;
+    right:-5px;
+    font-size:8px;
+    position:absolute;
+    background-color:#f00;
+  }
+}

src/theme/variables.css

@@ -233,4 +233,5 @@ http://ionicframework.com/docs/theming/ */
 
     --ion-card-background: #1e1e1e;
   }
-}
+}
+

src/views/Tab1Page.vue

@@ -2,13 +2,19 @@
   <ion-page>
     <ion-header>
       <ion-toolbar>
-        <ion-title>
-          <img src="@/assets/img/kacee-logo.png">
-        </ion-title>
+        <ion-searchbar></ion-searchbar>
+        <ion-buttons slot="end">
+          <ion-button>
+             <ion-icon slot="icon-only" :icon="heart"></ion-icon>
+          </ion-button>
+          <ion-button id='cartBtn'>
+             <ion-icon  :icon="cart" slot='start'></ion-icon>
+             <ion-badge slot="end" id='bd'>22</ion-badge>
+          </ion-button>
+        </ion-buttons>
       </ion-toolbar>
     </ion-header>
-    <ion-content :fullscreen="true">
-       <ion-searchbar></ion-searchbar>
+    <ion-content :fullscreen="true" id="content">
          <swiper>
           <swiper-slide v-for="p in tops">
             <ion-card>
@@ -31,14 +37,17 @@
   </ion-page>
 </template>
 
+<style scoped  lang="scss">
+</style>
 <script setup lang="ts">
-import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonItem, IonLabel, IonList, IonIcon, IonSearchbar, onIonViewDidEnter, onIonViewWillLeave, onIonViewWillEnter, IonThumbnail, IonImg, IonCard, IonCardContent } from '@ionic/vue';
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonItem, IonLabel, IonList, IonIcon, IonSearchbar, onIonViewDidEnter, onIonViewWillLeave, onIonViewWillEnter, IonThumbnail, IonImg, IonCard, IonCardContent, IonButtons, IonBadge } from '@ionic/vue';
 import ExploreContainer from '@/components/ExploreContainer.vue';
-import { logoAndroid, logoApple, star } from 'ionicons/icons';
+import { logoAndroid, logoApple, star, heart, cart } from 'ionicons/icons';
 import axios from 'axios';
 
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import 'swiper/css';
+import '@/theme/myapp.scss';
 import '@ionic/vue/css/ionic-swiper.css';
 import { API_URL } from '@/api_config';
 import { ref, onMounted, reactive } from 'vue'

src/views/TabsPage.vue

@@ -6,7 +6,7 @@
         <ion-tab-button tab="tab1" href="/tabs/tab1">
           <font-awesome-icon icon="fa-solid fa-face-smile" size="2x" />
 
-          <ion-label>สินค้าแนะนำ</ion-label>
+          <ion-label>แนะนำ</ion-label>
         </ion-tab-button>
 
         <ion-tab-button tab="tab2" href="/tabs/tab2">