feat: add icons to mobile design

phojie · Jan 12, 2023 · ccaaf4b · ccaaf4b
1 parent 34c3bcf
commit ccaaf4b
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/resources/js/components.d.ts b/resources/js/components.d.ts
@@ -79,11 +79,13 @@ declare module '@vue/runtime-core' {
     HeroiconsClock20Solid: typeof import('~icons/heroicons/clock20-solid')['default']
     HeroiconsEnvelope20Solid: typeof import('~icons/heroicons/envelope20-solid')['default']
     HeroiconsExclamationTriangle20Solid: typeof import('~icons/heroicons/exclamation-triangle20-solid')['default']
+    HeroiconsInformationCircle: typeof import('~icons/heroicons/information-circle')['default']
     HeroiconsLink20Solid: typeof import('~icons/heroicons/link20-solid')['default']
     HeroiconsMagnifyingGlass: typeof import('~icons/heroicons/magnifying-glass')['default']
     HeroiconsMagnifyingGlass20Solid: typeof import('~icons/heroicons/magnifying-glass20-solid')['default']
     HeroiconsOutlineBars3CenterLeft: typeof import('~icons/heroicons-outline/bars3-center-left')['default']
     HeroiconsPencilSquare20Solid: typeof import('~icons/heroicons/pencil-square20-solid')['default']
+    HeroiconsPhone: typeof import('~icons/heroicons/phone')['default']
     HeroiconsPhone20Solid: typeof import('~icons/heroicons/phone20-solid')['default']
     HeroiconsQuestionMarkCircle: typeof import('~icons/heroicons/question-mark-circle')['default']
     HeroiconsQuestionMarkCircle20Solid: typeof import('~icons/heroicons/question-mark-circle20-solid')['default']

diff --git a/resources/js/components/App/AppHeader.vue b/resources/js/components/App/AppHeader.vue
@@ -309,7 +309,14 @@ onMounted(async () => {
               </JLink>
 
               <div class="flex items-center lg:ml-8">
-                <!-- Help -->
+                <JLink :to="route('about')" class="p-2 text-gray-400 hover:text-gray-500 lg:hidden">
+                  <span class="sr-only">About us</span>
+                  <heroicons-information-circle class="w-6 h-6" aria-hidden="true" />
+                </JLink>
+                <JLink :to="route('contact-us')" class="p-2 text-gray-400 hover:text-gray-500 lg:hidden">
+                  <span class="sr-only">Contact us</span>
+                  <heroicons-phone class="w-6 h-6" aria-hidden="true" />
+                </JLink>
                 <JLink :to="route('help')" class="p-2 text-gray-400 hover:text-gray-500 lg:hidden">
                   <span class="sr-only">Help</span>
                   <heroicons-question-mark-circle class="w-6 h-6" aria-hidden="true" />