add desktop topnav, update themes

src/components/index.ts

@@ -0,0 +1 @@
+export { default } from './topnav';

src/components/topnav.module.css

@@ -0,0 +1,27 @@
+
+.boardNavDesktop {
+  padding: 5px;
+  font-size: var(--topnav-font-size);
+}
+
+.boardNavDesktop a {
+  color: var(--internal-link-text-color);
+  text-decoration: var(--internal-link-text-decoration);
+}
+
+.boardNavDesktop a:hover {
+  color: var(--internal-link-text-color-hover);
+  text-decoration: var(--internal-link-text-decoration-hover);
+}
+
+@media (max-width: 640px) {
+  .boardNavDesktop {
+    display: none;
+  }
+}
+
+@media (min-width: 640px) {
+  .boardNavMobile {
+    display: none;
+  }
+}

src/components/topnav.tsx

@@ -0,0 +1,42 @@
+import { Link } from 'react-router-dom';
+import useDefaultSubplebbits from '../hooks/use-default-subplebbits';
+import styles from './topnav.module.css';
+
+const BoardNavDesktop = ({ subplebbits }: { subplebbits: any }) => {
+  return (
+    <div className={styles.boardNavDesktop}>
+      [
+      {subplebbits.map((subplebbit: any, index: number) => (
+        <span key={subplebbit.address}>
+          {index === 0 ? null : ' '}
+          <Link to={`/p/${subplebbit.address}`} title={subplebbit.title || ''}>
+            {subplebbit.address.includes('.') ? subplebbit.address : subplebbit.title || subplebbit.address.slice(0, 10).concat('...')}
+          </Link>
+          {index !== subplebbits.length - 1 ? ' /' : null}
+        </span>
+      ))}
+      ]
+    </div>
+  );
+};
+
+const BoardNavMobile = ({ subplebbits }: { subplebbits: any }) => {
+  return (
+    <div className={styles.boardNavMobile}>
+      <h1>BoardNavMobile</h1>
+    </div>
+  );
+};
+
+const TopNav = () => {
+  const defaultSubplebbits = useDefaultSubplebbits();
+
+  return (
+    <>
+      <BoardNavDesktop subplebbits={defaultSubplebbits} />
+      <BoardNavMobile subplebbits={defaultSubplebbits} />
+    </>
+  );
+};
+
+export default TopNav;