fit:menu

myapp/src/app/tab1/tab1.page.html

@@ -2,9 +2,12 @@
 
     <div class="header">
         <ion-buttons slot="start">
-        <ion-button id="menuBtn">
+            <ion-menu-button>
+                 <ion-icon slot="icon-only" name="menu-outline"></ion-icon>
+            </ion-menu-button>
+        <!-- <ion-button id="menuBtn">
             <ion-icon slot="icon-only" name="menu-outline"></ion-icon>
-        </ion-button>
+        </ion-button> -->
         </ion-buttons> 
         <div class="header-title">日记本</div> 
         <ion-buttons slot="end">
@@ -19,7 +22,35 @@
 
 </ion-header>
 
-<ion-content [fullscreen]="true">
+<ion-menu side="start" menuId="main-menu" contentId="main-content">
+    <ion-header>
+        <ion-toolbar>
+            <ion-title>菜单</ion-title>
+        </ion-toolbar>
+    </ion-header>
+    <ion-content>
+        <ion-list>
+            <ion-item button (click)="navigateTo('settings')">
+                <ion-icon name="settings-outline" slot="start"></ion-icon>
+                <ion-label>设置</ion-label>
+            </ion-item>
+            <ion-item button (click)="navigateTo('profile')">
+                <ion-icon name="person-outline" slot="start"></ion-icon>
+                <ion-label>我的</ion-label>
+            </ion-item>
+            <ion-item button (click)="navigateTo('activity')">
+                <ion-icon name="pulse-outline" slot="start"></ion-icon>
+                <ion-label>动态</ion-label>
+            </ion-item>
+            <ion-item button (click)="navigateTo('drafts')">
+                <ion-icon name="archive-outline" slot="start"></ion-icon>
+                <ion-label>草稿箱</ion-label>
+            </ion-item>
+        </ion-list>
+    </ion-content>
+</ion-menu>
+
+<ion-content [fullscreen]="true" id="main-content">
     
     <!-- 内容区域 -->
     <div class="content" id="diaryList">

myapp/src/app/tab1/tab1.page.scss

@@ -33,11 +33,11 @@ body {
     letter-spacing: 0.5px;
     }
 
-    ion-buttons {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-    }
+    // ion-buttons {
+    //     display: flex;
+    //     align-items: center;
+    //     gap: 8px;
+    // }
     
     ion-button {
         --box-shadow: none;

myapp/src/app/tab1/tab1.page.ts

@@ -23,7 +23,9 @@ export class Tab1Page implements OnInit{
   ) {
     this.loadDiaries();
   }
+  
 
+  navigateTo(setting?:string){}
   diaryList: CloudObject[]=[];
   async loadDiaries() {
     let query=new CloudQuery("Diary")