Expose-aside-when in Ionic 2

Ionic Framework ionic-v3
1

Hi!

I am new in Ionic 2 (well, in Ionic in general) and I am trying to build an application just for learning this framework.

In the application, I have a side Menu and I am trying to have the same behavior that implements the directive “expose-aside-when” in Ionic 1, but I am not able to find it in Ionic 2.

Do you know if this directive is not implemented yet? and, will be it supported in a future?

Thanks!
Marc

1 Like
2

Before the expose-aside-when directive in Ionic1 saw the light, you could accomplish the same effect with some @media css.

For more info look at the codepen on Side Menu sticky or always visible on iPad/Tablets

Although not a very elegant solution, maybe this could work also with Ionic 2 …

3

i have faced same issue in my application.I used below @media css
@media (min-width: 767px) {
.menu-content {
-webkit-transform: translate3d(270px, 0px, 0px) !important;
width: ~“calc(100% - 270px)” !important;
}

.menu {
z-index: 2 !important;
box-shadow: -1px 0 2px rgba(0,0,0,.2),1px 0 2px rgba(0,0,0,.2);
}

.bar-header button.ion-navicon {
display: none;
}
}

Side menu is not static

image
Pasted image1916×992 119 KB

How to resolve this?

4

Five months later

I am not sure that this is a good solution, but at least I can see the side menu all the time.

@media (min-width: 767px) {
  ion-menu {  /* always show menu */
    display: block;
  }

  .menu-inner {  /* always show menu */
    transform: translateX(0px) !important;
  }

  ion-nav.menu-content { /* always show menu content */
    cursor: pointer;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    transform: translateX(304px !important);
  }

  .ion-page { /* recalculate page contents width deducted by menu width */
    width: calc(100% - 304px);
  }

  button[menutoggle] { /* hide all non-working menu buttons */
    display: none;
  }
}

The problem with this solution is that I cannot show and hide menu any more. It’s always there.

If I really want to show/hide menu, I have to add a custom code for it.