Move page list to header for easier navigation.

index.html

@@ -30,6 +30,24 @@ select {
   margin-top: 10px;
   margin-bottom: 10px;
 }
+
+ul.navbar {
+  display: flex;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  justify-content: flex-end;
+}
+
+ul.navbar li {
+  border-right: 1px solid gray;
+  margin-right: 8px;
+  padding-right: 8px;
+}
+
+ul.navbar li:last-child {
+  border-right: none;
+}
 </style>
 <noscript>
   <p>Alas, you need JavaScript to peruse this page.</p>

lib/browser-main.tsx

@@ -26,22 +26,11 @@ if (!appEl) {
   throw new Error(`Unable to find #${APP_ID}!`);
 }
 
-const App: React.FC<{}> = (props) => {
+const Navbar: React.FC<{ currPageName: string }> = (props) => (
-  const page = new URLSearchParams(window.location.search);
+  <ul className="navbar">
-  const currPageName = toPageName(page.get("p") || "", "vocabulary");
-  const PageComponent = Pages[currPageName];
-
-  return (
-    <>
-      <main>
-        <PageComponent />
-      </main>
-      <footer>
-        <p>Other pages</p>
-        <ul>
     {pageNames.map((pageName) => (
       <li key={pageName}>
-              {currPageName === pageName ? (
+        {props.currPageName === pageName ? (
           pageName
         ) : (
           <a href={`?p=${encodeURIComponent(pageName)}`}>{pageName}</a>
@@ -49,6 +38,22 @@ const App: React.FC<{}> = (props) => {
       </li>
     ))}
   </ul>
+);
+
+const App: React.FC<{}> = (props) => {
+  const page = new URLSearchParams(window.location.search);
+  const currPageName = toPageName(page.get("p") || "", "vocabulary");
+  const PageComponent = Pages[currPageName];
+
+  return (
+    <>
+      <header>
+        <Navbar currPageName={currPageName} />
+      </header>
+      <main>
+        <PageComponent />
+      </main>
+      <footer>
         <p>
           For more details about this project, see its{" "}
           <a href="https://github.com/toolness/mystic-symbolic" target="_blank">