Refactor GlobalHeader.vue styles: Update translate values for smooth animation

totocalcio · totocalcio · commit 9324547ba887 · 2024-10-14T03:58:11.000+09:00
diff --git a/apps/web/app/components/GlobalHeader.vue b/apps/web/app/components/GlobalHeader.vue
@@ -126,14 +126,14 @@ const getAnchorPath = computed(
   transition:
     translate 0.6s cubic-bezier(0.4, 0, 0.2, 1),
     display 0.6s cubic-bezier(0.4, 0, 0.2, 1) allow-discrete;
-  translate: 0 -100%;
+  translate: 0 -100dvh;
   z-index: 1;
 
   &[open] {
     translate: 0 0;
 
     @starting-style {
-      translate: 0 -100%;
+      translate: 0 -100dvh;
     }
   }
 

Original file line number	Diff line number	Diff line change
`@@ -126,14 +126,14 @@ const getAnchorPath = computed(`
`126`	`126`	`transition:`
`127`	`127`	`translate 0.6s cubic-bezier(0.4, 0, 0.2, 1),`
`128`	`128`	`display 0.6s cubic-bezier(0.4, 0, 0.2, 1) allow-discrete;`
`129`		`- translate: 0 -100%;`
	`129`	`+ translate: 0 -100dvh;`
`130`	`130`	`z-index: 1;`
`131`	`131`
`132`	`132`	`&[open] {`
`133`	`133`	`translate: 0 0;`
`134`	`134`
`135`	`135`	`@starting-style {`
`136`		`- translate: 0 -100%;`
	`136`	`+ translate: 0 -100dvh;`
`137`	`137`	`}`
`138`	`138`	`}`
`139`	`139`