From dca535b8264f1f596a1703affb11570b24fb05de Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Wed, 26 May 2021 17:43:56 +0100
Subject: [PATCH] Add arrow keys navigation for sidebar sections

---
 src/components/Sidebar.vue | 46 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 45 insertions(+), 1 deletion(-)

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 007dfa5..3c60cb8 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -26,7 +26,7 @@
 				<SvgIcon name="players"></SvgIcon>
 			</button>
 		</header>
-		<div class="sidebar__content">
+		<div class="sidebar__content" @keydown="handleKeydown">
 			<ServerList v-if="serverCount > 1" v-show="currentlyVisible.has('maps')"></ServerList>
 			<WorldList v-if="mapCount > 1" v-show="currentlyVisible.has('maps')"></WorldList>
 			<PlayerList v-if="previouslyVisible.has('players')" v-show="currentlyVisible.has('players')"></PlayerList>
@@ -90,6 +90,50 @@ export default defineComponent({
 			messageWorlds,
 			messagePlayers,
 		}
+	},
+
+	methods: {
+		handleKeydown(e: KeyboardEvent) {
+			if(!e.target || !(e.target as HTMLElement).classList.contains('section__heading')) {
+				return;
+			}
+
+			const sectionHeadings: HTMLElement[] = Array.from(this.$el.querySelectorAll('.section__heading')),
+				position = sectionHeadings.indexOf(e.target as HTMLElement);
+
+			if(position === -1) {
+				return;
+			}
+
+			let newPosition;
+
+			switch(e.key) {
+				case 'ArrowDown':
+					newPosition = position + 1;
+					break;
+				case 'ArrowUp':
+					newPosition = position - 1;
+					break;
+				case 'Home':
+					newPosition = 0;
+					break;
+				case 'End':
+					newPosition = sectionHeadings.length - 1;
+					break;
+				default:
+					return;
+			}
+
+			if(newPosition >= sectionHeadings.length) {
+				newPosition = 0
+			} else if(newPosition < 0) {
+				newPosition = sectionHeadings.length - 1;
+			}
+
+			e.preventDefault();
+			e.stopImmediatePropagation();
+			sectionHeadings[newPosition].focus();
+		}
 	}
 })