Add maintenance system

src/components/Announcement.vue

@@ -12,9 +12,9 @@ function getColor() {
   <div v-if="announce" class="w-full flex justify-center mt-8">
     <div class="relative">
       <h1 class="px-4 py-2 bg-white dark:bg-zinc-900 rounded-md border border-zinc-100 dark:border-zinc-300/10" v-html="announce.content" />
-      <span class="absolute -top-1 -right-1 flex h-3 w-3">
+      <span class="absolute -top-0.5 -right-0.5 flex h-2 w-2">
         <span span class="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75" :class="getColor()" />
-        <span class="relative inline-flex rounded-full h-3 w-3" :class="getColor()" />
+        <span class="relative inline-flex rounded-full h-2 w-2" :class="getColor()" />
       </span>
     </div>
   </div>

src/components/header/Header.vue

@@ -2,7 +2,7 @@
   <header class="z-30 sticky top-0 left-0 flex justify-center w-full">
     <div class="w-full px-4 sm:px-6 lg:px-8 sm:mx-8 max-w-7xl py-4 flex justify-between bg-white dark:bg-zinc-900 border-b border-zinc-100 dark:border-zinc-300/10">
       <Logo />
-      <NavBar />
+      <NavBar v-if="navbar" />
       <div class="flex gap-2">
         <ClientOnly>
           <div class="flex items-center rounded-md p-1 gap-1 relative bg-black/5 text-sm font-medium text-zinc-700 dark:bg-zinc-800/90 dark:text-zinc-300">
@@ -15,3 +15,13 @@
     </div>
   </header>
 </template>
+
+<script setup lang="ts">
+
+defineProps({
+  navbar: {
+    type: Boolean,
+    default: true,
+  },
+})
+</script>