Add navbar and switch to sass. Fixes element-hq#2

web/index.css

@@ -1,64 +1,62 @@
-/*
-Copyright (c) 2020 Tulir Asokan
-
-This Source Code Form is subject to the terms of the Mozilla Public
-License, v. 2.0. If a copy of the MPL was not distributed with this
-file, You can obtain one at http://mozilla.org/MPL/2.0/.
-*/
-
 * {
-    font-family: sans-serif;
-}
+  font-family: sans-serif; }
 
 html {
-    scrollbar-width: none;
-}
+  scrollbar-width: none; }
+  html::-webkit-scrollbar {
+    display: none; }
 
 body {
-    margin: 0;
-}
-
-.main:not(.pack-list) {
-    margin: 2rem;
-}
-
-.main.empty {
-    text-align: center;
-}
-
-.stickerpack > .sticker-list {
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.stickerpack > h1 {
-    margin: .75rem;
-}
+  margin: 0; }
 
-.sticker {
+h1 {
+  font-size: 1rem; }
+
+main.spinner, main.error, main.empty {
+  margin: 2rem; }
+
+main.empty {
+  text-align: center; }
+
+nav {
+  display: flex;
+  overflow-x: auto;
+  scrollbar-width: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 12vw;
+  background-color: white;
+  z-index: 10; }
+  nav::-webkit-scrollbar {
+    display: none; }
+  nav div.sticker {
+    width: 12vw;
+    height: 12vw; }
+
+section.stickerpack {
+  padding-top: 12vw;
+  margin-top: -12vw; }
+  section.stickerpack > div.sticker-list {
     display: flex;
-    padding: 4px;
-    cursor: pointer;
-    position: relative;
-    width: 25vw;
-    height: 25vw;
-    box-sizing: border-box;
-}
-
-.sticker:hover {
-    background-color: #eee;
-}
-
-.sticker > img {
+    flex-wrap: wrap; }
+  section.stickerpack > h1 {
+    margin: .75rem; }
+
+div.sticker {
+  display: flex;
+  padding: 4px;
+  cursor: pointer;
+  position: relative;
+  width: 25vw;
+  height: 25vw;
+  box-sizing: border-box; }
+  div.sticker:hover {
+    background-color: #eee; }
+  div.sticker > img {
     display: none;
     width: 100%;
-    object-fit: contain;
-}
-
-.sticker > img.visible {
-    display: initial;
-}
-
-h1 {
-    font-size: 1rem;
-}
+    object-fit: contain; }
+    div.sticker > img.visible {
+      display: initial; }

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} />

web/index.sass

@@ -0,0 +1,82 @@
+// Copyright (c) 2020 Tulir Asokan
+//
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+*
+  font-family: sans-serif
+
+html
+  scrollbar-width: none
+
+  &::-webkit-scrollbar
+    display: none
+
+body
+  margin: 0
+
+h1
+  font-size: 1rem
+
+main
+  &.spinner, &.error, &.empty
+    margin: 2rem
+
+  &.empty
+    text-align: center
+
+nav
+  display: flex
+  overflow-x: auto
+  scrollbar-width: none
+
+  &::-webkit-scrollbar
+    display: none
+
+  position: fixed
+  top: 0
+  left: 0
+  right: 0
+  height: 12vw
+
+  background-color: white
+  z-index: 10
+
+  div.sticker
+    width: 12vw
+    height: 12vw
+
+section.stickerpack
+  // This is a slightly hacky hack so that we can simultaneously have:
+  // * Anchor URLs scroll so the header is visible
+  // * The scroll area is the whole document
+  padding-top: 12vw
+  margin-top: -12vw
+
+  > div.sticker-list
+    display: flex
+    flex-wrap: wrap
+
+  > h1
+    margin: .75rem
+
+div.sticker
+  display: flex
+  padding: 4px
+  cursor: pointer
+  position: relative
+  width: 25vw
+  height: 25vw
+  box-sizing: border-box
+
+  &:hover
+    background-color: #eee
+
+  > img
+    display: none
+    width: 100%
+    object-fit: contain
+
+    &.visible
+      display: initial