refactor: optimize header and footer ux

web-tech-tw · Oct 24, 2024 · 48158e2 · 48158e2
1 parent 230a8ab
commit 48158e2
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 12 deletions.
diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue
@@ -14,11 +14,19 @@
       >隱私權政策</a>
     </div>
     <div class="max-w-7xl mx-auto mt-5 divide-y divide-gray-200 px-4 sm:px-6 md:px-8">
-      &copy; {{ year }} 臺灣網際網路技術推廣組織 Taiwan Web Technology Promotion Organization (Web Tech TW)
+      &copy; {{ year }}
+      <a
+        class="ml-1 hover:text-slate-900"
+        :href="homeInteHost"
+      >
+        臺灣網際網路技術推廣組織
+        Taiwan Web Technology Promotion Organization (Web Tech TW)
+      </a>
     </div>
   </footer>
 </template>
 
 <script setup>
+const homeInteHost = import.meta.env.VITE_HOME_INTE_HOST;
 const year = new Date().getFullYear();
 </script>
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
@@ -4,12 +4,12 @@
       <div class="flex justify-between items-center border-b-2 border-gray-100 py-6 md:justify-start md:space-x-10">
         <div class="flex justify-start lg:w-0 lg:flex-1">
           <router-link to="/">
-            <h1 class="flex-auto text-lg font-semibold text-gray-900 hidden sm:block">
-              {{ titleLong }}
-            </h1>
-            <h1 class="flex-auto text-lg font-semibold text-gray-900 sm:hidden">
-              {{ titleShort }}
+            <h1 class="flex-auto text-lg font-semibold text-gray-900">
+              {{ title }}
             </h1>
+            <p class="flex-auto text-sm font-normal text-gray-500">
+              {{ subtitle }}
+            </p>
           </router-link>
         </div>
         <app-header-normal />
@@ -33,7 +33,7 @@ import { ref, onMounted, onUnmounted, provide } from "vue";
 
 import { Bars4Icon } from "@heroicons/vue/24/solid"
 
-import { titleLong, titleShort } from "./AppHeaderMenuData.js";
+import { title, subtitle } from "./AppHeaderMenuData.js";
 
 import AppHeaderNormal from "./AppHeaderNormal.vue";
 import AppHeaderMobile from "./AppHeaderMobile.vue";

diff --git a/src/components/AppHeaderMenuData.js b/src/components/AppHeaderMenuData.js
@@ -1,7 +1,7 @@
-export const titleLong = "Sara - 無密碼式身份認證系統";
-export const titleShort = "Sara";
+export const title = "Sara";
+export const subtitle = '無密碼式身份認證系統';
 
-export const isHomeEnabled = true;
+export const isHomeEnabled = false;
 export const isSaraEnabled = false;
 
 export const menuItems = [];
diff --git a/src/components/AppHeaderMobile.vue b/src/components/AppHeaderMobile.vue
@@ -8,7 +8,7 @@
         >
           <div>
             <h1 class="flex-auto text-lg font-semibold text-gray-900 sm:hidden">
-              {{ titleShort }}
+              {{ title }}
             </h1>
           </div>
           <div class="-mr-2">
@@ -59,7 +59,7 @@ import AppHeaderMobileMenuHome from "./AppHeaderMobileMenuHome.vue"
 import AppHeaderMobileMenuSara from "./AppHeaderMobileMenuSara.vue"
 
 import {
-  titleShort,
+  title,
   isHomeEnabled,
   isSaraEnabled,
   menuItems,