randomchars42/index.html

## index.html
<<!DOCTYPE html>
<html lang="en-GB">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="color-scheme" content="dark light">
    <title data-i18n-key="page_title">DEMO! Scroll Navigation</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="icon" href="icon.svg" />
    <script type="module" src="js/scrollnav.js"></script>
</head>
<body>
    <noscript data-i18n-key="page_noscript">To use this site, please enable JavaScript.</noscript>
    <main>
        <h1 id="winnie-the-pooh">WINNIE-THE-POOH</h1>
        <p>Taken from: <a href="https://www.gutenberg.org/files/67098/67098-h/67098-h.htm">The Project Gutenberg eBook of Winnie-the-Pooh, by A. A. Milne</a></p>
        <h2 id="chapter-1">CHAPTER 1 - IN WHICH WE ARE INTRODUCED TO WINNIE-THE-POOH AND SOME BEES, AND THE STORIES BEGIN</h2>
        <p>Here is Edward Bear, coming downstairs now, bump, bump, bump, on the back of his head, behind Christopher Robin. It is, as far as he knows, the only way of coming downstairs, but sometimes he feels that there really is another way, if only he could stop bumping for a moment and think of it. And then he feels that perhaps there isn't. Anyhow, here he is at the bottom, and ready to be introduced to you. Winnie-the-Pooh.</p>
<p>When I first heard his name, I said, just as you are going to say, "But I thought he was a boy?"</p>
<p>"So did I," said Christopher Robin.</p>
<p>"Then you can't call him Winnie?"</p>
<p>"I don't."</p>
<p>"But you said——"</p>
<p>"He's Winnie-ther-Pooh. Don't you know what 'ther' means?"</p>
<p>"Ah, yes, now I do," I said quickly; and I hope you do too, because it is all the explanation you are going to get.</p>
<p>Sometimes Winnie-the-Pooh likes a game of some sort when he comes downstairs, and sometimes he likes to sit quietly in front of the fire and listen to a story. This evening——</p>
<p>"What about a story?" said Christopher Robin.</p>
<p>"What about a story?" I said.</p>
<p>"Could you very sweetly tell Winnie-the-Pooh one?"</p>
<p>"I suppose I could," I said. "What sort of stories does he like?"</p>
<p>"About himself. Because he's that sort of Bear."</p>
<p>"Oh, I see."</p>
<p>"So could you very sweetly?"</p>
<p>"I'll try," I said.</p>
<p>So I tried.</p>
<p>[...]</p>
        <h2 id="chapter-2">CHAPTER 2 - IN WHICH POOH GOES VISITING AND GETS INTO A TIGHT PLACE</h2>
        <p>Edward Bear, known to his friends as Winnie-the-Pooh, or Pooh for short, was walking through the forest one day, humming proudly to himself. He had made up a little hum that very morning, as he was doing his Stoutness Exercises in front of the glass: Tra-la-la, tra-la-la, as he stretched up as high as he could go, and then Tra-la-la, tra-la—oh, help!—la, as he tried to reach his toes. After breakfast he had said it over and over to himself until he had learnt it off by heart, and now he was humming it right through, properly. It went like this:</p>
<p>Tra-la-la, tra-la-la,</p>
<p>Tra-la-la, tra-la-la,</p>
<p>Rum-tum-tiddle-um-tum.</p>
<p>Tiddle-iddle, tiddle-iddle,</p>
<p>Tiddle-iddle, tiddle-iddle,</p>
<p>Rum-tum-tum-tiddle-um.</p>
<p>[...]</p>
        <h2 id="chapter-3">CHAPTER 3 - IN WHICH POOH AND PIGLET GO HUNTING AND NEARLY CATCH A WOOZLE</h2>
        <p>The Piglet lived in a very grand house in the middle of a beech-tree, and the beech-tree was in the middle of the forest, and the Piglet lived in the middle of the house. Next to his house was a piece of broken board which had: "TRESPASSERS W" on it. When Christopher Robin asked the Piglet what it meant, he said it was his grandfather's name, and had been in the family for a long time, Christopher Robin said you couldn't be called Trespassers W, and Piglet said yes, you could, because his grandfather was, and it was short for Trespassers Will, which was short for Trespassers William. And his grandfather had had two names in case he lost one—Trespassers after an uncle, and William after Trespassers.</p>
        <p>"I've got two names," said Christopher Robin carelessly.</p>
