marco.tngl.sh
My personal site.
feat: animations for active dot
+54
-7
+54
-7
src/components/Header.astro
+54
-7
src/components/Header.astro
···
1
1
---
2
2
import IconTangled from "./icons/IconTangled.astro";
3
+
3
4
const currentPath = Astro.url.pathname;
4
-
const isActive = (path: string) => currentPath.includes(path);
5
+
const isActive = (path: string, options?: { matching: "exact" }) => {
6
+
return options?.matching === "exact"
7
+
? currentPath === path
8
+
: currentPath.includes(path);
9
+
};
5
10
---
6
11
7
12
<style>
8
-
header {
9
-
padding: 12px;
10
-
max-width: 1024px;
11
-
margin-inline: auto;
13
+
@view-transition {
14
+
navigation: auto;
15
+
}
16
+
17
+
:root {
18
+
view-transition-name: none;
12
19
}
13
20
14
21
header {
15
22
display: flex;
16
23
justify-content: space-between;
24
+
padding: 12px;
25
+
max-width: 1024px;
26
+
margin-inline: auto;
17
27
}
18
28
19
29
header > a {
···
46
56
font-weight: 500;
47
57
color: oklch(0.54 0.04 261.36);
48
58
position: relative;
59
+
transition: color 150ms ease;
49
60
}
50
61
51
62
#main-nav a:hover {
···
69
80
margin-top: 1px;
70
81
}
71
82
72
-
#main-nav a.active:after {
83
+
#main-nav a.active::after {
73
84
content: "•";
74
85
position: absolute;
75
86
bottom: -14px;
···
78
89
display: grid;
79
90
place-items: center;
80
91
color: var(--fg);
92
+
93
+
@media (prefers-reduced-motion: no-preference) {
94
+
view-transition-name: active-dot;
95
+
}
96
+
}
97
+
98
+
:global(::view-transition-new(active-dot):only-child) {
99
+
animation: blur-in 300ms ease forwards;
100
+
}
101
+
102
+
:global(::view-transition-old(active-dot):only-child) {
103
+
animation: blur-out 300ms ease forwards;
81
104
}
82
105
83
106
a span {
···
85
108
max-width: 0;
86
109
overflow: hidden;
87
110
vertical-align: bottom;
88
-
transition: max-width 100ms ease-out;
111
+
@media (prefers-reduced-motion: no-preference) {
112
+
transition: max-width 100ms ease-out;
113
+
}
89
114
}
90
115
91
116
@media (hover: hover) {
···
95
120
96
121
a:hover span:last-of-type {
97
122
max-width: 6ch;
123
+
}
124
+
}
125
+
126
+
@keyframes blur-in {
127
+
from {
128
+
opacity: 0;
129
+
filter: blur(4px);
130
+
}
131
+
to {
132
+
opacity: 1;
133
+
filter: blur(0);
134
+
}
135
+
}
136
+
137
+
@keyframes blur-out {
138
+
from {
139
+
opacity: 1;
140
+
filter: blur(0);
141
+
}
142
+
to {
143
+
opacity: 0;
144
+
filter: blur(4px);
98
145
}
99
146
}
100
147
</style>