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>
+  <header
-    <img src="~/assets/icons/brand-logo.svg" :alt="`${appConfig.title} - Logo`"></img>
+    class="app-header"
-    <img src="~/assets/images/brand-mobile.svg" :alt="appConfig.title"></img>
+    :class="{ 'is-fixed': isScrolled }"
-    <p>{{ appConfig.description }}</p>
+  >
+    <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 }
+}

content/index.md

@@ -1,3 +1,21 @@
 # My First Page
 
-Here is some content.
+Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+
+Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+
+Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+
+Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+
+Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+
+Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+
+Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+
+Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+
+Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
+
+Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.