@janga/norna 0.7.10 → 0.7.12

package/src/components/NornaSmoothScrollScript.astro

@@ -0,0 +1,250 @@
+<script>
+	const siteTop = document.querySelector<HTMLElement>('.site-top');
+	const sections = Array.from(document.querySelectorAll<HTMLElement>('.site-section'));
+	const links = Array.from(document.querySelectorAll<HTMLAnchorElement>('.site-nav-submenu a, .mobile-page-nav a, .page-nav a'));
+	const mobileMenu = document.querySelector<HTMLDetailsElement>('.mobile-nav-menu');
+	const anchorCorrectionDelays = [120, 320, 700, 1_000, 2_000];
+	const reduceMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+	const minimumScrollDuration = 700;
+	const maximumScrollDuration = 1_800;
+	const scrollDurationPerPixel = 0.18;
+	const scrollInterruptEvents = ['wheel', 'touchstart'];
+	const scrollInterruptKeys = new Set(['ArrowDown', 'ArrowUp', 'End', 'Home', 'PageDown', 'PageUp', ' ']);
+	let activeScrollAnimation: { cancel: () => void } | null = null;
+	let anchorCorrectionToken = 0;
+
+	if ('scrollRestoration' in history) {
+		history.scrollRestoration = 'manual';
+	}
+
+	const setAnchorOffset = () => {
+		if (!siteTop) return;
+
+		const offset = Math.ceil(siteTop.getBoundingClientRect().height);
+		document.documentElement.style.setProperty('--site-top-anchor-offset', `${offset}px`);
+		return offset;
+	};
+
+	const getSectionFromHash = (hash: string) => {
+		const id = hash.replace(/^#/, '');
+		return sections.find((section) => section.id === id);
+	};
+
+	const getSectionHeading = (section?: HTMLElement) => section?.querySelector<HTMLElement>('h1, h2');
+
+	const cancelActiveScroll = () => {
+		activeScrollAnimation?.cancel();
+		activeScrollAnimation = null;
+	};
+
+	const getHashSection = () => getSectionFromHash(window.location.hash);
+
+	const setHash = (targetHash: string) => {
+		if (window.location.hash !== targetHash) {
+			history.pushState(null, '', targetHash);
+		}
+	};
+
+	const closeMobileMenu = () => {
+		if (mobileMenu) mobileMenu.open = false;
+	};
+
+	const getSectionScrollTop = (section?: HTMLElement) => {
+		const heading = getSectionHeading(section);
+		if (!heading) return;
+
+		const offset = setAnchorOffset();
+		if (offset === undefined) return;
+
+		return Math.max(0, heading.getBoundingClientRect().top + window.scrollY - offset);
+	};
+
+	const jumpTo = (top: number) => {
+		cancelActiveScroll();
+
+		const root = document.documentElement;
+		const previousScrollBehavior = root.style.scrollBehavior;
+		root.style.scrollBehavior = 'auto';
+		window.scrollTo(0, top);
+		root.style.scrollBehavior = previousScrollBehavior;
+	};
+
+	const getScrollDuration = (distance: number) => {
+		if (reduceMotionQuery.matches) return 0;
+
+		return Math.min(
+			maximumScrollDuration,
+			Math.max(minimumScrollDuration, Math.abs(distance) * scrollDurationPerPixel),
+		);
+	};
+
+	const easeInOutCubic = (progress: number) => (
+		progress < 0.5
+			? 4 * progress * progress * progress
+			: 1 - Math.pow(-2 * progress + 2, 3) / 2
+	);
+
+	const animateScrollTo = (
+		target: number | (() => number | undefined),
+		{ duration, onComplete }: { duration?: number; onComplete?: () => void } = {},
+	) => {
+		cancelActiveScroll();
+
+		const getTop = typeof target === 'function' ? target : () => target;
+		let latestTop = getTop();
+		if (latestTop === undefined) return 0;
+
+		const startY = window.scrollY;
+		const scrollDuration = duration ?? getScrollDuration(latestTop - startY);
+
+		if (scrollDuration <= 0) {
+			const top = getTop();
+			if (top === undefined) return 0;
+
+			jumpTo(top);
+			onComplete?.();
+			return 0;
+		}
+
+		const root = document.documentElement;
+		const previousScrollBehavior = root.style.scrollBehavior;
+		const startedAt = performance.now();
+		let frameId = 0;
+		const state = { cancel: () => {} };
+
+		const cleanup = () => {
+			scrollInterruptEvents.forEach((eventName) => {
+				window.removeEventListener(eventName, interruptScroll);
+			});
+			window.removeEventListener('keydown', interruptScrollKey);
+			root.style.scrollBehavior = previousScrollBehavior;
+			delete root.dataset.nornaScrollActive;
+
+			if (activeScrollAnimation === state) {
+				activeScrollAnimation = null;
+			}
+		};
+
+		const cancel = () => {
+			if (frameId) cancelAnimationFrame(frameId);
+			cleanup();
+		};
+
+		const interruptScroll = () => cancel();
+		const interruptScrollKey = (event: KeyboardEvent) => {
+			if (scrollInterruptKeys.has(event.key)) interruptScroll();
+		};
+
+		const step = (now: number) => {
+			const progress = Math.min(1, (now - startedAt) / scrollDuration);
+			const top = getTop();
+			if (top !== undefined) latestTop = top;
+
+			window.scrollTo(0, startY + (latestTop - startY) * easeInOutCubic(progress));
+
+			if (progress >= 1) {
+				window.scrollTo(0, latestTop);
+				cleanup();
+				onComplete?.();
+				return;
+			}
+
+			frameId = requestAnimationFrame(step);
+		};
+
+		state.cancel = cancel;
+		activeScrollAnimation = state;
+		root.style.scrollBehavior = 'auto';
+		root.dataset.nornaScrollActive = 'true';
+		scrollInterruptEvents.forEach((eventName) => {
+			window.addEventListener(eventName, interruptScroll, { passive: true });
+		});
+		window.addEventListener('keydown', interruptScrollKey);
+		frameId = requestAnimationFrame(step);
+
+		return scrollDuration;
+	};
+
+	const scrollToSection = (
+		section: HTMLElement,
+		{ animate = true, duration, onComplete }: { animate?: boolean; duration?: number; onComplete?: () => void } = {},
+	) => {
+		const top = getSectionScrollTop(section);
+		if (top === undefined) return 0;
+
+		return animate
+			? animateScrollTo(() => getSectionScrollTop(section), { duration, onComplete })
+			: (jumpTo(top), onComplete?.(), 0);
+	};
+
+	const correctCurrentHashAnchor = () => {
+		if (activeScrollAnimation) return;
+
+		const section = getHashSection();
+		if (section) scrollToSection(section, { animate: false });
+	};
+
+	const scheduleHashAnchorCorrection = () => {
+		if (!window.location.hash) return;
+
+		anchorCorrectionToken += 1;
+		const token = anchorCorrectionToken;
+
+		anchorCorrectionDelays.forEach((delay) => {
+			window.setTimeout(() => {
+				if (token === anchorCorrectionToken) requestAnimationFrame(correctCurrentHashAnchor);
+			}, delay);
+		});
+	};
+
+	const syncToLocation = ({ scrollHashlessTop = false } = {}) => {
+		const section = getHashSection();
+
+		if (section) {
+			scrollToSection(section, { animate: false });
+			scheduleHashAnchorCorrection();
+			return;
+		}
+
+		if (scrollHashlessTop) jumpTo(0);
+	};
+
+	links.forEach((link) => {
+		link.addEventListener('click', (event) => {
+			const linkUrl = new URL(link.href, window.location.href);
+			if (linkUrl.pathname !== window.location.pathname) return;
+
+			const section = getSectionFromHash(linkUrl.hash);
+			if (!section) return;
+
+			const top = getSectionScrollTop(section);
+			if (top === undefined) return;
+
+			event.preventDefault();
+			const duration = getScrollDuration(top - window.scrollY);
+
+			setHash(linkUrl.hash);
+			closeMobileMenu();
+			if (event.detail > 0) link.blur();
+
+			scrollToSection(section, {
+				duration,
+				onComplete: scheduleHashAnchorCorrection,
+			});
+		});
+	});
+
+	setAnchorOffset();
+	requestAnimationFrame(() => syncToLocation());
+
+	if (siteTop && 'ResizeObserver' in window) {
+		new ResizeObserver(setAnchorOffset).observe(siteTop);
+	}
+
+	window.addEventListener('resize', setAnchorOffset);
+	window.addEventListener('load', scheduleHashAnchorCorrection);
+	window.addEventListener('hashchange', () => syncToLocation({ scrollHashlessTop: true }));
+	window.addEventListener('popstate', () => syncToLocation({ scrollHashlessTop: true }));
+
+	window.visualViewport?.addEventListener('resize', setAnchorOffset);
+</script>

package/src/components/SiteNavigation.astro

@@ -3,6 +3,8 @@ import projectConfig from '../../scripts/lib/project-config.mjs';
 import { withBasePath } from '../lib/basePath';
 import type { SectionNavigation } from '../lib/sectionContent';
 import type { SitePage } from '../lib/sitePages';
+import MobileSectionNavigationScript from './MobileSectionNavigationScript.astro';
+import NornaSmoothScrollScript from './NornaSmoothScrollScript.astro';
 
 type FrameColors = {
 	backgroundColor: string;
@@ -25,7 +27,6 @@ interface Props {
 }
 
 const { brandLabel, logo, currentPage, pageNavigation, frameColors } = Astro.props;
-const smoothScrollConfig = projectConfig.navigation.smoothScroll;
 const siteTopBackgroundColor = frameColors.backgroundColor === 'transparent'
 	? 'var(--color-page)'
 	: frameColors.backgroundColor;
@@ -35,53 +36,62 @@ const navigationStyle = [
 	...(logo?.height ? [`--site-brand-logo-height: ${logo.height}`] : []),
 ].join('; ');
 const showSiteNavigation = pageNavigation.length > 1;
+const showNavigationRow = showSiteNavigation || Boolean(logo);
 const homePage = pageNavigation.find(({ page }) => page.isHome)?.page ?? currentPage;
 const currentPageNavigation = pageNavigation.find(({ page }) => page.pathname === currentPage.pathname);
 const isCurrentPage = (page: SitePage) => page.pathname === currentPage.pathname;
 const pageHref = (page: SitePage) => withBasePath(projectConfig.site.basePath, page.pathname);
 const sectionHref = (page: SitePage, section: SectionNavigation) => `${pageHref(page)}#${section.id}`;
 const hasSectionMenu = (pageSections: SectionNavigation[]) => pageSections.length > 1;
+const showSinglePageSectionNavigation = Boolean(
+	!showSiteNavigation && currentPageNavigation && hasSectionMenu(currentPageNavigation.sections),
+);
+const hasCurrentPageSectionMenu = Boolean(
+	showSiteNavigation && currentPageNavigation && hasSectionMenu(currentPageNavigation.sections),
+);
+const useNornaSmoothScroll = projectConfig.navigation.scrollBehavior === 'norna-smooth';
 ---
 
 <a class="skip-link" href="#main-content">{projectConfig.locale.labels.skipToContent}</a>
 
 <header
 	class:list={['site-top', { 'site-top-has-site-nav': showSiteNavigation }]}
-	data-smooth-scroll={JSON.stringify(smoothScrollConfig)}
 	style={navigationStyle}
 >
-	{showSiteNavigation && (
+	{showNavigationRow && (
 		<div class="site-nav-row">
 			<a class="site-brand" href={pageHref(homePage)}>
 				{logo ? <img class="site-brand-logo" src={withBasePath(projectConfig.site.basePath, logo.src)} alt={logo.alt} /> : brandLabel}
 			</a>
 
-			<nav class="site-nav" aria-label={projectConfig.locale.labels.siteNavigation}>
-				<ul>
-					{pageNavigation.map(({ page, sections: pageSections }) => (
-						<li class:list={['site-nav-item', { 'site-nav-item-has-sections': hasSectionMenu(pageSections) }]}>
-							<a href={pageHref(page)} aria-current={isCurrentPage(page) ? 'page' : undefined}>
-								{page.navigation.label}
-							</a>
-							{hasSectionMenu(pageSections) && (
-								<div class="site-nav-submenu">
-									<nav aria-label={`${page.navigation.label} ${projectConfig.locale.labels.pageNavigation}`}>
-										<ul>
-											{pageSections.map((section) => (
-												<li>
-													<a href={sectionHref(page, section)}>{section.title}</a>
-												</li>
-											))}
-										</ul>
-									</nav>
-								</div>
-							)}
-						</li>
-					))}
-				</ul>
-			</nav>
-
-			<details class="mobile-nav-menu">
+			{showSiteNavigation && (
+				<nav class="site-nav" aria-label={projectConfig.locale.labels.siteNavigation}>
+					<ul>
+						{pageNavigation.map(({ page, sections: pageSections }) => (
+							<li class:list={['site-nav-item', { 'site-nav-item-has-sections': hasSectionMenu(pageSections) }]}>
+								<a href={pageHref(page)} aria-current={isCurrentPage(page) ? 'page' : undefined}>
+									{page.navigation.label}
+								</a>
+								{hasSectionMenu(pageSections) && (
+									<div class="site-nav-submenu">
+										<nav aria-label={`${page.navigation.label} ${projectConfig.locale.labels.pageNavigation}`}>
+											<ul>
+												{pageSections.map((section) => (
+													<li>
+														<a href={sectionHref(page, section)}>{section.title}</a>
+													</li>
+												))}
+											</ul>
+										</nav>
+									</div>
+								)}
+							</li>
+						))}
+					</ul>
+				</nav>
+			)}
+
+			{showSiteNavigation && <details class="mobile-nav-menu">
 				<summary>
 					<span>{currentPage.navigation.label}</span>
 				</summary>
@@ -99,13 +109,13 @@ const hasSectionMenu = (pageSections: SectionNavigation[]) => pageSections.lengt
 						</ul>
 					</nav>
 
-					{currentPageNavigation && hasSectionMenu(currentPageNavigation.sections) && (
+					{currentPageNavigation && hasCurrentPageSectionMenu && (
 						<nav class="mobile-page-nav" aria-label={projectConfig.locale.labels.pageNavigation}>
 							<h2>{projectConfig.locale.labels.pageNavigation}</h2>
 							<ul>
-								{currentPageNavigation.sections.map((section, index) => (
+								{currentPageNavigation.sections.map((section) => (
 									<li>
-										<a href={sectionHref(currentPage, section)} aria-current={index === 0 ? 'true' : undefined}>
+										<a href={sectionHref(currentPage, section)}>
 											{section.title}
 										</a>
 									</li>
@@ -114,317 +124,24 @@ const hasSectionMenu = (pageSections: SectionNavigation[]) => pageSections.lengt
 						</nav>
 					)}
 				</div>
-			</details>
+			</details>}
 		</div>
 	)}
 
-</header>
-
-<script>
-	const siteTop = document.querySelector('.site-top');
-	const sections = Array.from(document.querySelectorAll('.site-section'));
-	const links = Array.from(document.querySelectorAll('.site-nav-submenu a, .mobile-page-nav a'));
-	const mobileMenu = document.querySelector('.mobile-nav-menu');
-	const smoothScrollConfig = JSON.parse(siteTop?.getAttribute('data-smooth-scroll') ?? '{}');
-	const anchorPadding = 0;
-	const anchorCorrectionDelays = [120, 320, 700, 1_000, 2_000];
-	const reduceMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
-	const minimumScrollDuration = smoothScrollConfig.minimumDurationMs;
-	const maximumScrollDuration = smoothScrollConfig.maximumDurationMs;
-	const scrollDurationPerPixel = smoothScrollConfig.durationPerPixelMs;
-	const scrollInterruptEvents = ['wheel', 'touchstart'];
-	const scrollInterruptKeys = new Set(['ArrowDown', 'ArrowUp', 'End', 'Home', 'PageDown', 'PageUp', ' ']);
-	let activeScrollAnimation = null;
-	let activeSectionId = null;
-	let anchorCorrectionToken = 0;
-
-	if ('scrollRestoration' in history) {
-		history.scrollRestoration = 'manual';
-	}
-
-	const setAnchorOffset = () => {
-		if (!(siteTop instanceof HTMLElement)) return;
-
-		const offset = Math.ceil(siteTop.getBoundingClientRect().height + anchorPadding);
-		document.documentElement.style.setProperty('--site-top-anchor-offset', `${offset}px`);
-		return offset;
-	};
-
-	const getSectionFromHash = (hash) => {
-		const id = hash.replace(/^#/, '');
-		return sections.find((section) => section.id === id);
-	};
-
-	const getSectionHeading = (section) => section?.querySelector('h1, h2');
-
-	const cancelActiveScroll = () => {
-		if (activeScrollAnimation) {
-			activeScrollAnimation.cancel();
-			activeScrollAnimation = null;
-		}
-	};
-
-	const setActiveSection = (section) => {
-		if (!section) return;
-		if (activeSectionId === section.id) return;
-
-		activeSectionId = section.id;
-
-		links.forEach((link) => {
-			const linkUrl = new URL(link.href, window.location.href);
-			const isCurrentPageLink = linkUrl.pathname === window.location.pathname;
-			const isActive = isCurrentPageLink && linkUrl.hash === `#${section.id}`;
-			if (isActive) {
-				link.setAttribute('aria-current', 'true');
-			} else {
-				link.removeAttribute('aria-current');
-			}
-		});
-	};
-
-	const getHashSection = () => getSectionFromHash(window.location.hash);
-
-	const setHash = (targetHash) => {
-		if (window.location.hash !== targetHash) {
-			history.pushState(null, '', targetHash);
-		}
-	};
-
-	const closeMobileMenu = () => {
-		if (mobileMenu instanceof HTMLDetailsElement) {
-			mobileMenu.open = false;
-		}
-	};
-
-	const getSectionScrollTop = (section) => {
-		if (!(section instanceof HTMLElement)) return;
-		const heading = getSectionHeading(section);
-		if (!(heading instanceof HTMLElement)) return;
-
-		const offset = setAnchorOffset();
-		if (!offset) return;
-
-		return Math.max(0, heading.getBoundingClientRect().top + window.scrollY - offset);
-	};
-
-	const jumpTo = (top) => {
-		cancelActiveScroll();
-
-		const root = document.documentElement;
-		const previousScrollBehavior = root.style.scrollBehavior;
-		root.style.scrollBehavior = 'auto';
-		window.scrollTo(0, top);
-		root.style.scrollBehavior = previousScrollBehavior;
-	};
-
-	const getScrollDuration = (distance) => {
-		const distancePx = Math.abs(distance);
-
-		if (!smoothScrollConfig.enabled || reduceMotionQuery.matches || distancePx <= anchorPadding) return 0;
-
-		return Math.min(
-			maximumScrollDuration,
-			Math.max(minimumScrollDuration, distancePx * scrollDurationPerPixel),
-		);
-	};
-
-	const easeInOutCubic = (progress) => (
-		progress < 0.5
-			? 4 * progress * progress * progress
-			: 1 - Math.pow(-2 * progress + 2, 3) / 2
-	);
-
-	const animateScrollTo = (
-		target,
-		{ duration, onComplete } = {},
-	) => {
-		cancelActiveScroll();
-
-		const getTop = typeof target === 'function' ? target : () => target;
-		let latestTop = getTop();
-		if (latestTop === undefined) return 0;
-
-		const startY = window.scrollY;
-		const distance = latestTop - startY;
-		const scrollDuration = duration ?? getScrollDuration(distance);
-
-		if (scrollDuration <= 0) {
-			const top = getTop();
-			if (top === undefined) return 0;
-
-			jumpTo(top);
-			onComplete?.();
-			return 0;
-		}
-
-		const root = document.documentElement;
-		const previousScrollBehavior = root.style.scrollBehavior;
-		const startedAt = performance.now();
-		let frameId = 0;
-
-		const state = {
-			cancel: () => {},
-		};
-
-		const cleanup = () => {
-			scrollInterruptEvents.forEach((eventName) => {
-				window.removeEventListener(eventName, interruptScroll);
-			});
-			window.removeEventListener('keydown', interruptScrollKey);
-			root.style.scrollBehavior = previousScrollBehavior;
-
-			if (activeScrollAnimation === state) {
-				activeScrollAnimation = null;
-			}
-		};
-
-		const cancel = () => {
-			if (frameId) {
-				cancelAnimationFrame(frameId);
-			}
-
-			cleanup();
-		};
-
-		const interruptScroll = () => cancel();
-		const interruptScrollKey = (event) => {
-			if (scrollInterruptKeys.has(event.key)) {
-				interruptScroll();
-			}
-		};
-
-		const step = (now) => {
-			const elapsed = now - startedAt;
-			const progress = Math.min(1, elapsed / scrollDuration);
-			const top = getTop();
-			if (top !== undefined) {
-				latestTop = top;
-			}
-
-			const nextY = startY + (latestTop - startY) * easeInOutCubic(progress);
-
-			window.scrollTo(0, nextY);
-
-			if (progress >= 1) {
-				window.scrollTo(0, latestTop);
-				cleanup();
-				onComplete?.();
-				return;
-			}
-
-			frameId = requestAnimationFrame(step);
-		};
-
-		state.cancel = cancel;
-		activeScrollAnimation = state;
-		root.style.scrollBehavior = 'auto';
-		scrollInterruptEvents.forEach((eventName) => {
-			window.addEventListener(eventName, interruptScroll, { passive: true });
-		});
-		window.addEventListener('keydown', interruptScrollKey);
-		frameId = requestAnimationFrame(step);
-
-		return scrollDuration;
-	};
-
-	const scrollToSection = (section, { behavior = 'smooth', duration, onComplete } = {}) => {
-		const top = getSectionScrollTop(section);
-		if (top === undefined) return 0;
-
-		const scrollDuration = behavior === 'smooth'
-			? animateScrollTo(() => getSectionScrollTop(section), { duration, onComplete })
-			: (jumpTo(top), onComplete?.(), 0);
-
-		setActiveSection(section);
-
-		return scrollDuration;
-	};
-
-	const updateAnchorOffset = () => {
-		setAnchorOffset();
-	};
-
-	const correctCurrentHashAnchor = () => {
-		if (activeScrollAnimation) return;
-
-		const section = getHashSection();
-		if (section instanceof HTMLElement) {
-			scrollToSection(section, { behavior: 'auto' });
-		}
-	};
-
-	const scheduleHashAnchorCorrection = () => {
-		if (!window.location.hash) return;
-
-		anchorCorrectionToken += 1;
-		const token = anchorCorrectionToken;
-
-		anchorCorrectionDelays.forEach((delay) => {
-			window.setTimeout(() => {
-				if (token === anchorCorrectionToken) {
-					requestAnimationFrame(correctCurrentHashAnchor);
-				}
-			}, delay);
-		});
-	};
-
-	const syncToLocation = ({ behavior = 'auto', scrollHashlessTop = false } = {}) => {
-		const section = getHashSection();
-
-		if (section instanceof HTMLElement) {
-			scrollToSection(section, { behavior });
-			scheduleHashAnchorCorrection();
-			return;
-		}
-
-		if (scrollHashlessTop) {
-			jumpTo(0);
-		}
-
-		setActiveSection(sections[0]);
-	};
-
-	links.forEach((link) => {
-		link.addEventListener('click', (event) => {
-			const linkUrl = new URL(link.href, window.location.href);
-			if (linkUrl.pathname !== window.location.pathname) return;
-
-			const section = getSectionFromHash(linkUrl.hash);
-			if (!(section instanceof HTMLElement)) return;
-
-			const top = getSectionScrollTop(section);
-			if (top === undefined) return;
-
-			event.preventDefault();
-
-			const targetHash = linkUrl.hash;
-			const duration = getScrollDuration(top - window.scrollY);
-
-			setHash(targetHash);
-			setActiveSection(section);
-			closeMobileMenu();
-
-			scrollToSection(section, {
-				behavior: 'smooth',
-				duration,
-				onComplete: scheduleHashAnchorCorrection,
-			});
-		});
-	});
-
-	updateAnchorOffset();
-	requestAnimationFrame(() => syncToLocation({ behavior: 'auto' }));
-
-	if (siteTop instanceof HTMLElement && 'ResizeObserver' in window) {
-		new ResizeObserver(updateAnchorOffset).observe(siteTop);
-	}
+	{showSinglePageSectionNavigation && currentPageNavigation && (
+		<nav class="page-nav" aria-label={projectConfig.locale.labels.pageNavigation}>
+			<ul>
+				{currentPageNavigation.sections.map((section) => (
+					<li>
+						<a href={`#${section.id}`}>{section.title}</a>
+					</li>
+				))}
+			</ul>
+		</nav>
+	)}
 
-	window.addEventListener('resize', updateAnchorOffset);
-	window.addEventListener('load', scheduleHashAnchorCorrection);
-	window.addEventListener('hashchange', () => syncToLocation({ behavior: 'auto', scrollHashlessTop: true }));
-	window.addEventListener('popstate', () => syncToLocation({ behavior: 'auto', scrollHashlessTop: true }));
+</header>
 
-	if (window.visualViewport) {
-		window.visualViewport.addEventListener('resize', updateAnchorOffset);
-	}
-</script>
+{useNornaSmoothScroll
+	? <NornaSmoothScrollScript />
+	: hasCurrentPageSectionMenu && <MobileSectionNavigationScript />}