CODEWITHSUNDEEP
javascriptangularjsangular-material
kbysiec
kbysiec

Reputation: 618

md-sidenav full height + lack of animation

I would like to have a toolbar at the top with a full height sidebar on the left fixed when the screen is big - toolbar should start from the sidenav. The right side only should be scrollable. If the screen is smaller, the sidebar should hide, and to show it, the user should click the button on the toolbar which should be 100% width.

Currently, my sidenav is not full height, as a result, my toolbar is 100% width. I tried to use flex to acheive it but I have done something wrong.

I didn't implement a controller to manage showing the menu button yet, but I assume my problem is independent from it.

Here is my code:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <link rel="stylesheet"
          href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.5/angular-material.min.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

</head>
<body ng-app="app" ng-cloak>

<div ng-controller="mainCtrl" layout="column" flex>
    <md-toolbar layout="row">
        <div class="md-toolbar-tools">
            <md-button class="md-icon-button" arial-label="menu">
                <md-icon md-font-icon="fa-ellipsis-h" class="fa fa-2x"></md-icon>
            </md-button>
            <h2>test</h2>
            <span flex=""></span>
            <md-button class="md-icon-button" arial-label="favourite">
                <md-icon md-font-icon="fa-star" class="fa fa-2x"></md-icon>
            </md-button>
        </div>
    </md-toolbar>

<section layout="row" flex >
        <md-sidenav style="max-width:320px;" layout="column"
                class="md-sidenav-left"
                md-component-id="left"
                md-is-locked-open="$mdMedia('gt-sm')"
                md-whiteframe="4"
                flex>
            <md-toolbar>
                <h1 class="md-toolbar-tools">menu</h1>
            </md-toolbar>
            <md-content layout-padding>
                <p>
                    This sidenav is locked open on your device. To go back to the default behavior,
                    narrow your display.
                </p>
            </md-content>
        </md-sidenav>

        <md-content flex class="md-padding">
        Some content !!
    </md-content>
</section>

</div>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.11.2 used here -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.5/angular-material.min.js"></script>

<script type="text/javascript">
    var app = angular.module('app', ['ngMaterial']);
    app.controller('mainCtrl', function () {

    });
</script>
</body>
</html>

Upvotes: 1

Views: 333

Answers (2)

kbysiec
kbysiec

Reputation: 618

Thanks to nextt1 who solution was very close to this I wanted to acheive, I finally got it.

here is my solution:

http://codepen.io/AgilePlayers/pen/eZvBLB

Upvotes: 0

nextt1
nextt1

Reputation: 3988

Check Out this soultion. http://codepen.io/next1/pen/mPWrvB

Let me know if anything is missing. I used md-button in the toolbar. You can easliy replace it with md-icon.

Upvotes: 1

Related Questions