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

Working on nav

Browse Source
This commit is contained in:
Max Lynch
2022-10-02 11:08:54 -05:00
parent a2fa883294
commit 60a1f20c9a
4 changed files with 48 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/AppShell.jsx
+5 -31
View File
@@ -9,6 +9,7 @@ import Feed from './pages/Feed';
import Lists from './pages/Lists'; import Lists from './pages/Lists';
import ListDetail from './pages/ListDetail'; import ListDetail from './pages/ListDetail';
import Settings from './pages/Settings'; import Settings from './pages/Settings';
import Tabs from './pages/Tabs';
setupIonicReact({}); setupIonicReact({});
@@ -24,37 +25,10 @@ const AppShell = () => {
return ( return (
<IonApp> <IonApp>
<IonReactRouter> <IonReactRouter>
<IonTabs> <IonRouterOutlet id="main">
<IonRouterOutlet> <Route path="/tabs" render={() => <Tabs />} />
<Route path="/tabs/feed" exact={true}> <Route path="/" render={() => <Redirect to="/tabs/feed" />} exact={true} />
<Feed /> </IonRouterOutlet>
</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>
<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> </IonReactRouter>
</IonApp> </IonApp>
); );
components/pages/ListDetail.jsx
+2 -7
View File
@@ -42,7 +42,7 @@ const ListDetail = ({ match }) => {
return ( return (
<IonPage> <IonPage>
<IonHeader translucent> <IonHeader>
<IonToolbar> <IonToolbar>
<IonButtons slot="start"> <IonButtons slot="start">
<IonBackButton defaultHref="/tabs/lists" /> <IonBackButton defaultHref="/tabs/lists" />
@@ -50,12 +50,7 @@ const ListDetail = ({ match }) => {
<IonTitle>{loadedList.name}</IonTitle> <IonTitle>{loadedList.name}</IonTitle>
</IonToolbar> </IonToolbar>
</IonHeader> </IonHeader>
<IonContent fullscreen> <IonContent>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">{loadedList.name}</IonTitle>
</IonToolbar>
</IonHeader>
<ListItems list={loadedList} /> <ListItems list={loadedList} />
</IonContent> </IonContent>
</IonPage> </IonPage>
components/pages/Lists.jsx
+2 -2
View File
@@ -33,12 +33,12 @@ const AllLists = ({ onSelect }) => {
const Lists = () => { const Lists = () => {
return ( return (
<IonPage> <IonPage>
<IonHeader> <IonHeader translucent={true}>
<IonToolbar> <IonToolbar>
<IonTitle>Lists</IonTitle> <IonTitle>Lists</IonTitle>
</IonToolbar> </IonToolbar>
</IonHeader> </IonHeader>
<IonContent fullscreen> <IonContent fullscreen={true}>
<IonHeader collapse="condense"> <IonHeader collapse="condense">
<IonToolbar> <IonToolbar>
<IonTitle size="large">Lists</IonTitle> <IonTitle size="large">Lists</IonTitle>
components/pages/Tabs.jsx
+39
View File
@@ -0,0 +1,39 @@
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" render={() => <Home />} exact={true} />
<Route path="/tabs/lists" render={() => <Lists />} exact={true} />
<Route path="/tabs/lists/:listId" render={() => <ListDetail />} exact={true} />
<Route path="/tabs/settings" render={() => <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;