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

src/app.tsx

@@ -5,7 +5,7 @@ import styles from './app.module.css';
 import useTheme from './hooks/use-theme';
 import Subplebbit from './views/subplebbit';
 import { isHomeView } from './lib/utils/view-utils';
-import TopNav from './components/topnav';
+import BoardNav from './components/board-nav';
 
 const App = () => {
   const [theme] = useTheme();
@@ -26,7 +26,7 @@ const App = () => {
 
   const boardLayout = (
     <>
-      <TopNav />
+      <BoardNav />
       {/* <ImageBanner />
       <PostForm />
       <Stats /> */}

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;

src/themes.css

@@ -2,6 +2,11 @@
   --background-base-color: #ffe;
   --background-pattern-image: url("/public/assets/background-fade.png");
   --background-text-color: #fff;
+  --boardnav-font-size: 9pt;
+  --boardnav-separator-color: #b86;
+  --boardnav-mobile-background-color: #f0e0d6;
+  --boardnav-mobile-border-bottom: 2px solid #d9c5b7;
+  --boardnav-mobile-font-size: 11pt;
   --body-font-color: maroon;
   --body-font-family: arial, helvetica, sans-serif;
   --body-font-size: 10pt;
@@ -21,14 +26,17 @@
   --text-color-on-color2-hover: #c63;
   --text-color-standard: #000;
   --text-color-inverse: #fff;
-  --topnav-font-size: 9pt;
-  --topnav-separator-color: #b86;
 }
 
 :root .yotsuba-b {
   --background-base-color: #eef2ff;
   --background-pattern-image: url("/public/assets/background-fade-blue.png");
   --background-text-color: #fff;
+  --boardnav-font-size: 9pt;
+  --boardnav-separator-color: #89a;
+  --boardnav-mobile-background-color: #d6daf0;
+  --boardnav-mobile-border-bottom: 2px solid #b7c5d9;
+  --boardnav-mobile-font-size: 11pt;
   --body-font-color: #000;
   --body-font-family: arial, helvetica, sans-serif;
   --body-font-size: 10pt;
@@ -48,14 +56,17 @@
   --text-color-on-color2-hover: #fff;
   --text-color-standard: #000;
   --text-color-inverse: #fff;
-  --topnav-font-size: 9pt;
-  --topnav-separator-color: #89a;
 }
 
 :root .futaba {
   --background-base-color: #ffe;
   --background-pattern-image: none;
   --background-text-color: #fff;
+  --boardnav-font-size: 11pt;
+  --boardnav-separator-color: none;
+  --boardnav-mobile-background-color: #f0e0d6;
+  --boardnav-mobile-border-bottom: 2px solid #d9c5b7;
+  --boardnav-mobile-font-size: 11pt;
   --body-font-color: maroon;
   --body-font-family: times new roman, serif;
   --body-font-size: 12pt;
@@ -75,14 +86,17 @@
   --text-color-on-color2-hover: #c63;
   --text-color-standard: #000;
   --text-color-inverse: #fff;
-  --topnav-font-size: 11pt;
-  --topnav-separator-color: #89a;
 }
 
 :root .burichan {
   --background-base-color: #eef2ff;
   --background-pattern-image: none;
   --background-text-color: #fff;
+  --boardnav-font-size: 11pt;
+  --boardnav-separator-color: none;
+  --boardnav-mobile-background-color: #d6daf0;
+  --boardnav-mobile-border-bottom: 2px solid #b7c5d9;
+  --boardnav-mobile-font-size: 11pt;
   --body-font-color: #000;
   --body-font-family: times new roman, serif;
   --body-font-size: 12pt;
@@ -102,8 +116,6 @@
   --text-color-on-color2-hover: #fff;
   --text-color-standard: #000;
   --text-color-inverse: #fff;
-  --topnav-font-size: 11pt;
-  --topnav-separator-color: #89a;
 
 }
 
@@ -111,6 +123,11 @@
   --background-base-color: #1d1f21;
   --background-pattern-image: none;
   --background-text-color: #282a2e;
+  --boardnav-font-size: 9pt;
+  --boardnav-separator-color: #c5c8c6;
+  --boardnav-mobile-background-color: #1d1f21;
+  --boardnav-mobile-border-bottom: 2px solid #282a2e;
+  --boardnav-mobile-font-size: 11pt;
   --body-font-color: #c5c8c6;
   --body-font-family: arial, helvetica, sans-serif;
   --body-font-size: 10pt;
@@ -124,19 +141,20 @@
   --text-color-on-color1: #c5c8c6;
   --text-color-on-color2: #c5c8c6;
   --text-color-on-color3: #c5c8c6;
-  --topnav-font-size: 9pt;
-  --topnav-separator-color: #89a;
 }
 
 :root .photon {
   --background-base-color: #eee;
   --background-pattern-image: none;
+  --boardnav-font-size: 9pt;
+  --boardnav-separator-color: #333;
+  --boardnav-mobile-background-color: #ddd;
+  --boardnav-mobile-border-bottom: 2px solid #ccc;
+  --boardnav-mobile-font-size: 11pt;
   --body-font-color: #333;
   --body-font-family: arial, helvetica, sans-serif;
   --body-font-size: 10pt;
   --internal-link-text-color: #f60;
   --internal-link-text-color-hover: #f30;
   --text-color: #333;
-  --topnav-font-size: 9pt;
-  --topnav-separator-color: #333;
 }

src/views/subplebbit/subplebbit.module.css

@@ -1,6 +1,6 @@
 .debug {
   position: fixed;
-  top: 0;
+  top: 20px;
   right: 0;
   padding: 0.5em;
 }