ソースを参照

Merge remote-tracking branch 'origin/master'

poohr 3週間前
コミット
4af603bcb3
2個のファイルの変更29行の追加15行の削除
  1. 10
    10
      src/app/share/side-menu/app-side-menu.html
  2. 19
    5
      src/app/share/side-menu/app-side-menu.ts

+ 10
- 10
src/app/share/side-menu/app-side-menu.html ファイルの表示

3
     <p class="menu-title">メニュー</p>
3
     <p class="menu-title">メニュー</p>
4
 
4
 
5
     <nav class="menu-list">
5
     <nav class="menu-list">
6
-      <a routerLink="/dashboard" routerLinkActive="active" class="menu-button">
6
+
7
+      <a routerLink="/dashboard" routerLinkActive="active" 
8
+        class="menu-button">
7
         ホーム
9
         ホーム
8
       </a>
10
       </a>
9
 
11
 
10
-      <a routerLink="/danka-list" routerLinkActive="active">
12
+      <a routerLink="/danka-list" [class.active]="isDankaActive()" class="menu-button">
11
         檀家
13
         檀家
12
       </a>
14
       </a>
13
 
15
 
14
-      <a routerLink="/danka-new" routerLinkActive="active" class="menu-button">
16
+      <a routerLink="/danka-new" routerLinkActive="active" 
17
+        class="menu-button">
15
         檀家登録
18
         檀家登録
16
       </a>
19
       </a>
17
 
20
 
18
-      <a routerLink="/memorial-list" routerLinkActive="active" class="menu-button">
21
+      <a routerLink="/memorial-list" routerLinkActive="active" 
22
+        class="menu-button">
19
         年次法要
23
         年次法要
20
       </a>
24
       </a>
21
 
25
 
22
-      <a routerLink="/event" routerLinkActive="active" class="menu-button">
26
+      <a routerLink="/event" routerLinkActive="active"  class="menu-button">
23
         行事
27
         行事
24
       </a>
28
       </a>
25
 
29
 
26
-      <a routerLink="/search" routerLinkActive="active" class="menu-button">
30
+      <a routerLink="/search" routerLinkActive="active"  class="menu-button">
27
         まとめて検索
31
         まとめて検索
28
       </a>
32
       </a>
29
 
33
 
30
-      <!--  ユーザー数が増えた際に実装    -->
31
-      <!--      <a routerLink="/user-setting" routerLinkActive="active" class="menu-button">-->
32
-      <!--        利用者設定-->
33
-      <!--      </a>-->
34
     </nav>
34
     </nav>
35
   </div>
35
   </div>
36
 </aside>
36
 </aside>

+ 19
- 5
src/app/share/side-menu/app-side-menu.ts ファイルの表示

1
 import { Component } from '@angular/core';
1
 import { Component } from '@angular/core';
2
-import { Router, RouterModule } from '@angular/router';
2
+import { Router, RouterLink, RouterLinkActive } from '@angular/router';
3
 
3
 
4
 @Component({
4
 @Component({
5
   selector: 'app-side-menu',
5
   selector: 'app-side-menu',
6
   standalone: true,
6
   standalone: true,
7
-  imports: [RouterModule],
7
+  imports: [RouterLink, RouterLinkActive],
8
   templateUrl: './app-side-menu.html',
8
   templateUrl: './app-side-menu.html',
9
   styleUrl: './app-side-menu.scss',
9
   styleUrl: './app-side-menu.scss',
10
 })
10
 })
12
 
12
 
13
   constructor(public router: Router) {}
13
   constructor(public router: Router) {}
14
 
14
 
15
-  isDankaActive(): boolean {
16
-    return this.router.url.includes('danka');
17
-  }
15
+isDankaActive(): boolean {
16
+  const url = this.router.url.split('?')[0];
17
+
18
+  const dankaPages = [
19
+    '/danka-list',
20
+    '/danka-detail',
21
+    '/danka-edit',
22
+  ];
23
+
24
+  const isDankaPage = dankaPages.some(path =>
25
+    url.startsWith(path)
26
+  );
27
+
28
+  const isExcluded = url.startsWith('/danka-new');
29
+
30
+  return isDankaPage && !isExcluded;
31
+}
18
 }
32
 }

読み込み中…
キャンセル
保存