Working

src/components/Announcement.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+const { $trpc } = useNuxtApp()
+const announcement = await $trpc.announcement.announcement.query()
+</script>
+
+<template>
+  <div v-if="announcement" flex justify-center>
+    <div dark:hover:bg="dark-800/50" hover:bg="gray-100/50" shadow-announcement-light dark:shadow-announcement-dark rounded-md p-4 duration-300 dark:bg-dark-900>
+      <p v-html="announcement.content" />
+    </div>
+  </div>
+</template>

src/components/Footer.vue

@@ -0,0 +1,5 @@
+<template>
+  <footer>
+    Footer
+  </footer>
+</template>

src/components/Header.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+const { getThemeTextColor } = useTheme()
+const { y } = useWindowScroll()
+
+const color = useColorMode()
+const toggleColor = () => {
+  color.preference = color.value === 'dark' ? 'light' : 'dark'
+}
+</script>
+
+<template>
+  <header
+    sticky top-0 h-16 duration-300
+    :class="{ 'backdrop-blur-10px backdrop-saturate-180 shadow-header-active-light dark:shadow-header-active-dark': y > 8 }"
+  >
+    <div h-full flex items-center justify-between px-32>
+      <div>
+        Logo
+      </div>
+      <div flex items-center space-x-4>
+        <nav flex space-x-4>
+          <NuxtLink to="/about">
+            About
+          </NuxtLink>
+          <NuxtLink to="/writings">
+            Blog
+          </NuxtLink>
+          <NuxtLink to="/work">
+            Work
+          </NuxtLink>
+          <NuxtLink to="/contact">
+            Contact
+          </NuxtLink>
+          <NuxtLink to="/test">
+            TEST
+          </NuxtLink>
+        </nav>
+        <div h-24px w-1px bg-gray-300 dark:bg-dark-300 />
+        <button
+          role="switch" type="button"
+          relative block h-22px w-10 shrink-0
+          border-1 border-gray-400 rounded-11px border-solid
+          transition-colors-250
+          dark:border-dark-300 hover:border-gray-600 dark:hover:border-dark-100
+          @click.prevent="toggleColor()"
+        >
+          <span
+            rounded="1/2" absolute left-1px top-1px h-18px w-18px transition-transform-250
+            :style="{ transform: `translateX(${color.preference === 'light' ? 0 : 18}px)` }"
+          >
+            <span relative block h-18px w-18px overflow-hidden rounded="1/2" bg-gray-100 dark:bg-dark-400>
+              <Icon
+                name="material-symbols:dark-mode-outline" size="12"
+                :class="color.preference === 'light' ? 'opacity-0' : 'opacity-100'"
+                absolute left-3px top-3px text-black duration-200 dark:text-white
+              />
+              <Icon
+                name="material-symbols:light-mode-outline" size="12"
+                :class="color.preference === 'light' ? 'opacity-100' : 'opacity-0'"
+                absolute left-3px top-3px text-black duration-200 dark:text-white
+              />
+            </span>
+          </span>
+        </button>
+        <div h-24px w-1px bg-gray-300 dark:bg-dark-300 />
+        <div flex space-x-4>
+          <NuxtLink
+            href="https://github.com/ArthurDanjou" target="_blank" text-gray-700 duration-300 dark:text-gray-400
+            :class="`hover:${getThemeTextColor}`"
+          >
+            <Icon name="mdi:github" size="24" />
+          </NuxtLink>
+          <NuxtLink
+            href="https://twitter.com/ArthurDanj" target="_blank" text-gray-700 duration-300 dark:text-gray-400
+            :class="`hover:${getThemeTextColor}`"
+          >
+            <Icon name="mdi:twitter" size="24" />
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+  </header>
+</template>
+
+<style lang="scss">
+a.router-link-exact-active {
+  color: v-bind(getThemeTextColor)
+}
+</style>

src/components/MenuBurger.vue

@@ -0,0 +1,76 @@
+<script lang="ts" setup>
+defineProps<{
+  active: boolean
+}>()
+
+defineEmits<{
+  (e: 'click'): void
+}>()
+</script>
+
+<template>
+  <button
+    type="button"
+    class="menu-burger"
+    :class="{ active }"
+    @click="$emit('click')"
+  >
+    <span class="container">
+      <span class="top" />
+      <span class="middle" />
+      <span class="bottom" />
+    </span>
+  </button>
+</template>
+
+<style scoped>
+.menu-burger {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 48px;
+  height: var(--vp-nav-height);
+}
+
+@media (min-width: 768px) {
+  .menu-burger {
+    display: none;
+  }
+}
+
+.container {
+  position: relative;
+  width: 16px;
+  height: 14px;
+  overflow: hidden;
+}
+
+.menu-burger:hover .top    { top: 0; left: 0; transform: translateX(4px); }
+.menu-burger:hover .middle { top: 6px; left: 0; transform: translateX(0); }
+.menu-burger:hover .bottom { top: 12px; left: 0; transform: translateX(8px); }
+
+.menu-burger.active .top    { top: 6px; transform: translateX(0) rotate(225deg); }
+.menu-burger.active .middle { top: 6px; transform: translateX(16px); }
+.menu-burger.active .bottom { top: 6px; transform: translateX(0) rotate(135deg); }
+
+.menu-burger.active:hover .top,
+.menu-burger.active:hover .middle,
+.menu-burger.active:hover .bottom {
+  background-color: var(--vp-c-text-2);
+  transition: top .25s, background-color .25s, transform .25s;
+}
+
+.top,
+.middle,
+.bottom {
+  position: absolute;
+  width: 16px;
+  height: 2px;
+  background-color: var(--vp-c-text-1);
+  transition: top .25s, background-color .5s, transform .25s;
+}
+
+.top    { top: 0; left: 0; transform: translateX(0); }
+.middle { top: 6px; left: 0; transform: translateX(8px); }
+.bottom { top: 12px; left: 0; transform: translateX(4px); }
+</style>