added navbar for mobile

src/components/Board.jsx

@@ -241,10 +241,33 @@ const Board = ({ setBodyStyle }) => {
               ] 
             </span>
           ))}
-          <span className="nav">[
+          <span className="nav">
-            <Link id="home-button" to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
+            [
-            )}>Home</Link>]&nbsp;
+            <a href={handleVoidClick}>Settings</a>
+            ]
+            [
+            <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
+            )}>Home</Link>
+            ]
           </span>
+          <div id="board-nav-mobile">
+            <div className="board-select">
+              <strong>Board</strong>
+              &nbsp;
+              <select id="board-select-mobile">
+                {defaultSubplebbits.map(subplebbit => (
+                  <option key={`option-${subplebbit.address}`} value={subplebbit.address} onClick={() => handleClick(subplebbit.title, subplebbit.address)}>{subplebbit.title}</option>))}
+              </select>
+            </div>
+            <div className="page-jump">
+              <a href={handleVoidClick}>Settings</a>
+              &nbsp;
+              <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
+                )}>Home</Link>
+            </div>
+          </div>
+          <div id="separator-mobile">&nbsp;</div>
+          <div id="separator-mobile">&nbsp;</div>
         </>
       </NavBar>
       <Header selectedStyle={selectedStyle}>
@@ -349,7 +372,7 @@ const Board = ({ setBodyStyle }) => {
                         File:&nbsp;
                         <a key={`fa-${thread.cid}`} href={`${thread.link}`} target="_blank">filename.something</a>&nbsp;(metadata)
                       </div>
-                      <a key={`fta-${thread.cid}`} href={handleVoidClick} target="_blank" class="file-thumb">
+                      <a key={`fta-${thread.cid}`} href={handleVoidClick} target="_blank" className="file-thumb">
                         <img key={`fti-${thread.cid}`} src="/assets/plebchan-psycho.png" alt="filename.something" />
                       </a>
                     </div>

src/components/Catalog.jsx

@@ -227,10 +227,33 @@ const Catalog = ({ setBodyStyle }) => {
               ] 
             </span>
           ))}
-          <span className="nav">[
+          <span className="nav">
-            <Link id="home-button" to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
+            [
-            )}>Home</Link>]&nbsp;
+            <a href={handleVoidClick}>Settings</a>
+            ]
+            [
+            <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
+            )}>Home</Link>
+            ]
           </span>
+          <div id="board-nav-mobile">
+            <div className="board-select">
+              <strong>Board</strong>
+              &nbsp;
+              <select id="board-select-mobile">
+                {defaultSubplebbits.map(subplebbit => (
+                  <option key={`option-${subplebbit.address}`} value={subplebbit.address} onClick={() => handleClick(subplebbit.title, subplebbit.address)}>{subplebbit.title}</option>))}
+              </select>
+            </div>
+            <div className="page-jump">
+              <a href={handleVoidClick}>Settings</a>
+              &nbsp;
+              <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
+                )}>Home</Link>
+            </div>
+          </div>
+          <div id="separator-mobile">&nbsp;</div>
+          <div id="separator-mobile">&nbsp;</div>
         </>
       </NavBar>
       <Header selectedStyle={selectedStyle}>

src/components/Thread.jsx

@@ -150,10 +150,33 @@ const Thread = ({ setBodyStyle }) => {
               ] 
             </span>
           ))}
-          <span className="nav">[
+          <span className="nav">
+            [
+            <a href={handleVoidClick}>Settings</a>
+            ]
+            [
             <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
-            )}>Home</Link>]&nbsp;
+            )}>Home</Link>
+            ]
           </span>
+          <div id="board-nav-mobile">
+            <div className="board-select">
+              <strong>Board</strong>
+              &nbsp;
+              <select id="board-select-mobile">
+                {defaultSubplebbits.map(subplebbit => (
+                  <option key={`option-${subplebbit.address}`} value={subplebbit.address} onClick={() => handleClick(subplebbit.title, subplebbit.address)}>{subplebbit.title}</option>))}
+              </select>
+            </div>
+            <div className="page-jump">
+              <a href={handleVoidClick}>Settings</a>
+              &nbsp;
+              <Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
+                )}>Home</Link>
+            </div>
+          </div>
+          <div id="separator-mobile">&nbsp;</div>
+          <div id="separator-mobile">&nbsp;</div>
         </>
       </NavBar>
       <Header selectedStyle={selectedStyle}>
