update board-nav

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

@@ -21,7 +21,7 @@
   border-bottom: var(--boardnav-mobile-border-bottom);
   position: fixed;
   width: 100%;
-  font-size: 10px;
+  font-size: var(--boardnav-mobile-font-size);
 }
 
 .boardNavMobile strong {
@@ -29,7 +29,25 @@
 }
 
 .boardNavMobile select {
-  font-size: 10px;
+  font-size: var(--boardnav-mobile-font-size);
+}
+
+.boardSelect {
+  float: left;
+}
+
+.pageJump {
+  float: right;
+  padding: 3px 5px 0 0;
+}
+
+.pageJump span, .pageJump a {
+  padding-right: 5px;
+}
+
+.pageJump a {
+  color: var(--internal-link-text-color);
+  text-decoration: var(--internal-link-text-decoration);
 }
 
 @media (max-width: 640px) {

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

@@ -28,21 +28,29 @@ const BoardNavDesktop = ({ subplebbits }: BoardNavProps) => {
 const BoardNavMobile = ({ subplebbits, currentSubplebbit }: BoardNavProps) => {
   const navigate = useNavigate();
 
+  const boardSelect = (
+    <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>
+  );
+
   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>
+        {boardSelect}
+      </div>
+      <div className={styles.pageJump}>
+        <Link to='settings'>Settings</Link>
+        <Link to='/'>Home</Link>
+        {/* <span>App</span> TODO: consider adding apk download link */}
       </div>
-      <div className={styles.pageJump}></div>
     </div>
   );
 };

src/themes.css

@@ -6,7 +6,7 @@
   --boardnav-separator-color: #b86;
   --boardnav-mobile-background-color: #f0e0d6;
   --boardnav-mobile-border-bottom: 2px solid #d9c5b7;
-  --boardnav-mobile-font-size: 11pt;
+  --boardnav-mobile-font-size: 10px;
   --body-font-color: maroon;
   --body-font-family: arial, helvetica, sans-serif;
   --body-font-size: 10pt;
@@ -36,7 +36,7 @@
   --boardnav-separator-color: #89a;
   --boardnav-mobile-background-color: #d6daf0;
   --boardnav-mobile-border-bottom: 2px solid #b7c5d9;
-  --boardnav-mobile-font-size: 11pt;
+  --boardnav-mobile-font-size: 10px;
   --body-font-color: #000;
   --body-font-family: arial, helvetica, sans-serif;
   --body-font-size: 10pt;
@@ -127,7 +127,7 @@
   --boardnav-separator-color: #c5c8c6;
   --boardnav-mobile-background-color: #1d1f21;
   --boardnav-mobile-border-bottom: 2px solid #282a2e;
-  --boardnav-mobile-font-size: 11pt;
+  --boardnav-mobile-font-size: 10px;
   --body-font-color: #c5c8c6;
   --body-font-family: arial, helvetica, sans-serif;
   --body-font-size: 10pt;
@@ -150,7 +150,7 @@
   --boardnav-separator-color: #333;
   --boardnav-mobile-background-color: #ddd;
   --boardnav-mobile-border-bottom: 2px solid #ccc;
-  --boardnav-mobile-font-size: 11pt;
+  --boardnav-mobile-font-size: 10px;
   --body-font-color: #333;
   --body-font-family: arial, helvetica, sans-serif;
   --body-font-size: 10pt;