Angularでサイドメニューを追加する手順

Angularにヘッダーメニューを追加する手順で作成した Angularプロジェクトに、サイドメニューを追加しました。
ソースコードは GitHub で公開しています。

修正前後の画面
1. 修正前
2. 修正後
ヘッダーメニューコンポーネント作成
追加変更したソースコード解説
実装した環境

修正前後の画面

修正前

修正後

サイドメニューが追加されている。

ヘッダーメニューコンポーネント作成

VS Code のターミナルで下記コマンドを実行


> ng generate component sidemenu

> ng generate component sidemenu

sidemenuコンポーネントが追加された。

追加変更したソースコード解説

Angular/Src3_SideMenu/src/app/app.component.html


<div class="container">
  <app-sidemenu></app-sidemenu>

  <main class="main">

<app-sidemenu></app-sidemenu>


  </main>
</div>

</main>

</div>

Angular/Src3_SideMenu/src/app/app.component.scss

app.component.htmlにあった<style>要素は全てこちらへ移動。
「Hello Angular」のレイアウトがそれっぽくなるようにスタイルを追加し、背景色を少し濃くしてレイアウトの境界線を見易く修正。
<container>のスタイルも追加。


body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.container {
  display: flex;
  margin-top: 10px;
  height: calc(100vh - 130px);
}

main {
  flex-grow: 1;
  height: calc(100vh - 160px);
  background-color: rgb(241, 238, 238);
  overflow-y: auto;
}

body, html {

margin: 0;

padding: 0;

width: 100%;

height: 100%;

}

.container {

display: flex;

margin-top: 10px;

height: calc(100vh - 130px);

}

main {

flex-grow: 1;

height: calc(100vh - 160px);

background-color: rgb(241, 238, 238);

overflow-y: auto;

}

Angular/Src3_SideMenu/src/app/app.component.ts

sidemenuコンポーネントの参照を追加。


import { SidemenuComponent } from "./sidemenu/sidemenu.component";

import { SidemenuComponent } from "./sidemenu/sidemenu.component";


  imports: [RouterOutlet, HeadermenuComponent, SidemenuComponent],

imports: [RouterOutlet, HeadermenuComponent, SidemenuComponent],

Angular/Src3_SideMenu/src/app/sidemenu/sidemenu.component.html

sidemenuのレイアウトを追加。


<nav class="sidemenu">
  <ul>
    <li><a href="#">ダッシュボード</a></li>
    <li><a href="#">プロフィール</a></li>
    <li><a href="#">設定</a></li>
    <li><a href="#">ログアウト</a></li>
  </ul>
</nav>

<ul>

<li><a href="#">ダッシュボード</a></li>

<li><a href="#">プロフィール</a></li>

<li><a href="#">ログアウト</a></li>

</ul>

</nav>

Angular/Src3_SideMenu/src/app/sidemenu/sidemenu.component.scss

sidemenuのスタイルを追加。ChatGPTに適当に作ってもらった。


.sidemenu {
  width: 150px;
  height: calc(100vh - 140px);
  padding: 20px;
  background-color: #2c3e50;
  color: white;
  flex-direction: column;
  margin-right: 10px;

  ul {
    list-style: none;
    padding: 0;

    li {
      margin-bottom: 15px;

      a {
        color: white;
        text-decoration: none;
        font-weight: bold;
        transition: color 0.3s;

        &:hover {
          color: #3498db;
        }
      }
    }
  }
}

.sidemenu {

width: 150px;

height: calc(100vh - 140px);

padding: 20px;

background-color: #2c3e50;

color: white;

flex-direction: column;

margin-right: 10px;

ul {

list-style: none;

padding: 0;

li {

margin-bottom: 15px;

a {

color: white;

text-decoration: none;

font-weight: bold;

transition: color 0.3s;

&:hover {

color: #3498db;

}

Angular/Src3_SideMenu/src/app/sidemenu/sidemenu.component.spec.ts

※「ng generate component」コマンドで作成した時点から変更ないので省略。

Angular/Src3_SideMenu/src/app/sidemenu/sidemenu.component.ts