chore: add animation on header

app/app.vue

@@ -16,8 +16,12 @@
   --breakpoint-2xl: 1400px;
 }
 
-html, body, p {
+html, body, p, a {
   font-family: 'Abbiocco Beta', system-ui, -apple-system, BlinkMacSystemFont,
     'Segoe UI', sans-serif;
 }
+
+a {
+  text-decoration: none;
+}
 </style>

app/components/AppHeader.vue

@@ -1,32 +1,70 @@
 <script setup lang="ts">
 const appConfig = useAppConfig()
+const { isScrolled } = useScroll(100)
 </script>
 
 <template>
-  <header>
-    <img src="~/assets/icons/brand-logo.svg" :alt="`${appConfig.title} - Logo`"></img>
-    <img src="~/assets/images/brand-mobile.svg" :alt="appConfig.title"></img>
-    <p>{{ appConfig.description }}</p>
+  <header
+    class="app-header"
+    :class="{ 'is-fixed': isScrolled }"
+  >
+    <img
+      v-if="isScrolled"
+      src="~/assets/images/brand-desktop.svg"
+      :alt="appConfig.title"
+    />
+
+    <template v-if="!isScrolled">
+      <img class="brand-logo" src="~/assets/images/brand-logo.svg" :alt="`${appConfig.title} - Logo`" />
+      <img src="~/assets/images/brand-mobile.svg" :alt="appConfig.title" />
+      <p>{{ appConfig.description }}</p>
+    </template>
+
+    <NuxtLink v-if="isScrolled" to="#about">⭣ About</NuxtLink>
   </header>
+
 </template>
 
 <style lang="css" scoped>
-header {
+.app-header {
   background-color: var(--primary-color);
   color: var(--secondary-color);
+  display: flex;
+  gap: 1rem;
+  transition: all 0.3s ease;
   height: 68vh;
   padding: 3rem 2rem;
-  display: flex;
   flex-direction: column;
-  gap: 1rem;
 }
 
-img:first-of-type {
+.app-header.is-fixed {
+  box-sizing: border-box;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 34px;
+  padding: 0.75rem 2rem;
+  flex-direction: row;
+  z-index: 10;
+  align-items: center;
+}
+
+.app-header.is-fixed img {
+  height: 11px;
+}
+
+.brand-logo {
   align-self: flex-end;
   margin-bottom: auto;
   width: 36vw;
 }
 
+a {
+  margin-left: auto;
+  font-weight: 500;
+}
+
 p {
   font-size: 1.25rem;
   line-height: 1.5rem;

app/composables/useScroll.ts

@@ -0,0 +1,24 @@
+export const useScroll = (threshold: number = 100) => {
+  const isScrolled = ref(false)
+  let rafId: number | null = null
+  
+  const handleScroll = () => {
+    if(rafId) return
+
+    rafId = requestAnimationFrame(() => {
+      isScrolled.value = window.scrollY > threshold
+      rafId = null
+    })
+  }
+  
+  onMounted(() => {
+    window.addEventListener('scroll', handleScroll)
+    handleScroll()
+  })
+  
+  onUnmounted(() => {
+    window.removeEventListener('scroll', handleScroll)
+  })
+  
+  return { isScrolled }
+}