Ionic css sidemenu

[dweedlez]

I’m trying to implement this css to my sidemenu, but I’m not getting anyone can help me how can I put it?

Image

APP.HTML sidemenu
<ion-menu [content]=“content”>

<ion-content>
    <ion-list>
        <ion-item >
            <ion-avatar>
                <img src="assets/img/user.png">
            </ion-avatar>
            <h2>User    </h2>

        </ion-item>
        <button menuClose ion-item  *ngFor="let p of pages" [class.active-menu]="menuActive(p)" (click)="openPage(p)">
            <ion-icon name="{{p.icon}}" item-left></ion-icon>
            {{p.title}}
        </button>

        <button menuClose ion-item (click)="openLogout()">
            <ion-icon name="ios-arrow-round-forward-outline" item-left></ion-icon>
            Sair
        </button>
    </ion-list>
</ion-content>

<ion-nav [root]=“rootPage” #content swipeBackEnabled=“false”>

CSS

.ios, .md {
	page-menu {
		ion-menu {
			ion-toolbar {
				.toolbar-background {
					background-color: map-get($colors, dark) !important;
				}
				ion-buttons {
					.bar-button {
						color: map-get($colors, primary);
					}
				}
			}
			ion-content {
				background-color: map-get($colors, dark) !important;
				.active-menu {
				    border-left: 4px solid map-get($colors, primary) !important;
				}
				.item {
					background-color: transparent;
					border-left: 4px solid map-get($colors, dark);
					color: map-get($colors, light);
					&.activated {
						background-color: lighten( map-get($colors, dark), 4% );
						border-left: 4px solid lighten( map-get($colors, dark), 4% );
					}
				}
				.list {
					.item-block {
						.item-inner {
							border-bottom: 1px solid lighten(map-get($colors, dark), 6%) !important;
						}
						&:last-child {
							.item-inner {
								border-bottom: 0 !important;
							}
						}
					}
					>ion-item {
						padding-left: 0;
						ion-label {
							text-align: center;
							>ion-avatar {
								img {
									border: 5px solid darken( map-get($colors, dark), 4% );
									display: inline;
									height: 120px !important;
			    					width: 120px !important;
								}
							}
							h2 {
								color: map-get($colors, light);
							}
							p {
								color: map-get($colors, primary);
							}
						}
					}
					ion-icon {
						&[item-left] {
							color: lighten(map-get($colors, dark), 30%);
						}
					}
				}
			}
		}
	}
}
.ios {
	page-menu {
		button {
			&.item {
				.item-inner {
					background-image: none;
				}
			}
		}
	}
}

[Heenavora]

Menu.html

<ion-split-pane when="sm">

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar id="menutoolbar">
      <ion-item id="menuProfile" menuClose (click)="userProfileClick()">
        <ion-avatar item-start>
          <img alt="" src="{{userData.userImgUrl}}">
        </ion-avatar>
        <h2>{{userData.firstName}} {{userData.lastName}}</h2>
        <h5>{{userType}}</h5>
      </ion-item>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list id="menulist">
      <ion-item-group *ngIf="pages.length > 0">
        <ion-item-divider color="light"></ion-item-divider>
        <div *ngFor="let p of pages">
          <button menuClose ion-item [ngClass]="{'divider': p.break, 'hidden': !p.enabled}" (click)="openPage(p)">{{p.title}}
            <ion-badge class="counts" item-end *ngIf="p.badge && p.badge > 0">{{p.badge}}</ion-badge>
          </button>
        </div>
      </ion-item-group>
      <button menuClose ion-item (click)="contactUsClick()">{{labels.LBL_CONTACT_US || 'Contact Us'}}</button>
        <button menuClose ion-item (click)="logoutClick()">{{labels.LBL_LOGOUT || 'Logout'}}</button>
        <p class="tradeMark">{{userData.tradeMarkText}}</p>
      </ion-item-group>
    </ion-list>
  </ion-content>
</ion-menu>
 <ion-nav [root]="rootPage" #content main swipeBackEnabled="false"></ion-nav>
 </ion-split-pane>

Menu.scss

page-menu {
  ion-avatar img {
    height: 60px !important;
    width: 60px !important;
  }
  .counts {
    background: #8cc541;
  }
  .toolbar .item {
    background-color: transparent;
  }
  .toolbar .label {
    color: #FFFFFF;
  }
  #menuProfile.item .label {
    h2,
    h5 {
      color: #FFFFFF;
    }
  }
  .toolbar .item h2 {
    font-size: 1.9rem;
    font-weight: 300;
    color: #FFFFFF;
  }
  .toolbar .item h5 {
    font-size: 1.2rem;
    font-weight: 200;
    color: #FFFFFF;
  }
  ion-list#menulist .item .item-inner .label {
    margin: 5px 3px 5px 0px;
  }
  #menulist.list .item .item-inner,
  #menutoolbar.toolbar .item .item-inner {
    border-bottom: 0px;
  }
  .menu-inner .item-divider {
    height: 1px;
    min-height: 1px;
    background-color: #ccc;
  }
  .item.divider {
    border-bottom: 1px solid #dedede;
  }
  .item .icon {
    color: #787878;
  }
}