[add]

共通のサイドメニューを作成

src/app/share/side-menu/app-side-menu.html

@@ -0,0 +1,31 @@
+<aside class="side-menu">
+  <div class="menu-inner">
+    <p class="menu-title">メニュー</p>
+
+    <nav class="menu-list">
+      <a routerLink="/dashboard" routerLinkActive="active" class="menu-button">
+        ホーム
+      </a>
+
+      <a routerLink="/danka-list" routerLinkActive="active" class="menu-button">
+        檀家（世帯）
+      </a>
+
+      <a routerLink="/annual-memorial-list" routerLinkActive="active" class="menu-button">
+        年次法要
+      </a>
+
+      <a routerLink="/search" routerLinkActive="active" class="menu-button">
+        まとめて検索
+      </a>
+
+      <a routerLink="/family-tree" routerLinkActive="active" class="menu-button">
+        家系図
+      </a>
+
+      <a routerLink="/user-setting" routerLinkActive="active" class="menu-button">
+        利用者設定
+      </a>
+    </nav>
+  </div>
+</aside>

src/app/share/side-menu/app-side-menu.scss

@@ -0,0 +1,72 @@
+.side-menu {
+  width: 170px;
+  padding-left: 26px;
+  box-sizing: border-box;
+}
+
+.menu-inner {
+  width: 140px;
+  min-height: 650px;
+  padding: 22px 10px 18px;
+  background: #ffffff;
+  border: 2px solid #d8caba;
+  border-radius: 22px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+.menu-title {
+  margin: 0 0 14px;
+  padding-left: 10px;
+  font-size: 15px;
+  font-weight: 700;
+  color: #5a4a3c;
+}
+
+.menu-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.menu-button {
+  width: 100%;
+  min-height: 48px;
+  padding: 0 8px;
+  border: 2px solid #d8caba;
+  border-radius: 8px;
+  background: #ffffff;
+  color: #3a2f27;
+  font-size: 15px;
+  font-weight: 700;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  box-sizing: border-box;
+}
+
+.menu-button:hover {
+  background: #f6efe6;
+}
+
+.menu-button.active {
+  background: #8a6543;
+  border-color: #8a6543;
+  color: #ffffff;
+}
+
+.menu-note {
+  margin-top: auto;
+  padding: 10px 8px;
+  border: 2px solid #d8caba;
+  border-radius: 8px;
+  background: #eadfce;
+  color: #6a5a4b;
+  font-size: 13px;
+  line-height: 1.35;
+  text-align: center;
+  box-sizing: border-box;
+}

src/app/share/side-menu/app-side-menu.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AppSideMenu } from './app-side-menu';
+
+describe('AppSideMenu', () => {
+  let component: AppSideMenu;
+  let fixture: ComponentFixture<AppSideMenu>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppSideMenu],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AppSideMenu);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/share/side-menu/app-side-menu.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { DankaList } from '../../pages/danka-list/danka-list';
+
+@Component({
+  selector: 'app-side-menu',
+  imports: [RouterLink, ],
+  templateUrl: './app-side-menu.html',
+  styleUrl: './app-side-menu.scss',
+})
+export class AppSideMenu {}