refactor: optimize header ux

src/components/AppHeader.vue

@@ -14,6 +14,7 @@
         </div>
         <app-header-normal />
         <app-header-mobile-icon-button
+          v-if="isMenuItemExist"
           class="-mr-2 -my-2 md:hidden"
           @click="handleMobileMenuBtnOpenClick"
         >
@@ -29,11 +30,17 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted, provide } from "vue";
+import { ref, computed, onMounted, onUnmounted, provide } from "vue";
 
 import { Bars4Icon } from "@heroicons/vue/24/solid"
 
-import { title, subtitle } from "./AppHeaderMenuData.js";
+import {
+  title,
+  subtitle,
+  isHomeEnabled,
+  isSaraEnabled,
+  menuItems,
+} from "./AppHeaderMenuData.js";
 
 import AppHeaderNormal from "./AppHeaderNormal.vue";
 import AppHeaderMobile from "./AppHeaderMobile.vue";
@@ -45,6 +52,10 @@ const isMobileMenuOpened = ref(false);
 const parentMenuState = ref(true);
 provide("parent-menu-state", parentMenuState);
 
+const isMenuItemExist = computed(() => {
+  return isSaraEnabled || isHomeEnabled || menuItems.length;
+});
+
 const handleMobileMenuBtnOpenClick = () => {
   isMobileMenuOpened.value = true;
   parentMenuState.value = true;