Footer.svelte

<script>
	import { page } from '$app/stores';
	import { markdownPath, menuItems, isActive } from '../utils.js';
	import { base as baseUrl } from '$app/paths';
	export let fileInfo = {};
	export let frontmatter = {};

	let prev, next;
	$: {
		let prevItem, currItem;
		for (const item of iterateMenuItem($menuItems)) {
			if (!item.path) {
				continue;
			}
			if (currItem) {
				next = item;
				break;
			}
			if (isActive(item.path, $page)) {
				prev = prevItem;
				currItem = item;
				continue;
			}
			prevItem = item;
		}
	}

	/** Iterate */
	function* iterateMenuItem(children) {
		for (const item of children) {
			yield item;

			if (item.children && item.children.length) {
				yield* iterateMenuItem(item.children);
			}
		}
	}
</script>

<footer class:hidden-menu={frontmatter.hiddenMenu}>
	<div class="footer-tools">
		<div class="edit-link">
			<a
				href="https://github.com/sveltejs/eslint-plugin-svelte/edit/main/docs/{markdownPath(
					$page.url.pathname
				)}"
				target="_blank"
				rel="noopener noreferrer">Edit this page</a
			>
			<svg
				xmlns="http://www.w3.org/2000/svg"
				aria-hidden="true"
				focusable="false"
				x="0px"
				y="0px"
				viewBox="0 0 100 100"
				width="15"
				height="15"
				class="icon outbound"
				><path
					fill="currentColor"
					d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
				/>
				<polygon
					fill="currentColor"
					points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
				/>
			</svg>
		</div>
		{#if fileInfo.lastUpdated}
			<div class="last-updated">
				<span class="prefix">Last Updated:</span>
				<span class="time">{fileInfo.lastUpdated}</span>
			</div>
		{/if}
	</div>
	<div class="footer-move">
		{#if prev}
			<span class="prev">←<a href="{baseUrl}{prev.path}">{prev.title}</a></span>
		{/if}
		{#if next}
			<span class="next"><a href="{baseUrl}{next.path}">{next.title}</a>→ </span>
		{/if}
	</div>
	<div class="footer-text">
		<span>
			This site was built with <a href="https://kit.svelte.dev/" target="_brank">SvelteKit</a>.
		</span>
	</div>
</footer>

<style>
	.footer-tools {
		width: 100%;
		padding: 0 1rem;
		box-sizing: border-box;
		display: flex;
	}

	.edit-link {
		display: flex;
		gap: 4px;
	}

	.footer-move {
		border-top: 1px solid var(--background-without-opacity);
		width: 100%;
		padding: 0 1rem;
		box-sizing: border-box;
		display: flex;
	}
	.footer-text {
		padding: 0 1rem 1rem 1rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.last-updated,
	.next {
		margin-left: auto;
	}

	footer:not(.hidden-menu) {
		padding-left: 20rem;
	}

	@media (max-width: 959px) {
		footer:not(.hidden-menu) {
			padding-left: 16.4rem;
		}
	}
	@media (max-width: 719px) {
		footer:not(.hidden-menu) {
			padding-left: 0;
		}
	}

	footer {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 16px 0 0 0;
	}

	footer a {
		font-weight: bold;
	}

	@media (min-width: 480px) {
		footer {
			padding: 24px 0 0 0;
		}
	}
</style>