Is there a directive in angular material to resize sidenav?

There is a sidenav which shows list of clients and the right pane has the details of the client. I am trying to add a resize bar between them.

I used the following

which i found in the following

Angular JS resizable div directive

I tried following the above plunker example but the sidenav never resized. The right pane moves right but the left pane remain unchanged.

<div layout="row" flex>

        <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" id="sidenav" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
            <md-list class="sideBar">
                <md-item ng-repeat="client in data">
                    <md-item-content>
                        <md-button ng-click="selectClient(client);" >

                                {{client.name}} 
                        </md-button>
                    </md-item-content>
                </md-item>
            </md-list>
        </md-sidenav>

        <div id="sidebar-resizer" 
        resizer="vertical" 
        resizer-width="6" 
        resizer-left="#sidenav" 
        resizer-right="#primary-col"
        resizer-max="400">
    </div>
    <!-- viewport column -->

    <div layout="column" flex class="content-wrapper" id="primary-col">
        <div id="viewPort" ng-view></div>
    </div>
 </div> 

Thank you

Is there a directive in angular material to resize sidenav?

There is a sidenav which shows list of clients and the right pane has the details of the client. I am trying to add a resize bar between them.

I used the following

http://plnkr.co/edit/Zi2f0EPxmtEUmdoFR63B?p=preview

which i found in the following

Angular JS resizable div directive

I tried following the above plunker example but the sidenav never resized. The right pane moves right but the left pane remain unchanged.

<div layout="row" flex>

        <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" id="sidenav" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
            <md-list class="sideBar">
                <md-item ng-repeat="client in data">
                    <md-item-content>
                        <md-button ng-click="selectClient(client);" >

                                {{client.name}} 
                        </md-button>
                    </md-item-content>
                </md-item>
            </md-list>
        </md-sidenav>

        <div id="sidebar-resizer" 
        resizer="vertical" 
        resizer-width="6" 
        resizer-left="#sidenav" 
        resizer-right="#primary-col"
        resizer-max="400">
    </div>
    <!-- viewport column -->

    <div layout="column" flex class="content-wrapper" id="primary-col">
        <div id="viewPort" ng-view></div>
    </div>
 </div> 

Thank you

• javascript
• css
• angularjs
• angularjs-directive
• angular-material

4 Answers 4

Found a snippet that can help add resize where ever required and this works well with the Angular Material Design.

Angularjs version used 1.3.15 and Angular material design version Used is 0.9.8..

Tested in IE10+ and chrome.

Here is the Git hub link

https://github.com/Reklino/angular-resizable

And here is the working codepen example

http://codepen.io/Reklino/pen/raRaXq

PS-I had issues with the r-flex so I set it to false.It worked fine. 

Here is how I constructed a simple sidebar in angular, you may construct a similar things using angularjs or javascript too. I have used CSS flexbox model (which has a few resizable properties) in this example with a combination of mouse events.

Here is the HTML template:

<div class="main-container"  (mouseup)="changeResizeMode(false)" (mousemove)="changeLeftContainerWidth($event)" (mouseleave)="changeResizeMode(false)">
    <div class="left-container" [style.flex-basis]="leftContainerWidth">
           <!-- This is the left bar -->    
    </div>
    <div class="resize-handle" (mousedown)="changeResizeMode(true)" (mouseup)="changeResizeMode(false)" [style.background-color]="highlightHandle">
        <div>||</div>
    </div>
    <div class="right-container">
           <!-- This is the right bar -->
    </div>
</div>

Here is the typescript code, where I captured the mouse pointer's x-coordinate using $event object.

  leftContainerWidth: string = '33vw';
  mouseDownOnHandle: boolean = false;
  highlightHandle: string = 'blue';

  changeResizeMode(value: boolean): void{
    this.mouseDownOnHandle = value;
    if(value===true)
      this.highlightHandle = 'green';
    else
      this.highlightHandle = 'blue';
  }
  
  changeLeftContainerWidth(event: MouseEvent): void{
    if(this.mouseDownOnHandle)
      this.leftContainerWidth = event.clientX - 10 + "px";
  }

And finally the CSS code, implementing CSS flexboxes. :)

 .main-container{
     display: flex;
     height: 500px;
 }
   
 .left-container{
     flex-grow: 0;
     flex-shrink: 0;
 }

 .resize-handle{
     flex: 0 0 20px;
     cursor: col-resize;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .right-container{
     flex: 1 1 50vw;
 }

'width', 'max-width' and 'min-width' all are set to 304px for md-sidenav inside angular-material.css. You need to overwrite max & min width values in yr custom.css

To answer @LeoLozes: It took me a while (and a coffee break) to figure out the solution. You basically have to wrap the sidenav with another div that is resizable like this

<div resizable r-directions="['left']" r-flex="false">
    <md-sidenav layout="row" class="md-sidenav-right md-whiteframe-2dp" ...>
    </md-sidenav>
</div>