From 456314996b4ec4055108ed7c6ec67683e4570ae9 Mon Sep 17 00:00:00 2001
From: Josh Collinsworth <joshuajcollinsworth@gmail.com>
Date: Thu, 22 Feb 2024 10:11:51 -0600
Subject: [PATCH] Re-add nav menu to footer

---
 src/lib/components/Footer.svelte   | 11 ++++++-----
 src/lib/components/MainNav.svelte  | 11 ++---------
 src/lib/components/NavItems.svelte | 12 ++++++++++++
 static/css/header-and-footer.css   | 28 +++++++++++++---------------
 4 files changed, 33 insertions(+), 29 deletions(-)
 create mode 100644 src/lib/components/NavItems.svelte

diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 41bfa0c..dc53781 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -1,11 +1,9 @@
 <script>
-	import MainNav from './MainNav.svelte'
-	import { siteAuthor } from '$lib/config'
+	import { siteAuthor } from '$lib/config';
+	import NavItems from './NavItems.svelte';
 </script>
 
 <footer>
-	<MainNav />
-
 	<nav>
 		<ul>
 			<li>
@@ -16,6 +14,9 @@
 			</li>
 		</ul>
 	</nav>
+	<nav>
+		<NavItems />
+	</nav>
 
 	<p>&copy;{new Date().getFullYear()} {siteAuthor}</p>
-</footer>
\ No newline at end of file
+</footer>
diff --git a/src/lib/components/MainNav.svelte b/src/lib/components/MainNav.svelte
index db96ef5..c154216 100644
--- a/src/lib/components/MainNav.svelte
+++ b/src/lib/components/MainNav.svelte
@@ -1,18 +1,11 @@
 <script>
-	import { navItems } from '$lib/config';
 	import { isMenuOpen } from '../assets/js/store';
-	import NavItem from './NavItem.svelte';
 	import HamburgerMenuButton from './HamburgerMenuButton.svelte';
+	import NavItems from './NavItems.svelte';
 </script>
 
 <!-- Contents of this file will be used in the header and the responsive hamburger menu. -->
 <nav class="main-nav" class:open={$isMenuOpen}>
-	<ul>
-		{#each navItems as page}
-			<NavItem href={page.route}>
-				{page.title}
-			</NavItem>
-		{/each}
-	</ul>
+	<NavItems />
 	<HamburgerMenuButton closeOnly="true" />
 </nav>
diff --git a/src/lib/components/NavItems.svelte b/src/lib/components/NavItems.svelte
new file mode 100644
index 0000000..bcb338d
--- /dev/null
+++ b/src/lib/components/NavItems.svelte
@@ -0,0 +1,12 @@
+<script>
+	import { navItems } from '$lib/config';
+	import NavItem from './NavItem.svelte';
+</script>
+
+<ul>
+	{#each navItems as page}
+		<NavItem href={page.route}>
+			{page.title}
+		</NavItem>
+	{/each}
+</ul>
diff --git a/static/css/header-and-footer.css b/static/css/header-and-footer.css
index 6fdea1d..eb76e68 100644
--- a/static/css/header-and-footer.css
+++ b/static/css/header-and-footer.css
@@ -40,7 +40,6 @@ header {
 
 @media (min-width: 48rem) {
 	header {
-
 		justify-content: center;
 		flex-wrap: wrap;
 		height: auto;
@@ -75,7 +74,6 @@ header {
 
 @media (min-width: 48rem) {
 	.menu-button {
-
 		display: none;
 	}
 }
@@ -96,7 +94,7 @@ header {
 	align-items: center;
 	background: var(--darker);
 	color: var(--paper);
-	transition: all .25s cubic-bezier(0.785, 0.135, 0.15, 0.86);
+	transition: all 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86);
 }
 
 .main-nav.open {
@@ -109,7 +107,7 @@ header {
 .main-nav.open li {
 	--delay: 0.1s;
 	opacity: 0;
-	animation: slide_in_left .2s cubic-bezier(0.215, 0.610, 0.355, 1) forwards;
+	animation: slide_in_left 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
 }
 
 .main-nav a {
@@ -117,35 +115,35 @@ header {
 }
 
 .main-nav li:nth-of-type(1) {
-	animation-delay: calc(var(--delay) * 1)
+	animation-delay: calc(var(--delay) * 1);
 }
 
 .main-nav li:nth-of-type(2) {
-	animation-delay: calc(var(--delay) * 2)
+	animation-delay: calc(var(--delay) * 2);
 }
 
 .main-nav li:nth-of-type(3) {
-	animation-delay: calc(var(--delay) * 3)
+	animation-delay: calc(var(--delay) * 3);
 }
 
 .main-nav li:nth-of-type(4) {
-	animation-delay: calc(var(--delay) * 4)
+	animation-delay: calc(var(--delay) * 4);
 }
 
 .main-nav li:nth-of-type(5) {
-	animation-delay: calc(var(--delay) * 5)
+	animation-delay: calc(var(--delay) * 5);
 }
 
 .main-nav li:nth-of-type(6) {
-	animation-delay: calc(var(--delay) * 6)
+	animation-delay: calc(var(--delay) * 6);
 }
 
 .main-nav li:nth-of-type(7) {
-	animation-delay: calc(var(--delay) * 7)
+	animation-delay: calc(var(--delay) * 7);
 }
 
 .main-nav li:nth-of-type(8) {
-	animation-delay: calc(var(--delay) * 8)
+	animation-delay: calc(var(--delay) * 8);
 }
 
 .menu-button {
@@ -159,7 +157,7 @@ header {
 	display: block;
 	width: 100%;
 	text-align: center;
-	margin-bottom: calc(.2rem + 2vh);
+	margin-bottom: calc(0.2rem + 2vh);
 }
 
 @media (min-width: 48rem) {
@@ -233,7 +231,7 @@ footer ul {
 	display: initial;
 }
 
-footer ul li+li {
+footer ul li + li {
 	margin-top: 0.5rem;
 }
 
@@ -241,7 +239,7 @@ footer ul li+li {
 	position: absolute;
 	top: -6rem;
 	left: 0;
-	padding: .5em;
+	padding: 0.5em;
 	opacity: 0;
 	display: flex;
 	justify-content: center;