refactor: settings route, link, component

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

@@ -12,7 +12,9 @@ interface BoardNavProps {
 
 const BoardNavDesktop = ({ subplebbitAddresses }: BoardNavProps) => {
   const { t } = useTranslation();
-  const isInCatalogView = isCatalogView(useLocation().pathname, useParams());
+  const location = useLocation();
+  const params = useParams();
+  const isInCatalogView = isCatalogView(location.pathname, params);
 
   return (
     <div className={styles.boardNavDesktop}>
@@ -30,7 +32,8 @@ const BoardNavDesktop = ({ subplebbitAddresses }: BoardNavProps) => {
         ]
       </span>
       <span className={styles.navTopRight}>
-        [<Link to='/settings'>{t('settings')}</Link>] [<Link to='/'>{t('home')}</Link>]
+        [<Link to={!location.pathname.endsWith('settings') ? location.pathname + '/settings' : location.pathname}>{t('settings')}</Link>] [<Link to='/'>{t('home')}</Link>
+        ]
       </span>
     </div>
   );
@@ -68,7 +71,7 @@ const BoardNavMobile = ({ subplebbitAddresses, subplebbitAddress }: BoardNavProp
         {boardSelect}
       </div>
       <div className={styles.pageJump}>
-        <Link to='settings'>{t('settings')}</Link>
+        <Link to={useLocation().pathname + '/settings'}>{t('settings')}</Link>
         <Link to='/'>{t('home')}</Link>
       </div>
     </div>

src/components/settings-modal/index.ts

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

src/components/settings-modal/settings-modal.module.css

@@ -0,0 +1,50 @@
+.settingsModal {
+  top: 60px;
+  width: 400px;
+  height: auto;
+  max-height: 80%;
+  left: calc(50% - 25px);
+  overflow-y: auto;
+  margin-left: -178px;
+  position: absolute;
+  padding: 2px 5px 5px;
+  font-size: 14px;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
+}
+
+.header {
+  font-size: 16px;
+  font-weight: 700;
+  margin-bottom: 5px;
+  margin-top: 5px;
+  padding-bottom: 5px;
+  text-align: center;
+  line-height: 14px;
+}
+
+.version {
+  font-size: 11px;
+  position: absolute;
+  display: block;
+  margin-left: 5px;
+}
+
+.closeButton {
+  right: 5px;
+  width: 18px;
+  height: 18px;
+  display: block;
+  background-size: 100%;
+  cursor: pointer;
+  position: absolute;
+  top: 5px;
+  image-rendering: pixelated;
+}
+
+@media (max-width: 640px) {
+  .settingsModal {
+    width: 350px !important;
+    max-height: 60% !important;
+    left: calc(50% - 2px) !important;
+  }
+}

src/components/settings-modal/settings-modal.tsx

@@ -0,0 +1,18 @@
+import styles from './settings-modal.module.css';
+import { useNavigate } from 'react-router-dom';
+
+const SettingsModal = () => {
+  const navigate = useNavigate();
+
+  return (
+    <div className={styles.settingsModal}>
+      <div className={styles.header}>
+        <span className={styles.version}>v0.2.0</span>
+        Settings
+        <span className={styles.closeButton} title='close' onClick={() => navigate(-1)} />
+      </div>
+    </div>
+  );
+};
+
+export default SettingsModal;