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

<!DOCTYPE html>
<html>
<head>
    <title>Basic usage</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div id="example">
    <div class="demo-section k-content wide">
        <div id="toolbar"></div>
        <div id="drawer">
            <div id="drawer-content">
                <div id="Inbox">
                    <ul class="inboxList">
                        <li>
                            <h6>Monday meeting</h6>
                            <p>Hi Tom, Since Monday I'll be out of office, I'm rescheduling the meeting for Tuesday.</p>
                        </li>
                        <li>
                            <h6>I'm sorry, Tom</h6>
                            <p>Hi Tom, my aunt comes for a visit this Saturday, so I can't come back to St. Pete...</p>
                        </li>
                    </ul>
                </div>
                <div id="Notifications" class="hidden">
                    <ul>
                        <li>Monday meeting</li>
                        <li>Regarding org chart changes</li>
                        <li>Meeting with Cliff</li>
                        <li>Global Marketing Meeting</li>
                        <li>Out tonight with collegues?</li>
                    </ul>
                </div>
                <div id="Calendar" class="hidden">
                    <ul>
                        <li>
                            <h6>11/5 Monday</h6>
                            <p>Martha Birthday</p>
                        </li>
                        <li>
                            <h6>15/6 Sunday</h6>
                            <p>Job interview for internal position</p>
                        </li>
                    </ul>
                </div>
                <div id="Attachments" class="hidden">
                    <ul>
                        <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>
                    </ul>
                </div>
                <div id="Favourites" class="hidden">
                    <ul>
                        <li>90% Discount!</li>
                        <li>90% Discount!</li>
                        <li>One time offer!</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            $("#drawer").kendoDrawer({
                template: "<ul> \
                            <li data-role='drawer-item' class='k-state-selected'><span class='k-icon k-i-inbox'></span><span class='k-item-text' data-id='Inbox'>Inbox</span></li> \
                            <li data-role='drawer-separator'></li> \
                            <li data-role='drawer-item'><span class='k-icon k-i-notification k-i-bell'></span><span class='k-item-text' data-id='Notifications'>Notifications</span></li> \
                            <li data-role='drawer-item'><span class='k-icon k-i-calendar'></span><span class='k-item-text' data-id='Calendar'>Calendar</span></li> \
                            <li data-role='drawer-separator'></li> \
                            <li data-role='drawer-item'><span class='k-icon k-i-hyperlink-email'></span><span class='k-item-text' data-id='Attachments'>Attachments</span></li> \
                            <li data-role='drawer-item'><span class='k-icon k-i-star-outline k-i-bookmark-outline'></span><span class='k-item-text' data-id='Favourites'>Favourites</span></li> \
                          </ul>",
                mode: "push",
                mini: true,
                itemClick: function (e) {
                    if(!e.item.hasClass("k-drawer-separator")){
                        e.sender.drawerContainer.find("#drawer-content > div").addClass("hidden");
                        e.sender.drawerContainer.find("#drawer-content").find("#" + e.item.find(".k-item-text").attr("data-id")).removeClass("hidden");
                    }
                },
                position: 'left',
                minHeight: 330,
                swipeToOpen: true
            });
        });

        function toggleDrawer() {
            var drawerInstance = $("#drawer").data().kendoDrawer;
            var drawerContainer = drawerInstance.drawerContainer;

            if(drawerContainer.hasClass("k-drawer-expanded")) {
                drawerInstance.hide();
            } else {
                drawerInstance.show();
            }
        }

        $("#toolbar").kendoToolBar({
            items: [
                { type: "button", icon: "menu", attributes: { "class": "k-flat" }, click: toggleDrawer},
                { template: "<h3 style='margin-left: 20px;'>Mail Box</h3>" }
            ]
        });
    </script>
    <style>
        #drawer-content li {
            font-size: 1.2em;
            padding-left: .89em;
            background: 0 0;
            border-radius: 0;
            border-width: 0 0 1px;
            border-color: rgba(33, 37, 41, 0.125);
            border-style: solid;
            line-height: 1.5em;
            padding: 1.09em .84em 1.23em .84em;
        }

        #drawer-content li:last-child {
            border: 0;
        }

        .hidden {
            display: none;
        }

        #example .demo-section {
            max-width: 640px;
        }

        .k-toolbar .k-icon {
            font-size: 18px;
        }
    </style>
</div>


    
</body>
</html>