201 lines
7.8 KiB
HTML
201 lines
7.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<!-- Required Meta Tags Always Come First -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
|
<!-- Title -->
|
|
<title>Detached Sidebar Overlay (Container) | Front - Admin & Dashboard Template</title>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="shortcut icon" href="@@autopath/favicon.ico">
|
|
|
|
<!-- Font -->
|
|
<link href="@@vars.themeFont" rel="stylesheet">
|
|
|
|
<!-- CSS Implementing Plugins -->
|
|
<!-- bundlecss:vendor [@@autopath] -->
|
|
<link rel="stylesheet" href="@@autopath/node_modules/bootstrap-icons/font/bootstrap-icons.css">
|
|
|
|
<!-- CSS Front Template -->
|
|
<!-- bundlecss:theme [@@autopath] @@vars.version -->
|
|
@@if(layoutBuilder.extend.switcherSupport === false) {
|
|
<link rel="stylesheet" href="@@autopath/assets/css/theme@@if(themeAppearance.layoutSkin === 'dark'){-dark}.css">
|
|
}
|
|
|
|
@@if(layoutBuilder.extend.switcherSupport === true) {
|
|
<link rel="preload" href="@@autopath/assets/css/theme.css" data-hs-appearance="default" as="style">
|
|
<link rel="preload" href="@@autopath/assets/css/theme-dark.css" data-hs-appearance="dark" as="style">
|
|
|
|
<style data-hs-appearance-onload-styles>
|
|
* {
|
|
transition: unset !important;
|
|
}
|
|
|
|
body {
|
|
opacity: 0;
|
|
}
|
|
</style>
|
|
}
|
|
</head>
|
|
|
|
<body class="bg-light">
|
|
@@if(layoutBuilder.extend.switcherSupport === true) {
|
|
<script src="@@autopath/assets/js/hs.theme-appearance.js"></script>
|
|
}
|
|
|
|
<!-- ========== HEADER ========== -->
|
|
@@include("@@autopath/partials/navbar/sidebar-detached.html")
|
|
<!-- ========== END HEADER ========== -->
|
|
|
|
<!-- ========== MAIN CONTENT ========== -->
|
|
<main id="content" role="main" class="main">
|
|
<!-- Content -->
|
|
<div class="bg-dark">
|
|
<div class="content container" style="height: 25rem;">
|
|
<!-- Page Header -->
|
|
<div class="page-header page-header-light page-header-reset">
|
|
<div class="row align-items-center">
|
|
<div class="col">
|
|
<h1 class="page-header-title">Dashboard</h1>
|
|
</div>
|
|
|
|
<div class="col-auto">
|
|
<a class="btn btn-primary" href="#">My dashboard</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Row -->
|
|
</div>
|
|
<!-- End Page Header -->
|
|
</div>
|
|
</div>
|
|
<!-- End Content -->
|
|
|
|
<!-- Content -->
|
|
<div class="content container" style="margin-top: -20rem;">
|
|
<!-- Navbar Vertical -->
|
|
<div class="navbar-expand-lg">
|
|
<!-- Navbar Toggle -->
|
|
<button class="navbar-toggler text-white border-white-10 w-100 mb-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarVerticalNavMenu" aria-controls="navbarVerticalNavMenu" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="d-flex justify-content-between align-items-center">
|
|
<span class="navbar-toggler-text text-white">Nav menu</span>
|
|
<span class="navbar-toggler-default">
|
|
<i class="bi-list"></i>
|
|
</span>
|
|
<span class="navbar-toggler-toggled">
|
|
<i class="bi-x"></i>
|
|
</span>
|
|
</span>
|
|
</button>
|
|
<!-- End Navbar Toggle -->
|
|
|
|
@@include("@@autopath/partials/sidebar/detached.html")
|
|
</div>
|
|
<!-- End Navbar Vertical -->
|
|
|
|
<!-- Sidebar Detached Content -->
|
|
<div class="sidebar-detached-content mt-3 mt-lg-0">
|
|
<!-- Card -->
|
|
<div class="card card-centered mb-3 mb-lg-5">
|
|
<div class="card-body py-10">
|
|
<!-- Title -->
|
|
<div class="text-center">
|
|
<img class="img-fluid mb-5" src="@@autopath/assets/svg/layouts/sidebar-detached-overlay-container.svg" alt="Image Description" data-hs-theme-appearance="default" style="max-width: 15rem;">
|
|
<img class="img-fluid shadow-sm mb-5" src="@@autopath/assets/svg/layouts-light/sidebar-detached-overlay-container.svg" alt="Image Description" data-hs-theme-appearance="dark" style="max-width: 15rem;">
|
|
|
|
<h1>Detached Sidebar Overlay (Container)</h1>
|
|
<p>Customize your overview page layout. Choose the one that best fits your needs.</p>
|
|
<a class="btn btn-primary" href="@@autopath/layouts/index.html">Go back to Layouts</a>
|
|
</div>
|
|
<!-- End Title -->
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Card -->
|
|
<div class="card card-centered mb-3 mb-lg-5">
|
|
<div class="card-body py-10">
|
|
<img class="avatar avatar-xxl mb-3" src="@@autopath/assets/svg/illustrations/oc-megaphone.svg" alt="Image Description" data-hs-theme-appearance="default">
|
|
<img class="avatar avatar-xxl mb-3" src="@@autopath/assets/svg/illustrations-light/oc-megaphone.svg" alt="Image Description" data-hs-theme-appearance="dark">
|
|
<p class="card-text">No data to show</p>
|
|
<a class="btn btn-sm btn-white" href="@@autopath/index.html">Get Started</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
|
|
<!-- Card -->
|
|
<div class="card card-centered">
|
|
<div class="card-body py-10">
|
|
<img class="avatar avatar-xxl mb-3" src="@@autopath/assets/svg/illustrations/oc-megaphone.svg" alt="Image Description" data-hs-theme-appearance="default">
|
|
<img class="avatar avatar-xxl mb-3" src="@@autopath/assets/svg/illustrations-light/oc-megaphone.svg" alt="Image Description" data-hs-theme-appearance="dark">
|
|
<p class="card-text">No data to show</p>
|
|
<a class="btn btn-sm btn-white" href="@@autopath/index.html">Get Started</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Card -->
|
|
</div>
|
|
<!-- End Sidebar Detached Content -->
|
|
</div>
|
|
<!-- End Content -->
|
|
</main>
|
|
<!-- ========== END MAIN CONTENT ========== -->
|
|
|
|
<!-- ========== SECONDARY CONTENTS ========== -->
|
|
<!-- Keyboard Shortcuts -->
|
|
@@include("@@autopath/partials/layouts-components/offcanvas-shortcuts.html")
|
|
<!-- End Keyboard Shortcuts -->
|
|
|
|
<!-- Activity -->
|
|
@@include("@@autopath/partials/layouts-components/offcanvas-activity.html")
|
|
<!-- End Activity -->
|
|
|
|
<!-- Welcome Message -->
|
|
@@include("@@autopath/partials/modals/welcome-message.html")
|
|
<!-- End Welcome Message -->
|
|
<!-- ========== END SECONDARY CONTENTS ========== -->
|
|
|
|
<!-- JS Global Compulsory @@deleteLine:build -->
|
|
<script src="@@autopath/node_modules/jquery/dist/jquery.min.js"></script>
|
|
<script src="@@autopath/node_modules/jquery-migrate/dist/jquery-migrate.min.js"></script>
|
|
<script src="@@autopath/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<!-- JS Implementing Plugins -->
|
|
<!-- bundlejs:vendor [@@autopath] -->
|
|
<script src="@@autopath/assets/vendor/hs-navbar-vertical-aside/dist/hs-navbar-vertical-aside.min.js"></script>
|
|
<script src="@@autopath/assets/vendor/hs-form-search/dist/hs-form-search.min.js"></script>
|
|
|
|
<!-- JS Front -->
|
|
<!-- bundlejs:theme [@@autopath] -->
|
|
<script src="@@autopath/assets/js/hs.core.js"></script>
|
|
<script src="@@autopath/assets/js/hs.bs-dropdown.js"></script>
|
|
|
|
<!-- JS Plugins Init. -->
|
|
<script>
|
|
(function() {
|
|
window.onload = function () {
|
|
// INITIALIZATION OF NAVBAR VERTICAL ASIDE
|
|
// =======================================================
|
|
new HSSideNav('.js-navbar-vertical-aside').init()
|
|
|
|
|
|
// INITIALIZATION OF FORM SEARCH
|
|
// =======================================================
|
|
new HSFormSearch('.js-form-search')
|
|
|
|
|
|
// INITIALIZATION OF BOOTSTRAP DROPDOWN
|
|
// =======================================================
|
|
HSBsDropdown.init()
|
|
}
|
|
})()
|
|
</script>
|
|
|
|
<!-- Style Switcher JS -->
|
|
@@if(layoutBuilder.extend.switcherSupport === true) {
|
|
@@include("@@autopath/partials/layouts-components/darkmode-switcher-js.html")
|
|
}
|
|
<!-- End Style Switcher JS -->
|
|
</body>
|
|
</html>
|