Add navbar and switch to sass. Fixes #2

1 files changed, 25 insertions, 12 deletions

diff --git a/web/index.js b/web/index.js
index 86aac06..bc478af 100644
--- a/web/index.js
+++ b/web/index.js
@@ -24,6 +24,7 @@ class App extends Component {
 			error: null,
 		}
 		this.observer = null
+		this.packListRef = null
 	}
 
 	observeIntersection = intersections => {
@@ -67,7 +68,7 @@ class App extends Component {
 	}
 
 	componentDidUpdate() {
-		for (const elem of document.getElementsByClassName("sticker")) {
+		for (const elem of this.packListRef.getElementsByClassName("sticker")) {
 			this.observer.observe(elem)
 		}
 	}
@@ -78,29 +79,41 @@ class App extends Component {
 
 	render() {
 		if (this.state.loading) {
-			return html`<div class="main spinner"><${Spinner} size=${80} green /></div>`
+			return html`<main class="spinner"><${Spinner} size=${80} green /></main>`
 		} else if (this.state.error) {
-			return html`<div class="main error">
+			return html`<main class="error">
 				<h1>Failed to load packs</h1>
 				<p>${this.state.error}</p>
-			</div>`
+			</main>`
 		} else if (this.state.packs.length === 0) {
-			return html`<div class="main empty"><h1>No packs found :(</h1></div>`
+			return html`<main class="empty"><h1>No packs found :(</h1></main>`
 		}
-		return html`<div class="main pack-list">
-			${this.state.packs.map(pack => html`<${Pack} id=${pack.id} ...${pack}/>`)}
-		</div>`
+		return html`<main>
+			<nav>
+				${this.state.packs.map(pack => html`<${NavBarItem} id=${pack.id} pack=${pack}/>`)}
+			</nav>
+			<div class="pack-list" ref=${elem => this.packListRef = elem}>
+				${this.state.packs.map(pack => html`<${Pack} id=${pack.id} pack=${pack}/>`)}
+			</div>
+		</main>`
 	}
 }
 
-const Pack = ({ title, stickers }) => html`<div class="stickerpack">
-	<h1>${title}</h1>
+const NavBarItem = ({ pack }) => html`<a href="#pack-${pack.id}" title=${pack.title}>
+	<div class="sticker">
+		<img src=${makeThumbnailURL(pack.stickers[0].url)}
+			 alt=${pack.stickers[0].body} class="visible" />
+	 </div>
+</a>`
+
+const Pack = ({ pack }) => html`<section class="stickerpack" id=${`pack-${pack.id}`}>
+	<h1>${pack.title}</h1>
 	<div class="sticker-list">
-		${stickers.map(sticker => html`
+		${pack.stickers.map(sticker => html`
 			<${Sticker} key=${sticker["net.maunium.telegram.sticker"].id} content=${sticker}/>
 		`)}
 	</div>
-</div>`
+</section>`
 
 const Sticker = ({ content }) => html`<div class="sticker" onClick=${() => sendSticker(content)}>
 	<img data-src=${makeThumbnailURL(content.url)} alt=${content.body} />