Adding some depth / shadow to the RadSideDrawer menu on iOS


#1

Although it’s not exposed directly you can add a little shadow to the RadSideDrawer menu. This is especially useful if the contrast between your menu and the main content is low, or when the menu is drawn over the main content. In other cases it’s just added sugar. And I like sugar!

So in case you have an Angular app, this is the code to add to the component that contains a view with a <RadSideDrawer>:


export class MenuComponent implements AfterViewInit {

  @ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
  private _drawer: SideDrawerType;

  ngAfterViewInit(): void {
    this._drawer = this.drawerComponent.sideDrawer;
    this._changeDetectionRef.detectChanges();

    // here comes the magic!
    if (this._drawer.ios) {
      // if your menu is drawn 'below' the hostview, do this:
      this._drawer.ios.defaultSideDrawer.style.shadowMode = 1; // TKSideDrawerShadowMode.Hostview;
      // .. but if the menu is drawn 'above' the hostview, do this:
      this._drawer.ios.defaultSideDrawer.style.shadowMode = 2; // TKSideDrawerShadowMode.SideDrawer;

      // if you have shadowMode = 2, then you can add a little dim to the lower layer to add some depth. Keep it subtle though:
      this.drawer.ios.defaultSideDrawer.style.dimOpacity = 0.12;

      // then tweak the shadow to your liking:
      this._drawer.ios.defaultSideDrawer.style.shadowOpacity = 0.75; // 0-1, higher is darker
      this._drawer.ios.defaultSideDrawer.style.shadowRadius = 5; // higher is more spread

      // bonus feature: control the menu animation speed (in seconds)
      this._drawer.ios.defaultSideDrawer.transitionDuration = 0.25;
    }
  }
}

Which results in something like this (most notable on the pink-ish bit on the bottom):


#2

how did you style the side drawer ? I would like to do something like yours but I don’t know where to start… I am using just Javascript without Angular


#3

The fist child in RadSideDrawer is a StackLayout with a CSS class where I apply CSS properties as usual. Anything specific you’d like to know?


#4

Could you show me the css property please?


#5

This is with Angular, but that doesn’t really matter:

<RadSideDrawer drawerContentSize="228">
  <StackLayout tkDrawerContent class="menu-contents-wrapper">
.menu-contents-wrapper {
  background-color: #333740;
  height: 100%;
}

#6

how did you put the log out button in the bottom and how did you inster that light gray line under the third option? Also how did you change the color of a selected option? And last question, in the action bar I don’t know how to put the “three bars” icon on the left… I’have heard that is not possible to change the navigation button