<p>"Well, there you are, that proves it," said Piglet.</p>
<p>One fine winter's day when Piglet was brushing away the snow in front of his house, he happened to look up, and there was Winnie-the-Pooh. Pooh was walking round and round in a circle, thinking of something else, and when Piglet called to him, he just went on walking.</p>
<p>"Hallo!" said Piglet, "what are you doing?"</p>
<p>"Hunting," said Pooh.</p>
<p>"Hunting what?"</p>
<p>"Tracking something," said Winnie-the-Pooh very mysteriously.</p>
<p>"Tracking what?" said Piglet, coming closer.</p>
<p>"That's just what I ask myself. I ask myself, What?"</p>
<p>"What do you think you'll answer?"</p>
<p>"I shall have to wait until I catch up with it," said Winnie-the-Pooh. "Now, look there." He pointed to the ground in front of him. "What do you see there?"</p>
<p>[...]</p>
        <h2 id="chapter-4">CHAPTER 4 - IN WHICH EEYORE LOSES A TAIL AND POOH FINDS ONE</h2>
        <p>The Old Grey Donkey, Eeyore, stood by himself in a thistly corner of the forest, his front feet well apart, his head on one side, and thought about things. Sometimes he thought sadly to himself, "Why?" and sometimes he thought, "Wherefore?" and sometimes he thought, "Inasmuch as which?"—and sometimes he didn't quite know what he was thinking about. So when Winnie-the-Pooh came stumping along, Eeyore was very glad to be able to stop thinking for a little, in order to say "How do you do?" in a gloomy manner to him.</p>
<p>"And how are you?" said Winnie-the-Pooh.</p>
<p>Eeyore shook his head from side to side.</p>
<p>"Not very how," he said. "I don't seem to have felt at all how for a long time."</p>
<p>"Dear, dear," said Pooh, "I'm sorry about that. Let's have a look at you."</p>
<p>So Eeyore stood there, gazing sadly at the ground, and Winnie-the-Pooh walked all round him once.</p>
<p>"Why, what's happened to your tail?" he said in surprise.</p>
<p>"What has happened to it?" said Eeyore.</p>
<p>"It isn't there!"</p>
<p>"Are you sure?"</p>
<p>"Well, either a tail is there or it isn't there. You can't make a mistake about it. And yours isn't there!"</p>
<p>"Then what is?"</p>
<p>"Nothing."</p>
<p>[...]</p>
        <h2 id="chapter-5">CHAPTER 5 - IN WHICH PIGLET MEETS A HEFFALUMP</h2>
<p>One day, when Christopher Robin and Winnie-the-Pooh and Piglet were all talking together, Christopher Robin finished the mouthful he was eating and said carelessly: "I saw a Heffalump to-day, Piglet."</p>
<p>"What was it doing?" asked Piglet.</p>
<p>"Just lumping along," said Christopher Robin. "I don't think it saw me."</p>
<p>"I saw one once," said Piglet. "At least, I think I did," he said. "Only perhaps it wasn't."</p>
<p>"So did I," said Pooh, wondering what a Heffalump was like.</p>
<p>"You don't often see them," said Christopher Robin carelessly.</p>
<p>"Not now," said Piglet.</p>
<p>"Not at this time of year," said Pooh.</p>
<p>[...]</p>
    </main>
    <div id="NavModal" class="hidden">
        <div id="Nav">
            <a href="#winnie-the-pooh" class="nav_link">WINNIE-THE-POOH</a>
            <a href="#chapter-1" class="nav_link">Chapter 1</a>
            <a href="#chapter-2" class="nav_link">Chapter 2</a>
            <a href="#chapter-3" class="nav_link">Chapter 3</a>
            <a href="#chapter-4" class="nav_link">Chapter 4</a>
            <a href="#chapter-5" class="nav_link">Chapter 5</a>
        </div>
    </div>
</body>
</html>

## scrollnav.js
/**
 * scrollnav.js
 */
// get the scroll position
// if you scroll inside another element use
// document.getElementById('ELEMENT').scrollTop;
let scrollPosition = window.scrollY;

