Change both menu width for ionic side menu

Question

I have left and right ionic side menu, which i want to change both the menu width. I have successfully change the left menu width as shown below but i am not sure how to change the right menu width. Currently, the left menu width change but when right menu is being toggle, the right menu content is distorted.

.menu.menu-left{
    width: calc(100% - 70px) !important;
}
.menu-open .menu-content{
    transform: translate3d(calc(100% - 70px), 0px, 0px) !important;
}

Codepen Link

Answer 1

Just add the "menu-width" in variables.scss

$menu-width: 200px;

Answer 2

Use a class name to change the width of the side menu.

<ion-menu class="custom" side="end" menuId="first">
</ion-menu>

In CSS you can use like below.

.custom {
  --width: 500px;
}