<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@ViewBag.Title - My Telerik MVC Application</title>
	<link href="https://cdn.kendostatic.com/2022.1.119/styles/kendo.bootstrap-main.min.css" rel="stylesheet" type="text/css" />
	<link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
	<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
	<script src="https://cdn.kendostatic.com/2022.1.119/js/jquery.min.js"></script>
	<script src="https://cdn.kendostatic.com/2022.1.119/js/jszip.min.js"></script>
	<script src="https://cdn.kendostatic.com/2022.1.119/js/kendo.all.min.js"></script>
	<script src="https://cdn.kendostatic.com/2022.1.119/js/kendo.aspnetmvc.min.js"></script>
	<script src="@Url.Content("~/Scripts/bootstrap.min.js")"></script>
	<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>
</head>
<body class="k-content">
    <nav class="navbar navbar-dark bg-dark">
        <div class="container-fluid d-flex justify-content-between p-0">
            <h1 class="navbar-brand d-flex align-items-center">Project Title</h1>
            <button id="configure" class="k-rpanel-toggle k-button k-button-md k-rounded-md k-icon-button k-button-solid-primary btn-toggle">
                <span class="k-button-icon k-icon k-i-menu"></span>
            </button>
        </div>
    </nav>
    
    <div id="responsive-panel" class="navbar navbar-dark bg-light">
        @(Html.Kendo().Menu()
            .Name("Menu")
            .HtmlAttributes(new { style="width:100%" })
            .Items(items =>
            {
                items.Add().Text("Item 1");
                items.Add().Text("Item 2");
                items.Add().Text("Item 3");
                items.Add().Text("Disabled item").Enabled(false);
            })
        )
    </div>

    <main>
        <div class="container-fluid">
            @RenderBody()
        </div>
    </main>

    <footer class="footer text-center d-flex align-items-center">
        <div class="container-fluid">
            <p class="text-muted">Copyright © @DateTime.Now.Year Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
        </div>
    </footer>

    <script>
        $(document).ready(function () {
            $("#responsive-panel").kendoResponsivePanel({
                breakpoint: 768,
                autoClose: false,
                orientation: "top"
            });
        });
        function onclick(e) {
            $("#responsive-panel").getKendoResponsivePanel().toggle();
        }
    </script>
</body>
</html>
