Add mobile theme switcher (#48)

* Add slideInFromBottom and slideOutToBottom animations for mobile modal

* Refactor modal initialization and update theme switcher buttons

* Update mobile navigation styles

* Update animation curve in modal component

* Update server options and modal animation

* Remove unnecessary server options from .eleventy.js

src/assets/scripts/modules/modal.js

@@ -1,13 +1,13 @@
-function initializeModal(modalIdentifier) {
+function initializeModal(buttonIdentifier, modalIdentifier) {
+	const button = document.querySelector(`.${buttonIdentifier}`)
 	const modal = document.querySelector(`.${modalIdentifier}`)
-	const button = document.querySelector(`.${modalIdentifier}-button`)
 	const content = modal.querySelector(`.${modalIdentifier}--content`)
 	const closeButton = content.querySelector(
 		`.${modalIdentifier}--close-button`
 	)
 	const overlay = modal.querySelector(`.${modalIdentifier}--overlay`)
 
-	if (!modal || !button || !content || !closeButton || !overlay) {
+	if (!button || !modal || !content || !closeButton || !overlay) {
 		return
 	}
 
@@ -18,8 +18,15 @@ function initializeModal(modalIdentifier) {
 	}
 
 	const closeModal = () => {
-		content.style.animation = "slideOutToTop 0.4s ease-in forwards"
-		overlay.style.animation = "hideModal 0.4s ease-in"
+		const mediaQuery = window.matchMedia("(max-width: 480px)")
+
+		if (mediaQuery.matches) {
+			content.style.animation = "slideOutToBottom 0.4s ease-in forwards"
+		} else {
+			content.style.animation = "slideOutToTop 0.4s ease-in forwards"
+		}
+
+		overlay.style.animation = "dissolve 0.4s ease-in"
 
 		setTimeout(() => {
 			modal.style.display = "none"
@@ -47,4 +54,5 @@ function initializeModal(modalIdentifier) {
 	})
 }
 
-initializeModal("modal-theme-switcher")
+initializeModal("theme-switcher-desktop", "modal-theme-switcher")
+initializeModal("theme-switcher-mobile", "modal-theme-switcher")

src/assets/styles/base/_animation.scss

@@ -93,7 +93,25 @@
 	}
 }
 
-@keyframes showModal {
+@keyframes slideInFromBottom {
+	from {
+		top: 100%;
+	}
+	to {
+		top: 50%;
+	}
+}
+
+@keyframes slideOutToBottom {
+	from {
+		top: 50%;
+	}
+	to {
+		top: 150%;
+	}
+}
+
+@keyframes appear {
 	from {
 		opacity: 0;
 	}
@@ -102,7 +120,7 @@
 	}
 }
 
-@keyframes hideModal {
+@keyframes dissolve {
 	from {
 		opacity: 1;
 	}

src/assets/styles/components/_modal.scss

@@ -16,7 +16,7 @@
 		height: 100%;
 		background-color: var(--overlay);
 		z-index: 1000;
-		animation: showModal 0.1s ease-out;
+		animation: appear 0.1s ease-out;
 	}
 
 	&--content {
@@ -30,9 +30,17 @@
 		max-width: 564px;
 		width: 100%;
 		z-index: 1001;
-		animation: slideInFromTop 0.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
+		animation: slideInFromTop 0.8s $animation-curve-fast-out-slow-in-alt
+			forwards;
 		box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.05),
 			0px 4px 8px rgba(0, 0, 0, 0.05), 0px 1px 2px rgba(0, 0, 0, 0.25);
+
+		@include mq-down(sm) {
+			height: 100vh;
+			border-radius: 0px;
+			animation: slideInFromBottom 0.8s
+				$animation-curve-fast-out-slow-in-alt forwards;
+		}
 	}
 
 	&--title {
@@ -41,6 +49,11 @@
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
+		border-bottom: 1px solid var(--border-default);
+
+		@include mq-down(sm) {
+			height: 61px;
+		}
 
 		h2 {
 			color: var(--text-secondary);

src/assets/styles/components/_nav-mobile.scss

@@ -21,6 +21,11 @@
 			padding-top: 64px;
 			display: flex;
 			align-items: center;
+
+			.container {
+				max-width: 960px;
+				padding: 0px;
+			}
 		}
 
 		&.is-open {

src/assets/styles/components/_theme-switcher.scss

@@ -6,6 +6,11 @@
 		align-items: flex-start;
 		padding: 0px;
 
+		@include mq-down(sm) {
+			flex-direction: column;
+			gap: 12px;
+		}
+
 		button {
 			display: flex;
 			flex-direction: column;
@@ -19,6 +24,12 @@
 			border: none;
 			position: relative;
 
+			@include mq-down(sm) {
+				flex-direction: column;
+				padding: 24px 24px;
+				align-items: flex-start;
+			}
+
 			&:hover {
 				opacity: 0.7;
 				transition: all 0.2s $animation-curve-default;
@@ -67,6 +78,15 @@
 				background: $green-200;
 				color: $green-950;
 				border-radius: 12px 12px 0px 0px;
+				display: flex;
+				align-items: center;
+
+				@include mq-down(sm) {
+					right: 24px;
+					bottom: 24px;
+					border-radius: 12px;
+					padding: 2px 12px;
+				}
 			}
 		}
 	}

src/assets/styles/utils/_variables.scss

@@ -121,8 +121,7 @@ $line-height: 1.4rem;
 // Default easing curves, Transitions, etc
 
 $animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);
-$animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1);
-$animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1);
+$animation-curve-fast-out-slow-in-alt: cubic-bezier(0.19, 1, 0.22, 1);
 $animation-curve-swoosh: cubic-bezier(0.19, 1, 0.22, 1);
 $animation-curve-default: $animation-curve-fast-out-slow-in;
 

src/includes/nav-mobile.njk

@@ -34,7 +34,7 @@
             </ul>
 
             <button
-				class="icon-button nav__themebtn js-themeswitcher-toggle-menu nav__mobile-themebtn"
+				class="icon-button nav__themebtn nav__mobile-themebtn theme-switcher-mobile"
 				aria-expanded="false"
 				aria-controls="theme-menu"
 				data-umami-event="nav-theme-mobile"

src/includes/nav.njk

@@ -43,7 +43,7 @@
         {%- endfor -%}
         <li>
             <button
-                class="icon-button nav__themebtn modal-theme-switcher-button"
+                class="icon-button nav__themebtn theme-switcher-desktop"
                 aria-expanded="false"
                 aria-controls="theme-menu"
                 data-umami-event="nav-theme"