typescript(loopover-leaderboards): feat: basic navbar

Signed-off-by: prescientmoon <git@moonythm.dev>

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
         });
     });
 

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;

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;

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>
+            <Stack height="100vh">
-                <Route path="/" component={Home} />
+                <Layer>
-            </Router>
+                    <Router>
+                        <Route path="/" component={Home} />
+                    </Router>
+                </Layer>
+
+                <Layer>
+                    <Nav />
+                </Layer>
+            </Stack>
         </div>
     );
 };

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);
+}

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;

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>
+    );
+};