@@ -265,7 +288,7 @@ const Thread = ({ setBodyStyle }) => {
                           File:&nbsp;
                           <a key={`fa-${comment.cid}`} href={`${comment.link}`} target="_blank">filename.something</a>&nbsp;(metadata)
                         </div>
-                        <a key={`fta-${comment.cid}`} href={handleVoidClick} target="_blank" class="file-thumb">
+                        <a key={`fta-${comment.cid}`} href={handleVoidClick} target="_blank" className="file-thumb">
                           <img key={`fti-${comment.cid}`} src="/assets/plebchan-psycho.png" alt="filename.something" />
                         </a>
                       </div>

src/components/styles/Board.styled.jsx

@@ -1,4 +1,13 @@
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
+
+const slideIn = keyframes`
+  0% {
+    top: 0;
+  }
+  100% {
+    top: -25px;
+  }
+`;
 
 export const Container = styled.div`
   font-size: 10pt;
@@ -10,135 +19,215 @@ export const Container = styled.div`
 `;
 
 export const NavBar = styled.div`
+  @media (min-width: 480px) {
+    .board-select, .page-jump {
+      display: none;
+    }
+
+    .nav {
+      float: right;
+    }
+
+    #separator-mobile {
+      display: none;
+    }
+
+    #board-nav-mobile {
+      display: none;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .boardList, .nav {
+      display: none;
+    }
+
+    #board-nav-mobile {
+      padding: 2px 4px;
+      background-color: #d6daf0;
+      overflow: hidden;
+      border-bottom: 2px solid #b7c5d9;
+      position: fixed;
+      top: 0;
+      width: 100%;
+      font-size: x-small;
+      left: 0;
+      right: 0;
+      z-index: 9001;
+      /* animation: ${slideIn} 0.2s ease-in-out; */
+      display: block !important;
+      clear: left !important;
+    }
+
+    .board-select {
+      float: left;
+    }
+
+    strong {
+      padding-right: 5px;
+    }
+
+    #board-select-mobile {
+      font-size: x-small;
+    }
+
+    .page-jump {
+      float: right;
+      padding-right: 5px;
+      padding-top: 2.5px;
+      font-size: 7.5pt;
+    }
+
+    .page-jump a {
+      text-decoration: none;
+      padding-right: 5px;
+    }
+
+  }
+
   ${({ selectedStyle }) => {
-    switch (selectedStyle) {
+  switch (selectedStyle) {
-      case 'Yotsuba':
+    case 'Yotsuba':
-        return `font-size: 9pt;
+      return `font-size: 9pt;
-        color: #b86;
+      color: #b86;
+      display: block;
+      margin-top: 5px;
+      
+      a {
+        font-weight: 400;
+        padding: 1px;
+        text-decoration: none;
+        color: maroon;
+      }
+
+      a:hover {
+        color: red;
+      }
+      
+      #board-nav-mobile {
+        background-color: #f0e0d6;
+        border-bottom: 2px solid #d9c5b7;
+      }
+
+      strong {
+        color: maroon;
+      }
+
+      .page-jump a {
+        color: navy;
+      }`;
+
+    case 'Yotsuba B':
+      return `font-size: 9pt;
+      color: #89a;
+      display: block;
+      
+      a {
+        font-weight: 400;
+        padding: 1px;
+        text-decoration: none;
+        color: #34345c;
+      }
+
+      a:hover {
+        color: #d00;
+      }
+      
+      strong {
+        color: #000;
+      }`;
+
+      case 'Futaba':
+        return `font-size: 11pt;
         display: block;
-        margin-top: 5px;
         
-        a {
+        a, a:visited {
           font-weight: 400;
           padding: 1px;
-          text-decoration: none;
+          color: #00e;
-          color: maroon;
+          text-decoration: underline;
         }
 
         a:hover {
           color: red;
         }
+      
+        #board-nav-mobile {
+          background-color: #f0e0d6;
+          border-bottom: 2px solid #d9c5b7;
+          font: 10px arial, helvetica, sans-serif;
+          font-style: normal;
+        }
 
-        .nav {
+        strong {
-          float: right;
+          color: maroon;
         }`;
 
-      case 'Yotsuba B':
+      case 'Burichan':
-        return `font-size: 9pt;
+        return `font-size: 11pt;
-        color: #89a;
         display: block;
         
-        a {
+        a, a:visited {
           font-weight: 400;
           padding: 1px;
-          text-decoration: none;
           color: #34345c;
+          text-decoration: underline;
         }
 
         a:hover {
           color: #d00;
         }
+      
+        #board-nav-mobile {
+          background-color: #d6daf0;
+          border-bottom: 2px solid #b7c5d9;
+          font: 10px arial, helvetica, sans-serif;
+          font-style: normal;
+        }`;
 
-        .nav {
+      case 'Tomorrow':
-          float: right;
+        return `font-size: 9pt;
+        color: #c5c8c6;
+        display: block;
+        
+        a, a:visited {
+          font-weight: 400;
+          padding: 1px;
+          text-decoration: none;
+          color: #81a2be;
         }
-        `;
 
-        case 'Futaba':
+        a:hover {
-          return `font-size: 11pt;
+          color: #5f89ab;
-          display: block;
+        }
-          
-          a, a:visited {
-            font-weight: 400;
-            padding: 1px;
-            color: #00e;
-            text-decoration: underline;
-          }
 
-          a:hover {
+        #board-nav-mobile {
-            color: red;
+          background-color: #1d1f21;
-          }
+          border-bottom: 2px solid #282a2e;
+        }`;
 
-          .nav {
+      case 'Photon':
-          float: right;
+        return `font-size: 9pt;
-          }
+        color: #333;
+        display: block;
+        
+        a, a:visited {
+          font-weight: 400;
+          padding: 1px;
+          text-decoration: none;
+          color: #f60;
+        }
 
-          `;
+        a:hover {
+          color: #ff3300;
+        }
 
-        case 'Burichan':
+        #board-nav-mobile {
-          return `font-size: 11pt;
+          background-color: #ddd;
-          display: block;
+          border-bottom: 2px solid #ccc;
-          
+        }`;
-          a, a:visited {
+  }
-            font-weight: 400;
+  }}`;
-            padding: 1px;
-            color: #34345c;
-            text-decoration: underline;
-          }
-
-          a:hover {
-            color: red;
-          }
-
-          .nav {
-          float: right;
-          }
-          `;
-
-        case 'Tomorrow':
-          return `font-size: 9pt;
-          color: #c5c8c6;
-          display: block;
-          
-          a, a:visited {
-            font-weight: 400;
-            padding: 1px;
-            text-decoration: none;
-            color: #81a2be;
-          }
-
-          a:hover {
-            color: #5f89ab;
-          }
-
-          .nav {
-           float: right;
-          }
-          `;
-
-        case 'Photon':
-          return `font-size: 9pt;
-          color: #333;
-          display: block;
-          
-          a, a:visited {
-            font-weight: 400;
-            padding: 1px;
-            text-decoration: none;
-            color: #f60;
-          }
-
-          a:hover {
-            color: #ff3300;
-          }
-
-          .nav {
-           float: right;
-          }
-          `;
-    }
-  }}
-`;
 
 export const Header = styled.div`
   ${({ selectedStyle }) => {
@@ -1163,8 +1252,8 @@ export const BoardForm = styled.div`
   .file-thumb img {
     border: none;
     float: left;
-    max-width: 200px;
+    max-width: 250px;
-    max-height: 200px;
+    max-height: 250px;
   }
 
   @media (min-width: 600px) {
@@ -1183,6 +1272,7 @@ export const BoardForm = styled.div`
     .post-info {
       display: flex;
       flex-wrap: wrap;
+      margin: 4px;
     }
   }