Drawer - Fixed Dual Slide

See example: Drawer - Fixed Dual Slide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">

    <title>CLUI</title>
    <link rel="shortcut icon" href="static/favicon.png"/>

    <!-- CSS to be documented -->
    <link rel="stylesheet" href="css/corelogic-ui.css">

    <!-- Main libraries -->
    <script src="js/vendor/jquery.min.js"></script>
    <script src="js/corelogic-ui.min.js"></script>
</head>
<body class="min-width-1170 hide-overflow-x">
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-collapse-btn">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="navbar-header">
            <div class="navbar-logo"></div>
            <div class="application-name">
                <h1>CoreLogic UI</h1>
            </div>
        </div>

        <div class="navbar-collapse collapse" id="navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="/components_-_drawer.html?page=drawer">Back To CLUI</a></li>
            </ul>

            <form class="navbar-form navbar-search">
                <div class="form-group">
                    <div class="input-group">
                        <label class="sr-only" for="navSearch">Search for an address...</label>
                        <input class="form-control" id="navSearch" placeholder="Search for an address..."/>
                        <i class="fa fa-search left-icon"></i>
                    </div>
                </div>
            </form>
        </div>
    </div>
</nav>
<div class="secondary-nav">
    <div class="container-fluid">
        <ul class="secondary-tabs">
            <li class="active"><a class="secondary-tab" href="#">Secondary</a></li>
            <li><a class="secondary-tab" href="#">Navigation</a></li>
            <li><a class="secondary-tab" href="#">Element</a></li>
            <li><a class="secondary-tab" href="#">Example</a></li>
        </ul>
    </div>
</div>
<div class="container-fluid">
    <div class="row no-gutter">
        <div class="drawer-md-fixed drawer-slide">
            <div class="drawer-left">
                <div class="drawer">
                    <div class="drawer-header">
                        <h2>Joe's Ice Cream</h2>
                    </div>
                    <div class="drawer-body">
                        <div class="drawer-column">
                            <div class="container-fluid">
                                <div class="row mg-bt-15">
                                    <h2>MENU</h2>
                                </div>
                                <div class="row mg-bt-15 vertical-parent">
                                    <div class="col-xs-10">
                                        <label class="p" for="toggle-demo1">Ice Cream</label>
                                    </div>
                                    <div class="vertical-center right text-right col-xs-2">
                                        <div class="toggle-container">
                                            <input id="toggle-demo1" class="cl-toggle toggle-green" type="checkbox"
                                                   name="toggle-demo1" onclick="window.clui.toggleSecondaryDrawer();"/>
                                            <label for="toggle-demo1"></label>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mg-bt-15 vertical-parent">
                                    <div class="col-xs-10">
                                        <label class="p" for="toggle-demo7">Milkshake</label>
                                    </div>
                                    <div class="vertical-center right text-right col-xs-2">
                                        <div class="toggle-container">
                                            <input id="toggle-demo7" class="cl-toggle toggle-green" type="checkbox"
                                                   name="toggle-demo7"/>
                                            <label for="toggle-demo7"></label>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mg-bt-15 vertical-parent">
                                    <div class="col-xs-10">
                                        <label class="p" for="toggle-demo8">Root Beer Float</label>
                                    </div>
                                    <div class="vertical-center right text-right col-xs-2">
                                        <div class="toggle-container">
                                            <input id="toggle-demo8" class="cl-toggle toggle-green" type="checkbox"
                                                   name="toggle-demo8"/>
                                            <label for="toggle-demo8"></label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="drawer-column">
                            <div class="container-fluid">
                                <div class="row mg-bt-15">
                                    <h2>FLAVORS</h2>
                                </div>
                                <div class="row mg-bt-15 vertical-parent">
                                    <div class="col-xs-10">
                                        <label class="p" for="toggle-demo3">Chocolate</label>
                                    </div>
                                    <div class="vertical-center right text-right col-xs-2">
                                        <div class="toggle-container">
                                            <input id="toggle-demo3" class="cl-toggle toggle-black" type="checkbox"
                                                   name="toggle-demo3"/>
                                            <label for="toggle-demo3"></label>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mg-bt-15 vertical-parent">
                                    <div class="col-xs-10">
                                        <label class="p" for="toggle-demo4">Vanilla</label>
                                    </div>
                                    <div class="vertical-center right text-right col-xs-2">
                                        <div class="toggle-container">
                                            <input id="toggle-demo4" class="cl-toggle toggle-yellow" type="checkbox"
                                                   name="toggle-demo4"/>
                                            <label for="toggle-demo4"></label>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mg-bt-15 vertical-parent">
                                    <div class="col-xs-10">
                                        <label class="p" for="toggle-demo5">Strawberry</label>
                                    </div>
                                    <div class="vertical-center right text-right col-xs-2">
                                        <div class="toggle-container">
                                            <input id="toggle-demo5" class="cl-toggle toggle-red" type="checkbox"
                                                   name="toggle-demo5"/>
                                            <label for="toggle-demo5"></label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="drawer-footer">
                        <button class="btn btn-primary">Place Order</button>
                    </div>
                </div>
            </div>
            <div class="drawer-right background-fixed">
                <div class="container-full container-background no-top"
                     style="background-image: url('https://placekitten.com/g/800/800')">
                </div>
            </div>
        </div>
    </div>
</div>
<script>
  $(function () {
    $('.toggleButton').on('click', window.clui.toggleDrawer);

    window.clui.autoCompleteInit('#navSearch', {
      minLength: 2,
      source: function (request, response) {
        var settings = {
          async: true,
          url: "https://clp-typeahead-service-int.clgxlabs.net/autocomplete",
          crossDomain: true,
          data: {
            input: request.term
          },
          method: "GET"
        };

        $.ajax(settings).done(function (data) {
          response($.map(data.result_set, function (item) {
            return {
              label: item.address,
              value: item.address
            };
          }));
        });
      }
    });
  })
</script>
</body>
</html>