Angularで右側からサイドバーを出したいとき

AngularでWebアプリを作成中に
他の機能も追加したいので、
メニューバーを表示させたいなって思いました。

スマホでしか使わない予定なので、
右利きの自分に合わせて
右上のメニューボタンを押すと
右からスッとメニューが出てくるイメージです。
というわけで早速ググってコピペしようと思ったのですが、、、

(ﾟ∀ﾟ)・・・？

ほとんどのサンプルは左上にメニューボタンがあって、
左からスッとメニューが出てきます。
（PCだったら確かにこっちが自然ですよね。）

というわけで、
右側からスッと出すためのメニューの作成手順を記載します。

１．npm install

npm install --save @angular/material @angular/cdk

2.マテリアルの追加

ng add @angular/material

3.コンポーネントの追加

ng generate @angular/material:material-nav --name=sidenav

4.追加したコンポーネントをapp.component.htmlに記載

<app-sidenav></app-sidenav>

※元々app.component.htmlに記載していた内容は
新しく追加したsidenav.component.htmlの
「add component here！」に転記します。

5.sidenav.component.htmlのmat-sidenavタブに
position="end"を追加します。
後はCSSでボタンを右端に移動させたら、完成です。

  <mat-sidenav #drawer class="sidenav" fixedInViewport
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="(isHandset$ | async) === false"
      position="end">

こんな簡単におしゃれなサイドバーが出来るのって
かなりすごいですよね(っ´ω`c)

Angularアプリケーションプログラミング 開発の勘所と手順をしっかりマスター [ 山田祥寛 ] 価格：4070円（税込、送料無料) (2021/3/21時点) 楽天で購入