Soverein/sanasto-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tweaked app shell

Browse Source
This commit is contained in:
Max Lynch
2022-10-02 10:50:56 -05:00
parent 2b16b043b3
commit 0a69f76c32
9 changed files with 203 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/AppShell.jsx
+36 -9
View File
@@ -1,11 +1,14 @@
import { IonApp, IonRouterOutlet, IonSplitPane, setupIonicReact } from '@ionic/react';
import { IonApp, IonLabel, IonRouterOutlet, setupIonicReact, IonTabs, IonTabBar, IonTabButton, IonIcon } from '@ionic/react';
import { cog, flash, list } from 'ionicons/icons';
import { StatusBar, Style } from '@capacitor/status-bar';
import { IonReactRouter } from '@ionic/react-router';
import { Redirect, Route } from 'react-router-dom';
import Menu from './Menu';
import Tabs from './pages/Tabs';
import Feed from './pages/Feed';
import Lists from './pages/Lists';
import ListDetail from './pages/ListDetail';
import Settings from './pages/Settings';
setupIonicReact({});
@@ -21,13 +24,37 @@ const AppShell = () => {
return (
<IonApp>
<IonReactRouter>
<IonSplitPane contentId="main">
<Menu />
<IonRouterOutlet id="main">
<Route path="/tabs" render={() => <Tabs />} />
<Route exact path="/" render={() => <Redirect to="/tabs" />} />
<IonTabs>
<IonRouterOutlet>
<Route path="/tabs/feed" exact={true}>
<Feed />
</Route>
<Route path="/tabs/lists" exact={true}>
<Lists />
</Route>
<Route path="/tabs/lists/:listId" exact={true}>
<ListDetail />
</Route>
<Route path="/tabs/settings" exact={true}>
<Settings />
</Route>
<Route path="/" render={() => <Redirect to="/tabs/feed" />} exact={true} />
</IonRouterOutlet>
</IonSplitPane>
<IonTabBar slot="bottom">
<IonTabButton tab="tab1" href="/tabs/feed">
<IonIcon icon={flash} />
<IonLabel>Feed</IonLabel>
</IonTabButton>
<IonTabButton tab="tab2" href="/tabs/lists">
<IonIcon icon={list} />
<IonLabel>Lists</IonLabel>
</IonTabButton>
<IonTabButton tab="tab3" href="/tabs/settings">
<IonIcon icon={cog} />
<IonLabel>Settings</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
</IonReactRouter>
</IonApp>
);
components/Menu.jsx
-80
View File
@@ -1,80 +0,0 @@
import { StatusBar, Style } from '@capacitor/status-bar';
import {
IonContent,
IonHeader,
IonIcon,
IonItem,
IonLabel,
IonList,
IonMenu,
IonMenuToggle,
IonTitle,
IonToolbar,
} from '@ionic/react';
import { useEffect, useState } from 'react';
import { cog, flash, list } from 'ionicons/icons';
const pages = [
{
title: 'Feed',
icon: flash,
url: '/tabs/feed',
},
{
title: 'Lists',
icon: list,
url: '/tabs/lists',
},
{
title: 'Settings',
icon: cog,
url: '/tabs/settings',
},
];
const Menu = () => {
const [isDark, setIsDark] = useState(false);
const handleOpen = async () => {
try {
await StatusBar.setStyle({
style: isDark ? Style.Dark : Style.Light,
});
} catch {}
};
const handleClose = async () => {
try {
await StatusBar.setStyle({
style: isDark ? Style.Dark : Style.Light,
});
} catch {}
};
useEffect(() => {
setIsDark(window.matchMedia('(prefers-color-scheme: dark)').matches);
}, []);
return (
<IonMenu side="start" contentId="main" onIonDidOpen={handleOpen} onIonDidClose={handleClose}>
<IonHeader>
<IonToolbar>
<IonTitle>Menu</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonList>
{pages.map((p, k) => (
<IonMenuToggle autoHide={false} key={k}>
<IonItem routerLink={p.url} routerDirection="none" detail={false} lines="none">
<IonIcon icon={p.icon} slot="start" />
<IonLabel>{p.title}</IonLabel>
</IonItem>
</IonMenuToggle>
))}
</IonList>
</IonContent>
</IonMenu>
);
};
export default Menu;
components/pages/ListDetail.jsx
+4 -4
View File
@@ -11,6 +11,7 @@ import {
IonTitle,
IonToolbar,
} from '@ionic/react';
import { useParams } from 'react-router-dom';
import Store from '../../store';
import * as actions from '../../store/actions';
@@ -35,14 +36,13 @@ const ListItemEntry = ({ list, item }) => (
const ListDetail = ({ match }) => {
const lists = Store.useState(selectors.getLists);
const {
params: { listId },
} = match;
const params = useParams();
const { listId } = params;
const loadedList = lists.find(l => l.id === listId);
return (
<IonPage>
<IonHeader>
<IonHeader translucent>
<IonToolbar>
<IonButtons slot="start">
<IonBackButton defaultHref="/tabs/lists" />
components/pages/Lists.jsx
+4 -1
View File
@@ -9,6 +9,7 @@ import {
IonContent,
IonItem,
IonLabel,
IonList,
} from '@ionic/react';
const ListEntry = ({ list, ...props }) => (
@@ -43,7 +44,9 @@ const Lists = () => {
<IonTitle size="large">Lists</IonTitle>
</IonToolbar>
</IonHeader>
<AllLists />
<IonList>
<AllLists />
</IonList>
</IonContent>
</IonPage>
);
components/pages/Tabs.jsx
-39
View File
@@ -1,39 +0,0 @@
import { Redirect, Route } from 'react-router-dom';
import { IonRouterOutlet, IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import { cog, flash, list } from 'ionicons/icons';
import Home from './Feed';
import Lists from './Lists';
import ListDetail from './ListDetail';
import Settings from './Settings';
const Tabs = () => {
return (
<IonTabs>
<IonRouterOutlet>
<Route path="/tabs/feed" component={Home} exact={true} />
<Route path="/tabs/lists" component={Lists} exact={true} />
<Route path="/tabs/lists/:listId" component={ListDetail} exact={true} />
<Route path="/tabs/settings" component={Settings} exact={true} />
<Route path="/tabs" render={() => <Redirect to="/tabs/feed" />} exact={true} />
</IonRouterOutlet>
<IonTabBar slot="bottom">
<IonTabButton tab="tab1" href="/tabs/feed">
<IonIcon icon={flash} />
<IonLabel>Feed</IonLabel>
</IonTabButton>
<IonTabButton tab="tab2" href="/tabs/lists">
<IonIcon icon={list} />
<IonLabel>Lists</IonLabel>
</IonTabButton>
<IonTabButton tab="tab3" href="/tabs/settings">
<IonIcon icon={cog} />
<IonLabel>Settings</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
);
};
export default Tabs;