feat: add offline check (#247)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

components/common/OfflineChecker.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+defineProps<{
+  smallScreen: boolean
+}>()
+const online = useOnline()
+</script>
+
+<template>
+  <div
+    v-if="!online"
+    w-full min-h-30px px4 py3 text-primary bg-base
+    border="t base" flex="~ gap-2 center"
+  >
+    <div i-ri:wifi-off-line />
+    {{ $t('common.offline_desc') }}
+  </div>
+</template>

components/nav/NavBottom.vue

@@ -3,7 +3,7 @@
 </script>
 
 <template>
-  <nav h-14 fixed bottom-0 left-0 right-0 z-10 border="t base" bg-base flex flex-row>
+  <nav h-14 border="t base" flex flex-row>
     <template v-if="currentUser">
       <NuxtLink to="/home" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
         <div i-ri:home-5-line />

layouts/default.vue

@@ -13,10 +13,15 @@
           </slot>
         </div>
       </aside>
-      <NavBottom v-if="isSmallScreen" />
       <div class="w-full mb14 md:(w-3/4 mb0) lg:(w-2/4 mb0) min-h-screen" border="l r base">
+        <div min-h-screen>
           <slot />
         </div>
+        <div sticky left-0 right-0 bottom-0 z-10 bg-base>
+          <CommonOfflineChecker :small-screen="isSmallScreen" />
+          <NavBottom v-if="isSmallScreen" />
+        </div>
+      </div>
       <aside class="hidden md:none lg:block w-1/4 zen-hide">
         <div sticky top-0 h-screen flex="~ col">
           <slot name="right">

locales/en-US.json

@@ -37,7 +37,8 @@
   "common": {
     "end_of_list": "End of the list",
     "error": "ERROR",
-    "not_found": "404 Not Found"
+    "not_found": "404 Not Found",
+    "offline_desc": "Seems like you are offline. Please check your network connection."
   },
   "error": {
     "account_not_found": "Account {0} not found"

locales/zh-CN.json

@@ -37,7 +37,8 @@
   "common": {
     "end_of_list": "列表到底啦",
     "error": "错误",
-    "not_found": "无法找到相关内容"
+    "not_found": "无法找到相关内容",
+    "offline_desc": "您目前已离线，请检查网络连接。"
   },
   "error": {
     "account_not_found": "未找到用户 {0}"

styles/vars.css

@@ -1,7 +1,7 @@
 :root {
   --c-primary: #EA9E44;
   --c-primary-active: #C16929;
-  --c-border: #88888820;
+  --c-border: #eee;
 
   --c-bg-base: #fff;
   --c-bg-active: #f6f6f6;
@@ -19,6 +19,8 @@
 }
 
 .dark {
+  --c-border: #222;
+
   --c-bg-base: #111;
   --c-bg-active: #191919;
   --c-bg-code: #ffffff06;