From bddb5608bc7890a430205568794054e7bebe7c30 Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Sun, 6 Sep 2020 18:52:25 +0300
Subject: [PATCH] Allow scrolling navbar with mouse wheel. Fixes #9

---
 web/index.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/web/index.js b/web/index.js
index 236e327..348277a 100644
--- a/web/index.js
+++ b/web/index.js
@@ -38,7 +38,9 @@ class App extends Component {
 		this.state.frequentlyUsed.stickers = this._getStickersByID(this.state.frequentlyUsed.stickerIDs)
 		this.imageObserver = null
 		this.packListRef = null
+		this.navRef = null
 		this.sendSticker = this.sendSticker.bind(this)
+		this.navScroll = this.navScroll.bind(this)
 	}
 
 	_getStickersByID(ids) {
@@ -137,6 +139,10 @@ class App extends Component {
 		widgetAPI.sendSticker(sticker)
 	}
 
+	navScroll(evt) {
+		this.navRef.scrollLeft += evt.deltaY * 12
+	}
+
 	render() {
 		if (this.state.loading) {
 			return html`<main class="spinner"><${Spinner} size=${80} green /></main>`
@@ -149,7 +155,7 @@ class App extends Component {
 			return html`<main class="empty"><h1>No packs found 😿</h1></main>`
 		}
 		return html`<main class="has-content">
-			<nav>
+			<nav onWheel=${this.navScroll} ref=${elem => this.navRef = elem}>
 				<${NavBarItem} pack=${this.state.frequentlyUsed} iconOverride="res/recent.svg" altOverride="🕓️" />
 				${this.state.packs.map(pack => html`<${NavBarItem} id=${pack.id} pack=${pack}/>`)}
 			</nav>