export const init = () => {
    console.log('initiating ...');

    window.onscroll = () => {
        // get the current position
        let currentPosition = window.scrollY;
        // calculate the distance using an absolute number
        // allowing the user to acivate the menu by scrolling up
        // or down
        //
        // this will open the modal while the scrolling continues
        // imagine a mighty swipe up with your finger on a tablet:
        // the modal will open, the scroll continues and the
        // distance will trigger a second modal
        // -> to prevent this we will set the `scrollPosition` to `-1`
        // and thus deactivate the mechanism
        // note: in a previous version I set it to `-1` but appearantly
        // scrollTop can be negative on iOS / Apple devices
        if (scrollPosition !== null &&
            Math.abs(scrollPosition - currentPosition) > 650) {
            scrollPosition = null;
            showNav();
        }
        setTimeout(() => {
            // only update the position while the modal is not visible
            // or else two or more modals could be triggered
            if (scrollPosition === null) {
                return;
            }
            // get a "fresh" position, don't use the one from 250 ms ago
            scrollPosition = currentPosition;
        }, 250);
    };

    document.querySelectorAll('.nav_link').forEach((link) => {
        link.onclick = (event) => {
            // jump to the target manually
            // or else `hideNav()` would be triggered first and re-enable
            // the scroll menu, then the link would lead the site to jump to
            // it's target triggering a scroll event - in turn triggering
            // the menu...
            scrollPosition = null;
            const id = new URL(link.href).hash.substring(1);
            document.getElementById(id).scrollIntoView();
            hideNav();
            // re-enable the mechanism for the scroll navigation
            scrollPosition = window.scrollY;
            event.preventDefault();
        };
    });

    // hide the modal if the user clicks anywhere else on the screen
    document.getElementById('NavModal').onclick = hideNav;

    console.log('UI initiated.')
}

const showNav = () => {
    document.getElementById('NavModal').classList.remove('hidden');
};

const hideNav = () => {
    document.getElementById('NavModal').classList.add('hidden');
};

init();

## scrollnav.ts
/**
 * scrollnav.ts
 */
// get the scroll position
// if you scroll inside another element use
// document.getElementById('ELEMENT').scrollTop;
let scrollPosition: number|null = window.scrollY;

export const init = (): void => {
    console.log('initiating ...');

    window.onscroll = (): void => {
        // get the current position
        let currentPosition: number = window.scrollY;
        // calculate the distance using an absolute number
        // allowing the user to acivate the menu by scrolling up
        // or down
        //
        // this will open the modal while the scrolling continues
        // imagine a mighty swipe up with your finger on a tablet:
        // the modal will open, the scroll continues and the
        // distance will trigger a second modal
        // -> to prevent this we will set the `scrollPosition` to `null`
        // and thus deactivate the mechanism
        // note: in a previous version I set it to `-1` but apparantly
        // scrollTop can be negative on iOS / Apple devices
        if (scrollPosition !== null &&
            Math.abs(scrollPosition - currentPosition) > 650) {
            scrollPosition = null;
            showNav();
        }
        setTimeout((): void => {
            // only update the position while the modal is not visible
            // or else two or more modals could be triggered
            if (scrollPosition === null) {
                return;
            }
            // get a "fresh" position, don't use the one from 250 ms ago
            scrollPosition = window.scrollY;
        }, 250);
    };

    document.querySelectorAll('.nav_link').forEach((link: Element): void => {
        link.onclick = (event: Event): void => {
            // jump to the target manually
            // or else `hideNav()` would be triggered first and re-enable
            // the scroll menu, then the link would lead the site to jump to
            // it's target triggering a scroll event - in turn triggering
            // the menu...
            scrollPosition = null;
            hideNav();
            const id: string = new URL(link.href).hash.substring(1);
            document.getElementById(id).scrollIntoView();
            // re-enable the mechanism for the scroll navigation
            scrollPosition = window.scrollY;
            event.preventDefault();
        };
    });

    // hide the modal if the user clicks anywhere else on the screen
    document.getElementById('NavModal')!.onclick = hideNav;

    console.log('UI initiated.')
}

const showNav = (): void => {
    document.getElementById('NavModal')!.classList.remove('hidden');
};

const hideNav = (): void => {
    document.getElementById('NavModal')!.classList.add('hidden');
};

init();

## style.css
/* style.css */

main {
    width: 40rem;
    margin: auto;
}

#NavModal {
    position: fixed;
    z-index: 1000000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);

    display: flex;
    justify-content: center;
    align-items: center;
}

#Nav {
    background-color: #FFFFFF;
    padding: 2rem;
    width: 40%;
}

#Nav a {
    display: block;
}

