jube-fork/Jube.App/wwwroot/kendo/examples/mobile-drawer/index.html

<div data-role="view" id="drawer-home" data-layout="drawer-layout" data-title="Inbox" data-use-native-scrolling="true">
    <ul data-role="listview" class="inboxList">
        <li>
            <h6>07:56 John Doe</h6>
            <h4>Monday meeting</h4>
            <p>Hi Tom, Since Monday I'll be out of office, I'm rescheduling the meeting for Tuesday.</p>
        </li>
        <li>
            <h6>08:21 Joe Harper</h6>
            <h4>I'm sorry, Tom</h4>
            <p>Hi Tom, my aunt comes for a visit this Saturday, so I can't come back to St. Pete...</p>
        </li>
        <li>
            <h6>08:33 Sarah Connor</h6>
            <h4>Regarding org chart changes</h4>
            <p>Tom, I checked the new org chart last night and I have some reservations about it...</p>
        </li>
        <li>
            <h6>08:40 John Doe</h6>
            <h4>Re: Regarding org chart changes</h4>
            <p>Agree with Sarah...</p>
        </li>
        <li>
            <h6>09:16 Jane Parker</h6>
            <h4>Your Costume is ready</h4>
            <p>Hi mr. Sawyer, I'm sorry for the delay, your Halloween costume is ready. The bears...</p>
        </li>
        <li>
            <h6>11:03 Becky Thatcher</h6>
            <h4>Out tonight?</h4>
            <p>Honey, wanna go out tonight to grab some chicken? My weekly vouchers for cooking...</p>
        </li>
    </ul>
</div>

<div data-role="view" id="drawer-starred" data-layout="drawer-layout" data-title="Starred Items" data-use-native-scrolling="true">
    <ul data-role="listview">
        <li data-icon="star">Monday meeting</li>
        <li data-icon="star">Regarding org chart changes</li>
        <li data-icon="star">Re: Regarding org chart changes</li>
        <li data-icon="star">Your Costume is ready</li>
        <li data-icon="star">Out tonight?</li>
    </ul>
</div>

<div data-role="view" id="drawer-drafts" data-layout="drawer-layout" data-title="Drafts" data-use-native-scrolling="true">
    <ul data-role="listview">
        <li data-icon="compose">Re: Monday meeting</li>
        <li data-icon="compose">Untitled message 1</li>
        <li data-icon="compose">Untitled message 2</li>
        <li data-icon="compose">Re: Regarding org chart changes</li>
        <li data-icon="compose">Re: Re: Regarding org chart changes</li>
        <li data-icon="compose">Re: Your Costume is ready</li>
        <li data-icon="compose">Re: Out tonight?</li>
        <li data-icon="compose">Untitled message 3</li>
    </ul>
</div>

<div data-role="view" id="drawer-sent" data-layout="drawer-layout" data-title="Sent Items" data-use-native-scrolling="true">
    <ul data-role="listview">
        <li>Build enterprise apps</li>
        <li>Fw: Regarding Multiline textbox</li>
        <li>Away next week</li>
        <li>Fw: Your Costume is ready</li>
        <li>Update completed</li>
        <li>Survey</li>
        <li>Problem with this account</li>
        <li>Advice For Designers</li>
        <li>Fw: Missing Book</li>
        <li>Fun & useful reading</li>
    </ul>
</div>

<div data-role="view" id="drawer-deleted" data-layout="drawer-layout" data-title="Deleted Items" data-use-native-scrolling="true">
    <ul data-role="listview">
        <li data-icon="trash">Untitled message 4</li>
        <li data-icon="trash">Untitled message 5</li>
    </ul>
</div>

<div data-role="view" id="drawer-spam" data-layout="drawer-layout" data-title="Spam" data-use-native-scrolling="true">
    <ul data-role="listview">
        <li>90% Discount!</li>
        <li>90% Discount!</li>
        <li>One time offer!</li>
    </ul>
    <a data-role="button" class="spam">Delete Spam</a>
</div>

<div data-role="drawer" id="my-drawer" style="width: 20em" data-views="['drawer-home', 'drawer-starred', 'drawer-deleted', 'drawer-spam', 'drawer-drafts', 'drawer-sent', '@Url.Content("~/mobile/m/drawer/index.html")']" data-use-native-scrolling="true">
    <header data-role="header">
        <div data-role="navbar">
            <a data-align="left" data-role="button" class="nav-button" data-icon="contacts"></a>
            <span data-role="view-title">My Mail</span>
            <a data-align="right" data-role="button" class="nav-button" data-icon="settings"></a>
        </div>
    </header>
    <ul data-role="listview" class="km-listview-icons">
        <li data-icon="downloads"><a href="drawer/index" data-transition="none">Inbox <span class="km-badge">6</span></a></li>
        <li data-icon="favorites"><a href="#drawer-starred" data-transition="none">Starred Items <span class="km-badge">5</span></a></li>
        <li data-icon="edit"><a href="#drawer-drafts" data-transition="none">Drafts <span class="km-badge">8</span></a></li>
        <li data-icon="reply"><a href="#drawer-sent" data-transition="none">Sent Items</a></li>
        <li data-icon="trash"><a href="#drawer-deleted" data-transition="none">Deleted Items</a></li>
        <li data-icon="organize"><a href="#drawer-spam" data-transition="none">Spam</a></li>
    </ul>

    <ul data-role="listview" data-type="group" class="km-listview-icons">
        <li>Tasks
            <ul>
                <li data-icon="favorites">To Do</li>
                <li data-icon="favorites">In Progress</li>
                <li data-icon="favorites">Done</li>
                <li data-icon="favorites">High Priority</li>
                <li data-icon="favorites">Low Priority</li>
            </ul>
        </li>
        <li>Account
            <ul>
                <li data-icon="settings">Settings</li>
                <li data-icon="action">Log Out</li>
            </ul>
        </li>
    </ul>
</div>

<div data-role="layout" data-id="drawer-layout" data-show="showDemoLayout">
    <header data-role="header">
        <div data-role="navbar">
            <a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-icon" data-align="left"></a>
            <span data-role="view-title"></span>
            <a data-align="right" data-icon="source-code" data-click="goToSourceCode" data-role="button" title="Show this demo source code"></a>
            <a data-align="right" data-role="button" class="nav-button" data-icon="home" href="#/"></a>
        </div>
    </header>
</div>

<script>
    // reset global drawer instance, for demo purposes
    kendo.mobile.ui.Drawer.current = null;
</script>