rename topnav to board-nav, add mobile board selector and styling

src/components/board-nav/board-nav.module.css

@@ -1,7 +1,8 @@
 
 .boardNavDesktop {
   padding: 5px;
-  font-size: var(--topnav-font-size);
+  font-size: var(--boardnav-font-size);
+  color: var(--boardnav-separator-color);
 }
 
 .boardNavDesktop a {
@@ -14,6 +15,23 @@
   text-decoration: var(--internal-link-text-decoration-hover);
 }
 
+.boardNavMobile {
+  padding: 2px 4px;
+  background-color: var(--boardnav-mobile-background-color);
+  border-bottom: var(--boardnav-mobile-border-bottom);
+  position: fixed;
+  width: 100%;
+  font-size: 10px;
+}
+
+.boardNavMobile strong {
+  padding-right: 5px;
+}
+
+.boardNavMobile select {
+  font-size: 10px;
+}
+
 @media (max-width: 640px) {
   .boardNavDesktop {
     display: none;

src/components/board-nav/board-nav.tsx

@@ -0,0 +1,62 @@
+import { Link, useNavigate, useParams } from 'react-router-dom';
+import useDefaultSubplebbits from '../../hooks/use-default-subplebbits';
+import styles from './board-nav.module.css';
+
+interface BoardNavProps {
+  subplebbits: any;
+  currentSubplebbit?: string | undefined;
+}
+
+const BoardNavDesktop = ({ subplebbits }: BoardNavProps) => {
+  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, currentSubplebbit }: BoardNavProps) => {
+  const navigate = useNavigate();
+
+  return (
+    <div className={styles.boardNavMobile}>
+      <div className={styles.boardSelect}>
+        <strong>Board</strong>
+        <select value={currentSubplebbit} onChange={(e) => navigate(`/p/${e.target.value}`)}>
+          <option value='all'>All</option>
+          <option value='subscriptions'>Subscriptions</option>
+          {subplebbits.map((subplebbit: any, index: number) => (
+            <option key={index} value={subplebbit.address}>
+              {subplebbit.address.includes('.') ? subplebbit.address : subplebbit.title || subplebbit.address.slice(0, 10).concat('...')}
+            </option>
+          ))}
+        </select>
+      </div>
+      <div className={styles.pageJump}></div>
+    </div>
+  );
+};
+
+const BoardNav = () => {
+  const defaultSubplebbits = useDefaultSubplebbits();
+  const subplebbitAddress = useParams().subplebbitAddress;
+
+  return (
+    <>
+      <BoardNavDesktop subplebbits={defaultSubplebbits} />
+      <BoardNavMobile subplebbits={defaultSubplebbits} currentSubplebbit={subplebbitAddress} />
+    </>
+  );
+};
+
+export default BoardNav;

src/components/board-nav/index.ts

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

src/components/index.ts

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

src/components/topnav.tsx

@@ -1,42 +0,0 @@
-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;