.hidden {
    display: none !important;
}
	<<!DOCTYPE html>
	<html lang="en-GB">
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1" />
	<meta name="color-scheme" content="dark light">
	<title data-i18n-key="page_title">DEMO! Scroll Navigation</title>
	<link rel="stylesheet" href="style.css" />
	<link rel="icon" href="icon.svg" />
	<script type="module" src="js/scrollnav.js"></script>
	</head>
	<body>
	<noscript data-i18n-key="page_noscript">To use this site, please enable JavaScript.</noscript>
	<main>
	<h1 id="winnie-the-pooh">WINNIE-THE-POOH</h1>
	<p>Taken from: <a href="https://www.gutenberg.org/files/67098/67098-h/67098-h.htm">The Project Gutenberg eBook of Winnie-the-Pooh, by A. A. Milne</a></p>
	<h2 id="chapter-1">CHAPTER 1 - IN WHICH WE ARE INTRODUCED TO WINNIE-THE-POOH AND SOME BEES, AND THE STORIES BEGIN</h2>
	<p>Here is Edward Bear, coming downstairs now, bump, bump, bump, on the back of his head, behind Christopher Robin. It is, as far as he knows, the only way of coming downstairs, but sometimes he feels that there really is another way, if only he could stop bumping for a moment and think of it. And then he feels that perhaps there isn't. Anyhow, here he is at the bottom, and ready to be introduced to you. Winnie-the-Pooh.</p>
	<p>When I first heard his name, I said, just as you are going to say, "But I thought he was a boy?"</p>
	<p>"So did I," said Christopher Robin.</p>
	<p>"Then you can't call him Winnie?"</p>
	<p>"I don't."</p>
	<p>"But you said——"</p>
	<p>"He's Winnie-ther-Pooh. Don't you know what 'ther' means?"</p>
	<p>"Ah, yes, now I do," I said quickly; and I hope you do too, because it is all the explanation you are going to get.</p>
	<p>Sometimes Winnie-the-Pooh likes a game of some sort when he comes downstairs, and sometimes he likes to sit quietly in front of the fire and listen to a story. This evening——</p>
	<p>"What about a story?" said Christopher Robin.</p>
	<p>"What about a story?" I said.</p>
	<p>"Could you very sweetly tell Winnie-the-Pooh one?"</p>
	<p>"I suppose I could," I said. "What sort of stories does he like?"</p>
	<p>"About himself. Because he's that sort of Bear."</p>
	<p>"Oh, I see."</p>
	<p>"So could you very sweetly?"</p>
	<p>"I'll try," I said.</p>
	<p>So I tried.</p>
	<p>[...]</p>
	<h2 id="chapter-2">CHAPTER 2 - IN WHICH POOH GOES VISITING AND GETS INTO A TIGHT PLACE</h2>
	<p>Edward Bear, known to his friends as Winnie-the-Pooh, or Pooh for short, was walking through the forest one day, humming proudly to himself. He had made up a little hum that very morning, as he was doing his Stoutness Exercises in front of the glass: Tra-la-la, tra-la-la, as he stretched up as high as he could go, and then Tra-la-la, tra-la—oh, help!—la, as he tried to reach his toes. After breakfast he had said it over and over to himself until he had learnt it off by heart, and now he was humming it right through, properly. It went like this:</p>
	<p>Tra-la-la, tra-la-la,</p>
	<p>Tra-la-la, tra-la-la,</p>
	<p>Rum-tum-tiddle-um-tum.</p>
	<p>Tiddle-iddle, tiddle-iddle,</p>
	<p>Tiddle-iddle, tiddle-iddle,</p>
	<p>Rum-tum-tum-tiddle-um.</p>
	<p>[...]</p>
	<h2 id="chapter-3">CHAPTER 3 - IN WHICH POOH AND PIGLET GO HUNTING AND NEARLY CATCH A WOOZLE</h2>
	<p>The Piglet lived in a very grand house in the middle of a beech-tree, and the beech-tree was in the middle of the forest, and the Piglet lived in the middle of the house. Next to his house was a piece of broken board which had: "TRESPASSERS W" on it. When Christopher Robin asked the Piglet what it meant, he said it was his grandfather's name, and had been in the family for a long time, Christopher Robin said you couldn't be called Trespassers W, and Piglet said yes, you could, because his grandfather was, and it was short for Trespassers Will, which was short for Trespassers William. And his grandfather had had two names in case he lost one—Trespassers after an uncle, and William after Trespassers.</p>
	<p>"I've got two names," said Christopher Robin carelessly.</p>
	<p>"Well, there you are, that proves it," said Piglet.</p>
	<p>One fine winter's day when Piglet was brushing away the snow in front of his house, he happened to look up, and there was Winnie-the-Pooh. Pooh was walking round and round in a circle, thinking of something else, and when Piglet called to him, he just went on walking.</p>
	<p>"Hallo!" said Piglet, "what are you doing?"</p>
	<p>"Hunting," said Pooh.</p>
	<p>"Hunting what?"</p>
	<p>"Tracking something," said Winnie-the-Pooh very mysteriously.</p>
	<p>"Tracking what?" said Piglet, coming closer.</p>
	<p>"That's just what I ask myself. I ask myself, What?"</p>
	<p>"What do you think you'll answer?"</p>
	<p>"I shall have to wait until I catch up with it," said Winnie-the-Pooh. "Now, look there." He pointed to the ground in front of him. "What do you see there?"</p>
	<p>[...]</p>
	<h2 id="chapter-4">CHAPTER 4 - IN WHICH EEYORE LOSES A TAIL AND POOH FINDS ONE</h2>
	<p>The Old Grey Donkey, Eeyore, stood by himself in a thistly corner of the forest, his front feet well apart, his head on one side, and thought about things. Sometimes he thought sadly to himself, "Why?" and sometimes he thought, "Wherefore?" and sometimes he thought, "Inasmuch as which?"—and sometimes he didn't quite know what he was thinking about. So when Winnie-the-Pooh came stumping along, Eeyore was very glad to be able to stop thinking for a little, in order to say "How do you do?" in a gloomy manner to him.</p>
	<p>"And how are you?" said Winnie-the-Pooh.</p>
	<p>Eeyore shook his head from side to side.</p>
	<p>"Not very how," he said. "I don't seem to have felt at all how for a long time."</p>
	<p>"Dear, dear," said Pooh, "I'm sorry about that. Let's have a look at you."</p>
	<p>So Eeyore stood there, gazing sadly at the ground, and Winnie-the-Pooh walked all round him once.</p>
	<p>"Why, what's happened to your tail?" he said in surprise.</p>
	<p>"What has happened to it?" said Eeyore.</p>
	<p>"It isn't there!"</p>
	<p>"Are you sure?"</p>
	<p>"Well, either a tail is there or it isn't there. You can't make a mistake about it. And yours isn't there!"</p>
	<p>"Then what is?"</p>
	<p>"Nothing."</p>
	<p>[...]</p>
	<h2 id="chapter-5">CHAPTER 5 - IN WHICH PIGLET MEETS A HEFFALUMP</h2>
	<p>One day, when Christopher Robin and Winnie-the-Pooh and Piglet were all talking together, Christopher Robin finished the mouthful he was eating and said carelessly: "I saw a Heffalump to-day, Piglet."</p>
	<p>"What was it doing?" asked Piglet.</p>
	<p>"Just lumping along," said Christopher Robin. "I don't think it saw me."</p>
	<p>"I saw one once," said Piglet. "At least, I think I did," he said. "Only perhaps it wasn't."</p>
	<p>"So did I," said Pooh, wondering what a Heffalump was like.</p>
	<p>"You don't often see them," said Christopher Robin carelessly.</p>
	<p>"Not now," said Piglet.</p>
	<p>"Not at this time of year," said Pooh.</p>
	<p>[...]</p>
	</main>
	<div id="NavModal" class="hidden">
	<div id="Nav">
	<a href="#winnie-the-pooh" class="nav_link">WINNIE-THE-POOH</a>
	<a href="#chapter-1" class="nav_link">Chapter 1</a>
	<a href="#chapter-2" class="nav_link">Chapter 2</a>
	<a href="#chapter-3" class="nav_link">Chapter 3</a>
	<a href="#chapter-4" class="nav_link">Chapter 4</a>
	<a href="#chapter-5" class="nav_link">Chapter 5</a>
	</div>
	</div>
	</body>
	</html>
	/**
	* scrollnav.js
	*/
	// get the scroll position
	// if you scroll inside another element use
	// document.getElementById('ELEMENT').scrollTop;
	let scrollPosition = window.scrollY;

	export const init = () => {
	console.log('initiating ...');

	window.onscroll = () => {
	// get the current position
	let currentPosition = window.scrollY;
	// calculate the distance using an absolute number
	// allowing the user to acivate the menu by scrolling up
	// or down
	//
	// this will open the modal while the scrolling continues
	// imagine a mighty swipe up with your finger on a tablet:
	// the modal will open, the scroll continues and the
	// distance will trigger a second modal
	// -> to prevent this we will set the `scrollPosition` to `-1`
	// and thus deactivate the mechanism
	// note: in a previous version I set it to `-1` but appearantly
	// scrollTop can be negative on iOS / Apple devices
	if (scrollPosition !== null &&
	Math.abs(scrollPosition - currentPosition) > 650) {
	scrollPosition = null;
	showNav();
	}
	setTimeout(() => {
	// only update the position while the modal is not visible
	// or else two or more modals could be triggered
	if (scrollPosition === null) {
	return;
	}
	// get a "fresh" position, don't use the one from 250 ms ago
	scrollPosition = currentPosition;
	}, 250);
	};

	document.querySelectorAll('.nav_link').forEach((link) => {
	link.onclick = (event) => {
	// jump to the target manually
	// or else `hideNav()` would be triggered first and re-enable
	// the scroll menu, then the link would lead the site to jump to
	// it's target triggering a scroll event - in turn triggering
	// the menu...
	scrollPosition = null;
	const id = new URL(link.href).hash.substring(1);
	document.getElementById(id).scrollIntoView();
	hideNav();
	// re-enable the mechanism for the scroll navigation
	scrollPosition = window.scrollY;
	event.preventDefault();
	};
	});

	// hide the modal if the user clicks anywhere else on the screen
	document.getElementById('NavModal').onclick = hideNav;

	console.log('UI initiated.')
	}

	const showNav = () => {
	document.getElementById('NavModal').classList.remove('hidden');
	};

	const hideNav = () => {
	document.getElementById('NavModal').classList.add('hidden');
	};

	init();
	/**
	* scrollnav.ts
	*/
	// get the scroll position
	// if you scroll inside another element use
	// document.getElementById('ELEMENT').scrollTop;
	let scrollPosition: number\|null = window.scrollY;

	export const init = (): void => {
	console.log('initiating ...');

	window.onscroll = (): void => {
	// get the current position
	let currentPosition: number = window.scrollY;
	// calculate the distance using an absolute number
	// allowing the user to acivate the menu by scrolling up
	// or down
	//
	// this will open the modal while the scrolling continues
	// imagine a mighty swipe up with your finger on a tablet:
	// the modal will open, the scroll continues and the
	// distance will trigger a second modal
	// -> to prevent this we will set the `scrollPosition` to `null`
	// and thus deactivate the mechanism
	// note: in a previous version I set it to `-1` but apparantly
	// scrollTop can be negative on iOS / Apple devices
	if (scrollPosition !== null &&
	Math.abs(scrollPosition - currentPosition) > 650) {
	scrollPosition = null;
	showNav();
	}
	setTimeout((): void => {
	// only update the position while the modal is not visible
	// or else two or more modals could be triggered
	if (scrollPosition === null) {
	return;
	}
	// get a "fresh" position, don't use the one from 250 ms ago
	scrollPosition = window.scrollY;
	}, 250);
	};

	document.querySelectorAll('.nav_link').forEach((link: Element): void => {
	link.onclick = (event: Event): void => {
	// jump to the target manually
	// or else `hideNav()` would be triggered first and re-enable
	// the scroll menu, then the link would lead the site to jump to
	// it's target triggering a scroll event - in turn triggering
	// the menu...
	scrollPosition = null;
	hideNav();
	const id: string = new URL(link.href).hash.substring(1);
	document.getElementById(id).scrollIntoView();
	// re-enable the mechanism for the scroll navigation
	scrollPosition = window.scrollY;
	event.preventDefault();
	};
	});

	// hide the modal if the user clicks anywhere else on the screen
	document.getElementById('NavModal')!.onclick = hideNav;

	console.log('UI initiated.')
	}

	const showNav = (): void => {
	document.getElementById('NavModal')!.classList.remove('hidden');
	};

	const hideNav = (): void => {
	document.getElementById('NavModal')!.classList.add('hidden');
	};

	init();
	/* style.css */

	main {
	width: 40rem;
	margin: auto;
	}

	#NavModal {
	position: fixed;
	z-index: 1000000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.4);

	display: flex;
	justify-content: center;
	align-items: center;
	}

	#Nav {
	background-color: #FFFFFF;
	padding: 2rem;
	width: 40%;
	}

	#Nav a {
	display: block;
	}

	.hidden {
	display: none !important;
	}