chore: update header UI (#2965)

packages/hoppscotch-common/src/components/app/Header.vue

@@ -17,27 +17,13 @@
         />
         <!-- <AppGitHubStarButton class="mt-1.5 transition" /> -->
       </div>
-      <div class="inline-flex items-center justify-center flex-1 space-x-2">
+      <div class="inline-flex items-center space-x-2">
-        <AppNavigation v-if="mdAndLarger" />
-        <div
-          class="bg-primaryDark max-w-128 text-secondaryLight justify-between cursor-pointer rounded border border-dividerDark hover:border-dividerDark hover:bg-primaryLight hover:text-secondary focus-visible:border-dividerDark focus-visible:bg-primaryLight focus-visible:text-secondary focus:outline-none transition flex flex-1 items-center px-2 py-1.25"
-          tabindex="0"
-          @click="invokeAction('modals.search.toggle')"
-        >
-          <span class="inline-flex">
-            <icon-lucide-search class="mr-2 svg-icons" />
-            {{ t("app.search") }}
-          </span>
-          <kbd class="shortcut-key">/</kbd>
-        </div>
         <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip', allowHTML: true }"
-          :title="`${
+          :title="`${t('app.search')} <kbd>/</kbd>`"
-            mdAndLarger ? t('support.title') : t('app.options')
+          :icon="IconSearch"
-          } <kbd>?</kbd>`"
-          :icon="IconHelpCircle"
           class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
-          @click="invokeAction('modals.support.toggle')"
+          @click="invokeAction('modals.search.toggle')"
         />
         <HoppButtonSecondary
           v-if="showInstallButton"
@@ -47,8 +33,15 @@
           class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
           @click="installPWA()"
         />
-      </div>
+        <HoppButtonSecondary
-      <div class="inline-flex items-center justify-end flex-1 space-x-2">
+          v-tippy="{ theme: 'tooltip', allowHTML: true }"
+          :title="`${
+            mdAndLarger ? t('support.title') : t('app.options')
+          } <kbd>?</kbd>`"
+          :icon="IconLifeBuoy"
+          class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
+          @click="invokeAction('modals.support.toggle')"
+        />
         <div
           v-if="currentUser === null"
           class="inline-flex items-center space-x-2"
@@ -242,7 +235,8 @@ import IconSettings from "~icons/lucide/settings"
 import IconDownload from "~icons/lucide/download"
 import IconUploadCloud from "~icons/lucide/upload-cloud"
 import IconUserPlus from "~icons/lucide/user-plus"
-import IconHelpCircle from "~icons/lucide/help-circle"
+import IconLifeBuoy from "~icons/lucide/life-buoy"
+import IconSearch from "~icons/lucide/search"
 import { breakpointsTailwind, useBreakpoints, useNetwork } from "@vueuse/core"
 import { pwaDefferedPrompt, installPWA } from "@modules/pwa"
 import { platform } from "~/platform"

packages/hoppscotch-common/src/components/app/Navigation.vue

@@ -1,33 +0,0 @@
-<template>
-  <div class="flex items-center justify-between">
-    <HoppButtonSecondary
-      v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
-      :title="`${t(
-        'action.go_back'
-      )} <kbd>${getSpecialKey()}</kbd><kbd>←</kbd>`"
-      :icon="IconArrowLeft"
-      class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
-      @click="router.go(-1)"
-    />
-    <HoppButtonSecondary
-      v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
-      :title="`${t(
-        'action.go_forward'
-      )} <kbd>${getSpecialKey()}</kbd><kbd>→</kbd>`"
-      :icon="IconArrowRight"
-      class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
-      @click="router.go(1)"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useI18n } from "@composables/i18n"
-import { useRouter } from "vue-router"
-import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
-import IconArrowLeft from "~icons/lucide/arrow-left"
-import IconArrowRight from "~icons/lucide/arrow-right"
-
-const t = useI18n()
-const router = useRouter()
-</script>