Tab routing

components/pages/Lists.jsx

@@ -4,17 +4,22 @@ import Store from '../../store';
 import * as selectors from '../../store/selectors';
 
 import VirtualScroll from '../ui/VirtualScroll';
-import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/react';
+import {
+  IonPage,
+  IonHeader,
+  IonToolbar,
+  IonTitle,
+  IonContent,
+  IonList,
+  IonItem,
+  IonLabel,
+} from '@ionic/react';
+import { useEffect, useState } from 'react';
 
 const ListEntry = ({ list, ...props }) => (
-  <Link href={`/lists/${list.id}`}>
-    <a
-      {...props}
-      className="p-4 border-solid dark:border-gray-800 border-b cursor-pointer dark:text-gray-200 block"
-    >
-      <span className="text-md">{list.name}</span>
-    </a>
-  </Link>
+  <IonItem href={`/tabs/lists/${list.id}`}>
+    <IonLabel>{list.name}</IonLabel>
+  </IonItem>
 );
 
 const AllLists = ({ onSelect }) => {
@@ -30,7 +35,7 @@ const AllLists = ({ onSelect }) => {
   );
 };
 
-const Lists = ({ selected, ...props }) => {
+const Lists = () => {
   return (
     <IonPage>
       <IonHeader>
@@ -38,10 +43,13 @@ const Lists = ({ selected, ...props }) => {
           <IonTitle>Lists</IonTitle>
         </IonToolbar>
       </IonHeader>
-      <IonContent>
-        <List className="h-full w-full">
-          <AllLists />
-        </List>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Lists</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <AllLists />
       </IonContent>
     </IonPage>
   );

components/pages/Settings.jsx

@@ -1,6 +1,8 @@
 import Store from '../../store';
 import * as selectors from '../../store/selectors';
 
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonList } from '@ionic/react';
+
 const Settings = () => {
   const enableNotifications = Store.useState();
   const settings = Store.useState(selectors.getSettings);
@@ -13,9 +15,7 @@ const Settings = () => {
         </IonToolbar>
       </IonHeader>
       <IonContent>
-        <List className="h-full w-full">
-          <AllLists />
-        </List>
+        <IonList></IonList>
       </IonContent>
     </IonPage>
   );

components/ui/Tab.jsx

@@ -1,30 +0,0 @@
-import classNames from 'classnames';
-import Icon from './Icon';
-import Link from '../../components/Link';
-import { useEffect, useState } from 'react';
-
-const Tab = ({ title, href, icon, selected, selectedIcon, onClick }) => {
-  return (
-    <Link href={href}>
-      <a
-        onClick={onClick}
-        href="#"
-        className={classNames('px-6 rounded-md text-sm text-center font-medium cursor-pointer', {
-          'text-gray-500 dark:text-white': !selected,
-          'text-gray-800 dark:text-gray-600': selected,
-        })}
-      >
-        {icon && (
-          <Icon
-            icon={selected ? selectedIcon : icon}
-            className="cursor-pointer"
-            style={{ fontSize: '18px' }}
-          />
-        )}
-        <label className="block cursor-pointer">{title}</label>
-      </a>
-    </Link>
-  );
-};
-
-export default Tab;

components/ui/TabBar.jsx

@@ -1,13 +0,0 @@
-const TabBar = ({ children }) => (
-  <nav
-    id="tab-bar"
-    className="py-2 h-16 w-full flex justify-center items-start bg-gray-50 z-10 dark:bg-gray-800"
-    style={{
-      height: `calc(env(safe-area-inset-bottom, 0px) + 56px)`,
-    }}
-  >
-    {children}
-  </nav>
-);
-
-export default TabBar;

components/ui/Toggle.jsx

@@ -1,5 +0,0 @@
-import ReactToggle from 'react-toggle';
-
-const Toggle = props => <ReactToggle {...props} icons={false} />;
-
-export default Toggle;