Added global navbar

src/App/App.module.css

@@ -14,4 +14,5 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  z-index: 100000;
 }

src/App/Navbar/Navbar.module.css

@@ -0,0 +1,26 @@
+.container {
+  position: fixed;
+  top: 0;
+  z-index: 1;
+  width: 100vw;
+  height: 15vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo {
+  height: 10vh;
+}
+
+.title {
+  font-size: xx-large;
+  text-decoration: none;
+  color: black;
+}
+
+@media screen and (orientation: portrait) {
+  .container {
+    height: 15vw;
+  }
+}

src/App/Navbar/index.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+import styles from "./Navbar.module.css";
+import logoIcon from "~/assets/logo.svg";
+import { useLocation, Link } from "wouter";
+
+export const Navbar = () => {
+  const [path] = useLocation();
+
+  return (
+    <div
+      className={styles.container}
+      style={path === "/" ? { height: "15vh" } : undefined}
+    >
+      <Link href="/">
+        {path === "/" ? (
+          <a>
+            <img
+              className={styles.logo}
+              src={logoIcon}
+              alt="Publite logotype"
+              title="Publite"
+            />
+          </a>
+        ) : (
+          <a className={styles.title}>Publite</a>
+        )}
+      </Link>
+    </div>
+  );
+};

src/App/index.tsx

@@ -8,6 +8,7 @@ import { UploadForm } from "~/pages/UploadForm";
 import { Dots } from "~/utils/Dots";
 
 import styles from "./App.module.css";
+import { Navbar } from "./Navbar";
 
 export const App = () => {
   const [loading, setLoading] = useState(false);
@@ -22,6 +23,7 @@ export const App = () => {
           </h1>
         </div>
       )}
+      <Navbar />
       <BookListContextProvider>
         <Switch>
           <Route path="/upload">

src/assets/logo.svg

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="372"
+   height="512"
+   viewBox="0 0 372 512"
+   version="1.1"
+   id="svg23656"
+   inkscape:version="1.1 (c4e8f9ed74, 2021-05-24)"
+   sodipodi:docname="logo.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs23653" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="g9760">
+      <path
+         style="color:#000000;fill:#000000;stroke-width:1.09037;-inkscape-stroke:none;paint-order:markers stroke fill"
+         d="m 219.02182,320.30644 v 138.7017 c 0,10.90433 8.94048,19.85349 19.83424,19.85349 h 74.64982 c 5.6688,0 10.7715,-2.4564 14.39782,-6.31741 3.62464,3.84241 8.71703,6.28118 14.37015,6.28118 v -10.90898 c -5.04074,0 -8.92783,-3.88781 -8.93372,-8.93172 V 320.30644 h -10.8984 v 138.66761 h -0.002 c 0,0.008 0.002,0.014 0.002,0.0213 v 0.0128 c 0,5.04946 -3.89127,8.94451 -8.93585,8.94451 h -74.64982 c -5.04456,0 -8.93584,-3.89505 -8.93584,-8.94451 V 320.30644 Z"
+         id="path20443" />
+      <path
+         style="color:#000000;fill:#000000;fill-rule:evenodd;stroke-width:1.09037;stroke-linecap:square;-inkscape-stroke:none"
+         d="m 41.424628,36.114794 c -10.893763,0 -19.834248,8.94917 -19.834248,19.853488 0,10.904319 8.940485,19.85349 19.834248,19.85349 H 177.11617 V 97.230604 H 41.424628 c -10.893752,0 -19.834248,8.947036 -19.834248,19.851356 0,10.90432 8.940485,19.85349 19.834248,19.85349 H 177.11617 v 21.40887 H 41.424628 c -10.893752,0 -19.834248,8.94917 -19.834248,19.85349 0,10.90432 8.940485,19.85349 19.834248,19.85349 H 177.11617 v 21.40887 H 41.424628 c -10.893752,0 -19.834248,8.94917 -19.834248,19.85349 0,10.90432 8.940485,19.85349 19.834248,19.85349 H 177.11617 v 21.40888 H 41.424628 c -10.893752,0 -19.834248,8.94917 -19.834248,19.85348 0,10.90432 8.940485,19.85136 19.834248,19.85136 H 177.11617 v 158.5488 h 10.89841 v -248.46052 -0.004 c 53.52577,0 97.03413,-43.55056 97.03413,-97.12826 0,-53.577715 -43.50836,-97.128274 -97.03413,-97.128271 z M 188.01463,47.017336 c 47.63585,-2e-6 86.13573,38.537221 86.13573,86.219294 0,47.68205 -38.49988,86.21928 -86.13573,86.21928 z m -146.589947,0.0064 H 177.11617 V 64.91275 H 41.424628 c -5.044567,0 -8.935842,-3.895057 -8.935842,-8.944511 0,-5.049456 3.891265,-8.94451 8.935842,-8.94451 z m 0,61.115854 H 177.11617 v 17.88688 H 41.424628 c -5.044567,0 -8.935842,-3.89505 -8.935842,-8.94451 0,-5.04945 3.891265,-8.94237 8.935842,-8.94237 z m 0,61.11371 H 177.11617 v 17.88903 H 41.424628 c -5.044567,0 -8.935842,-3.89506 -8.935842,-8.94452 0,-5.04946 3.891265,-8.94451 8.935842,-8.94451 z m 0,61.11585 H 177.11617 v 17.88903 H 41.424628 c -5.044567,0 -8.935842,-3.89506 -8.935842,-8.94451 0,-5.04946 3.891265,-8.94452 8.935842,-8.94452 z m 0,61.11586 H 177.11617 v 17.88684 H 41.424628 c -5.044567,0 -8.935842,-3.89292 -8.935842,-8.94238 0,-5.04945 3.891265,-8.94451 8.935842,-8.94451 z"
+         id="path1187"
+         sodipodi:nodetypes="cssccsssccsssccsssccssscccccscccscccccsscccccsssccccsssccccsssccccsssc" />
+    </g>
+  </g>
+</svg>

src/index.css

@@ -15,7 +15,6 @@ body {
   font-family: Inter, system-ui, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background: rgba(0, 0, 0, 0.05) none repeat scroll 0% 0%;
   color: #000;
 }