NavRow animation improvements

.github/workflows/ci.yml

@@ -28,15 +28,25 @@ jobs:
   release:
     needs: [lint]
     runs-on: ubuntu-latest
+    if: github.ref == 'refs/heads/main'
     steps:
       - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2.2.2
+        with:
+          version: 7
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: pnpm
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Bump version
+        run: pnpm version patch --commit-hooks false --git-tag-version false
       - name: Publish
-        if: github.ref == 'refs/heads/main'
-        run: npm publish --tag alpha
+        run: pnpm publish --no-git-checks --tag alpha --dry-run
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
       - uses: EndBug/add-and-commit@v9
-        if: github.ref == 'refs/heads/main'
         with:
           message: 'Bump package version [skip ci]'
           default_author: github_actions

.github/workflows/deploy.yml

@@ -11,8 +11,8 @@ jobs:
         id: cf-pages
         uses: WalshyDev/cf-pages-await@v1
         with:
-          accountEmail: ${{ secrets.CF_ACCOUNT_EMAIL  }}
-          apiKey: ${{ secrets.CF_API_KEY  }}
-          accountId: '9ddae624c98677d68d93df6e524a6061'
           project: 'omorphia'
+          apiToken: ${{ secrets.CF_API_TOKEN }}
+          accountId: '9ddae624c98677d68d93df6e524a6061'
           githubToken: ${{ secrets.GITHUB_TOKEN }}
+          commitHash: ${{ steps.push-changes.outputs.commit-hash }}

src/components/NavRow.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/stores'
+	import { onMount } from 'svelte'
 
 	interface Link {
 		href: string
@@ -25,10 +26,24 @@
 	]
 
 	$: basePath = path.slice(0, level).join('')
+
+	$: activeIndex = query
+		? links.findIndex((link) => ($page.url.searchParams.get(query) || '') === link.href)
+		: links.findIndex((link) => path[level] === link.href || path[level] === link.href.slice(0, -1))
+
+	const linkElements: HTMLAnchorElement[] = []
+
+	let indicatorReady = false
+
+	onMount(() => {
+		setTimeout(() => {
+			indicatorReady = true
+		}, 300)
+	})
 </script>
 
-<nav class="navigation">
-	{#each links as link}
+<nav class="navigation" class:static-indicator={!indicatorReady}>
+	{#each links as link, index}
 		<a
 			href={query
 				? link.href
@@ -44,8 +59,18 @@
 			class:is-active={query
 				? ($page.url.searchParams.get(query) || '') === link.href
 				: path[level] === link.href || path[level] === link.href.slice(0, -1)}
-			sveltekit:noscroll={!resetScroll || null}>{link.label}</a>
+			sveltekit:noscroll={!resetScroll || null}
+			bind:this={linkElements[index]}>
+			{link.label}
+		</a>
 	{/each}
+	<div
+		class="navigation__indicator"
+		style:left={linkElements
+			.slice(0, activeIndex)
+			.map((element, index) => element.offsetWidth + 16)
+			.reduce((acc, a) => acc + a, 0) + 'px'}
+		style:width={linkElements[activeIndex]?.offsetWidth + 'px'} />
 </nav>
 
 <style lang="postcss">
@@ -55,26 +80,57 @@
 		align-items: center;
 		gap: 1rem;
 		flex-wrap: wrap;
+		position: relative;
 
 		&__link {
 			font-weight: var(--font-weight-bold);
 			color: var(--color-text-light);
+			transition: color 0.3s ease-in-out;
+			position: relative;
 
 			&.is-active {
 				color: var(--color-text);
-				position: relative;
+			}
 
-				&::after {
-					content: '';
-					display: block;
-					position: absolute;
-					bottom: -1px;
-					width: 100%;
-					border-radius: var(--rounded-max);
-					height: 0.25rem;
+			&::after {
+				content: '';
+				display: block;
+				position: absolute;
+				bottom: -2px;
+				width: 100%;
+				border-radius: var(--rounded-max);
+				height: 0.25rem;
+				transition: background-color 0.2s ease-in-out;
+			}
+
+			&:hover::after {
+				background-color: var(--color-brand-light);
+			}
+		}
+
+		&.static-indicator {
+			.navigation__link {
+				&.is-active::after {
 					background-color: var(--color-brand);
 				}
 			}
 		}
+
+		&__indicator {
+			position: absolute;
+			bottom: -2px;
+			width: 1rem;
+			height: 0.25rem;
+			border-radius: var(--rounded-max);
+			background-color: var(--color-brand);
+			transition: width 0.3s ease-out, left 0.3s ease-out;
+			visibility: hidden;
+		}
+
+		&:not(.static-indicator) {
+			.navigation__indicator {
+				visibility: visible;
+			}
+		}
 	}
 </style>