update kanban,

2025-06-06 13:44:21 +08:00
parent 43a285dd2c
commit 3bcb40c5ef
11 changed files with 1094 additions and 23 deletions
--- a/03_source/mobile/src/pages/DemoKanbanBoard/components/Menu.tsx
+++ b/03_source/mobile/src/pages/DemoKanbanBoard/components/Menu.tsx
@@ -0,0 +1,109 @@
+import {
+  IonContent,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonMenu,
+  IonMenuToggle,
+  IonNote,
+} from '@ionic/react';
+
+import { useLocation } from 'react-router-dom';
+import {
+  addOutline,
+  addSharp,
+  barChartOutline,
+  barChartSharp,
+  bookmarkOutline,
+  listOutline,
+  listSharp,
+} from 'ionicons/icons';
+import './Menu.css';
+
+import { SettingsStore } from '../store';
+import { handleViewChange } from '../store/SettingsStore';
+
+const appPages = [
+  {
+    title: 'Add Item',
+    url: '/page/add/0',
+    iosIcon: addOutline,
+    mdIcon: addSharp,
+  },
+];
+
+const actions = [
+  {
+    title: 'Board View',
+    slug: 'Board',
+    url: false,
+    onClick: () => handleViewChange('Board'),
+    iosIcon: barChartOutline,
+    mdIcon: barChartSharp,
+  },
+  {
+    title: 'List View',
+    slug: 'List',
+    url: false,
+    onClick: () => handleViewChange('List'),
+    iosIcon: listOutline,
+    mdIcon: listSharp,
+  },
+];
+
+const Menu = (): React.JSX.Element => {
+  const location = useLocation();
+  const view = SettingsStore.useState((s) => s.view);
+
+  return (
+    <IonMenu contentId="main" type="overlay">
+      <IonContent>
+        <IonList id="inbox-list">
+          <IonListHeader>Welcome back</IonListHeader>
+          <IonNote>Ionic Kanban Board</IonNote>
+          {appPages.map((appPage, index) => {
+            return (
+              <IonMenuToggle key={index} autoHide={false}>
+                <IonItem
+                  className={view === appPage.slug ? 'selected' : ''}
+                  routerLink={appPage.url}
+                  routerDirection="none"
+                  lines="none"
+                  detail={false}
+                >
+                  <IonIcon slot="start" ios={appPage.iosIcon} md={appPage.mdIcon} />
+                  <IonLabel>{appPage.title}</IonLabel>
+                </IonItem>
+              </IonMenuToggle>
+            );
+          })}
+        </IonList>
+
+        <IonList id="inbox-list">
+          <IonListHeader>Toggle View</IonListHeader>
+          <IonNote>View items in list or board view</IonNote>
+
+          {actions.map((action, index) => {
+            return (
+              <IonMenuToggle key={index} autoHide={false}>
+                <IonItem
+                  className={view === action.slug ? 'selected' : ''}
+                  onClick={action.onClick}
+                  lines="none"
+                  detail={false}
+                >
+                  <IonIcon slot="start" ios={action.iosIcon} md={action.mdIcon} />
+                  <IonLabel>{action.title}</IonLabel>
+                </IonItem>
+              </IonMenuToggle>
+            );
+          })}
+        </IonList>
+      </IonContent>
+    </IonMenu>
+  );
+};
+
+export default Menu;