<%@ Page Language="c#" AutoEventWireup="true" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
<title>Telerik ASP.NET Example</title>
<link href="styles.css" rel="stylesheet" />
<script src="scripts.js"></script>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<div class="demo-container size-narrow" runat="server">
<telerik:RadToolBar runat="server" ID="RadToolBar1" OnClientButtonClicked="OnClientButtonClicked">
<Items>
<telerik:RadToolBarButton Value="toggle" CssClass="k-i-menu k-icon">
</telerik:RadToolBarButton>
<telerik:RadToolBarButton>
<ItemTemplate>
<h3 class="toolbar-title">Mail Box</h3>
</ItemTemplate>
</telerik:RadToolBarButton>
</Items>
</telerik:RadToolBar>
<telerik:RadDrawer runat="server" ID="RadDrawer1" CssClass="RadDrawer1CssSelector" Mode="push" AccessKey="W" Navigatable="true"
Position="left" MinHeight="330" DrawerWidth="200" Mini="true" SwipeToOpen="true" ShowBorders="true">
<ClientEvents OnItemClick="OnItemClick" />
<MiniSettings Width="50" />
<ContentTemplate>
<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>
</ContentTemplate>
<ItemsTemplate>
<ul>
<li data-role='drawer-item' class='k-state-selected'><span class='k-icon k-i-inbox'></span><span class='k-item-text'>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'>Notifications</span></li>
<li data-role='drawer-item'><span class='k-icon k-i-calendar'></span><span class='k-item-text'>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'>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'>Favourites</span></li>
</ul>
</ItemsTemplate>
</telerik:RadDrawer>
</div>
</form>
</body>
</html>