From 744c7cf49a195112bf4ca85eb7678c7ca3c8ed1d Mon Sep 17 00:00:00 2001
From: Matei Adriel <rafaeladriel11@gmail.com>
Date: Sat, 28 Dec 2019 22:12:58 +0200
Subject: [PATCH] typescript(loopover-leaderboards): feat: basic navbar

Signed-off-by: prescientmoon <git@moonythm.dev>
---
 .../loopover-leaderboards/preact.config.js    |  3 +-
 .../loopover-leaderboards/src/global.css      |  7 +++-
 .../loopover-leaderboards/src/global.css.d.ts |  2 +
 .../src/modules/core/components/App.tsx       | 17 ++++++--
 .../src/modules/core/components/Nav.css       | 12 ++++++
 .../src/modules/core/components/Nav.css.d.ts  |  3 ++
 .../src/modules/core/components/Nav.tsx       | 42 +++++++++++++++++++
 7 files changed, 80 insertions(+), 6 deletions(-)
 create mode 100644 typescript/loopover-leaderboards/src/global.css.d.ts
 create mode 100644 typescript/loopover-leaderboards/src/modules/core/components/Nav.css
 create mode 100644 typescript/loopover-leaderboards/src/modules/core/components/Nav.css.d.ts
 create mode 100644 typescript/loopover-leaderboards/src/modules/core/components/Nav.tsx

diff --git a/typescript/loopover-leaderboards/preact.config.js b/typescript/loopover-leaderboards/preact.config.js
index 4fcde16..2dcf949 100644
--- a/typescript/loopover-leaderboards/preact.config.js
+++ b/typescript/loopover-leaderboards/preact.config.js
@@ -10,7 +10,8 @@ export default function(config, env, helpers) {
             banner:
                 "// This file is automatically generated from your CSS. Any edits will be overwritten.",
             namedExport: true,
-            silent: true
+            silent: true,
+            modules: true
         });
     });
 
diff --git a/typescript/loopover-leaderboards/src/global.css b/typescript/loopover-leaderboards/src/global.css
index ddb6b2f..2306da0 100644
--- a/typescript/loopover-leaderboards/src/global.css
+++ b/typescript/loopover-leaderboards/src/global.css
@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css?family=Varela+Round&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Roboto|Varela+Round&display=swap");
 
 html,
 body {
@@ -13,7 +13,12 @@ body {
     height: 100%;
 }
 
+* {
+    font-family: var(--font);
+}
+
 :root {
+    --font: "Roboto", sans-serif;
     --title-font: "Varela Round", sans-serif;
     --max-width: 800px;
     --spacing: 2rem;
diff --git a/typescript/loopover-leaderboards/src/global.css.d.ts b/typescript/loopover-leaderboards/src/global.css.d.ts
new file mode 100644
index 0000000..53d4f03
--- /dev/null
+++ b/typescript/loopover-leaderboards/src/global.css.d.ts
@@ -0,0 +1,2 @@
+// This file is automatically generated from your CSS. Any edits will be overwritten.
+export const app: string;
diff --git a/typescript/loopover-leaderboards/src/modules/core/components/App.tsx b/typescript/loopover-leaderboards/src/modules/core/components/App.tsx
index 844ccb1..fab9d41 100644
--- a/typescript/loopover-leaderboards/src/modules/core/components/App.tsx
+++ b/typescript/loopover-leaderboards/src/modules/core/components/App.tsx
@@ -1,7 +1,8 @@
 import { h } from "preact";
 import { Route, Router } from "preact-router";
-
 import { Home } from "./Home";
+import { Nav } from "./Nav";
+import { Layer, Stack } from "./Stack";
 
 if ((module as any).hot) {
     // tslint:disable-next-line:no-var-requires
@@ -11,9 +12,17 @@ if ((module as any).hot) {
 export const App: preact.FunctionalComponent = () => {
     return (
         <div id="app">
-            <Router>
-                <Route path="/" component={Home} />
-            </Router>
+            <Stack height="100vh">
+                <Layer>
+                    <Router>
+                        <Route path="/" component={Home} />
+                    </Router>
+                </Layer>
+
+                <Layer>
+                    <Nav />
+                </Layer>
+            </Stack>
         </div>
     );
 };
diff --git a/typescript/loopover-leaderboards/src/modules/core/components/Nav.css b/typescript/loopover-leaderboards/src/modules/core/components/Nav.css
new file mode 100644
index 0000000..cbec52c
--- /dev/null
+++ b/typescript/loopover-leaderboards/src/modules/core/components/Nav.css
@@ -0,0 +1,12 @@
+.link {
+    text-decoration: none;
+    color: white;
+    filter: brightness(0.8);
+    font-size: 1.6rem;
+    padding: 1.4rem;
+    font: "Roboto light";
+}
+
+.activeLink {
+    filter: brightness(1);
+}
diff --git a/typescript/loopover-leaderboards/src/modules/core/components/Nav.css.d.ts b/typescript/loopover-leaderboards/src/modules/core/components/Nav.css.d.ts
new file mode 100644
index 0000000..c28f561
--- /dev/null
+++ b/typescript/loopover-leaderboards/src/modules/core/components/Nav.css.d.ts
@@ -0,0 +1,3 @@
+// This file is automatically generated from your CSS. Any edits will be overwritten.
+export const link: string;
+export const activeLink: string;
diff --git a/typescript/loopover-leaderboards/src/modules/core/components/Nav.tsx b/typescript/loopover-leaderboards/src/modules/core/components/Nav.tsx
new file mode 100644
index 0000000..ca95dfe
--- /dev/null
+++ b/typescript/loopover-leaderboards/src/modules/core/components/Nav.tsx
@@ -0,0 +1,42 @@
+import { Block, Row } from "jsxstyle";
+import { h } from "preact";
+import { Link } from "preact-router/match";
+import styles from "./Nav.css";
+
+interface Route {
+    url: string;
+    name: string;
+}
+
+const routes: Route[] = [
+    {
+        url: "/",
+        name: "Home"
+    },
+    {
+        url: "/leaderboards",
+        name: "Leaderboards"
+    },
+    {
+        url: "/play",
+        name: "Play"
+    }
+];
+
+export const Nav = () => {
+    return (
+        <Row background="rgba(0,0,0, 0.3)">
+            {routes.map(route => (
+                // We cannot style this directly, so I'm using classes
+                <Link
+                    key={route.url}
+                    href={route.url}
+                    class={styles.link}
+                    activeClassName={styles.activeLink}
+                >
+                    {route.name}
+                </Link>
+            ))}
+        </Row>
+    );
+};