Untitled

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Side Menu Exposed On Large Viewport</title>

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

  </head>

  <body ng-controller="MainCtrl">

    <ion-side-menus>

      <fader></fader>

      <ion-side-menu-content style="width:70%;">
        <ion-header-bar class="bar-balanced">
          <h1 class="title title-left"><i class="ion-cloud"></i> Go Cloud</h1>
        </ion-header-bar>

        <ion-wallet-select ng-class="isWalletShown?'shown':'hidden'">
          <ion-item class="item-icon-right item-stable" ng-click="toggleWallet()">
            <i class="icon" ng-class="isWalletShown?'ion-arrow-up-b':'ion-arrow-down-b'"></i>
            Default
          </ion-item>
          <wallet-content>
            <ion-scroll style="height:100%;">
              <ion-item class="item-icon-left">
                <i class="icon ion-filing"></i>
                Total
              </ion-item>
              <ion-item class="item-icon-left">
                <i class="icon ion-filing"></i>
                Credit Card
              </ion-item>
              <ion-item class="item-icon-left">
                <i class="icon ion-filing"></i>
                Default
              </ion-item>
            </ion-scroll>
            <ion-footer-bar class="add-wallet">
              <h1 class="title">+ Add wallet</h1>
            </ion-footer-bar>
          </wallet-content>
        </ion-wallet-select>

        <ion-content class="has-footer has-wallet">
          <ion-list>
            <ion-item>Transactions</ion-item>
            <ion-item>Debts</ion-item>
            <ion-item>Trends</ion-item>
            <ion-item>Categories</ion-item>
            <div class="item item-divider">PLANNING</div>
            <ion-item>Budget</ion-item>
            <ion-item>Savings</ion-item>
          </ion-list>
        </ion-content>
        <ion-footer-bar class="bar-energized premium-bar" ng-class="isWalletShown?'hidden':'shown'">
          <h1 class="title">GO PREMIUM</h1>
        </ion-footer-bar>
      </ion-side-menu-content>

      <ion-side-menu side="right" width="{{width()}}" can-drag-menu>
        <ion-header-bar class="bar-balanced">
          <button menu-close class="button button-icon ion-navicon"></button>
          <h1 class="title">Credit card</h1>
        </ion-header-bar>
        <ion-content class="padding">
          <p>
            On a small viewport (less than 768px window width), the left menu will be hidden, but can be shown by swiping left to right, or toggling the button in the top left of the header. On a large viewport (greater than or equal to 768px), the left menu will stay open.
          </p>
          <p>
            Using <code>large</code> as the attribute's value is an alias to <code>(min-width:768px)</code> since it is the most common use-case. However, for added flexibility, any valid media query could be added as the value, such as <code>(min-width:600px)</code> or even multiple queries such as <code>(min-width:750px) and (max-width:1200px)</code>.
          </p>
        </ion-content>
      </ion-side-menu>

    </ion-side-menus>

  </body>
</html>