<body>
<!-- Top Navbar -->
<nav class="ms-nav navbar navbar-expand-sm bg-teal-700 navbar-dark">
<!-- Hamburger button for the sidebar -->
<i class="ms-sidebar-toggle material-icons text-white"></i>
<a class="navbar-brand" href="javascript:">
Brand
</a>
</nav>
<section class="ms-root">
<!-- Sidebar -->
<aside class="ms-sidebar bg-light">
<!-- Sidebar branding area -->
<div class="sidebar-brand bg-light">
<a class="navbar-brand text-dark" href="javascript:">
Brand
</a>
<!-- Sidebar Close button -->
<i class="nav-close-btn material-icons"></i>
</div>
<ul class="nav flex-column">
<!-- Menu -->
<li class="nav-item">
<a class="nav-link text-dark" href="javascript:">
Link
</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="javascript:">
Link
</a>
</li>
<!-- Sub Menu Link A -->
<li class="nav-item">
<a class="nav-link text-dark sub-menu-link" href="javascript:">
Menu A <i class="material-icons">keyboard_arrow_right</i>
</a>
</li>
<!-- Sub Menu A -->
<li class="nav-item sub-menu-container">
<ul class=" nav flex-column sub-menu" data-ic-class="sub-menu">
<li class="nav-item">
<a class="nav-link text-dark" href="javascript:">
Menu Item
</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="javascript:">
Menu Item
</a>
</li>
</ul>
</li>
<!-- Sub Menu Link B -->
<li class="nav-item">
<a class="nav-link text-dark sub-menu-link" href="javascript:">
Menu B <i class="material-icons">keyboard_arrow_right</i>
</a>
</li>
<!-- Sub Menu B -->
<li class="nav-item sub-menu-container">
<ul class=" nav flex-column sub-menu" data-ic-class="sub-menu">
<li class="nav-item">
<a class="nav-link text-dark" href="javascript:">
Menu Item
</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="javascript:">
Menu Item
</a>
</li>
</ul>
</li>
</ul>
</aside>
<!-- Container -->
<div class="ms-container">
<label class="sample">
Your Contents Here
</label>
</div>
</section>
<!-- Footer -->
<footer class="bg-grey-800 text-white">
Footer
</footer>
</body><body>
<!-- Top Navbar -->
<nav class="ms-nav navbar navbar-expand-sm bg-teal-700 navbar-dark">
<!-- Hamburger button for the sidebar -->
<i class="ms-sidebar-toggle material-icons text-white"></i>
<a class="navbar-brand" href="javascript:">
Brand
</a>
</nav>
<section class="ms-root">
<!-- Sidebar -->
<aside class="ms-sidebar --visible bg-light">
<!-- Sidebar branding area -->
<div class="sidebar-brand bg-light">
<a class="navbar-brand text-dark" href="javascript:">
Brand
</a>
<!-- Sidebar Close button -->
<i class="nav-close-btn material-icons"></i>
</div>
<ul class="nav flex-column">
<!-- Menu -->
<li class="nav-item">
<a class="nav-link text-dark" href="javascript:">
Link
</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="javascript:">
Link
</a>
</li>
<!-- Sub Menu Link A -->
<li class="nav-item">
<a class="nav-link text-dark sub-menu-link" href="javascript:">
Menu A <i class="material-icons">keyboard_arrow_right</i>
</a>
</li>
<!-- Sub Menu A -->
<li class="nav-item sub-menu-container">
<ul class=" nav flex-column sub-menu" data-ic-class="sub-menu">
<li class="nav-item">
<a class="nav-link text-dark" href="javascript:">
Menu Item
</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="javascript:">
Menu Item
</a>
</li>
</ul>
</li>
<!-- Sub Menu Link B -->
<li class="nav-item">
<a class="nav-link text-dark sub-menu-link" href="javascript:">
Menu B <i class="material-icons">keyboard_arrow_right</i>
</a>
</li>
<!-- Sub Menu B -->
<li class="nav-item sub-menu-container">
<ul class=" nav flex-column sub-menu" data-ic-class="sub-menu">
<li class="nav-item">
<a class="nav-link text-dark" href="javascript:">
Menu Item
</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="javascript:">
Menu Item
</a>
</li>
</ul>
</li>
</ul>
</aside>
<!-- Container -->
<div class="ms-container">
<label class="sample">
Your Contents Here
</label>
</div>
</section>
<!-- Footer -->
<footer class="bg-grey-800 text-white">
Footer
</footer>
</body><body>
<!-- Top Navbar -->
<nav class="ms-nav navbar navbar-expand-sm bg-teal-700 navbar-dark fixed-top">
<!-- Hamburger button for the sidebar -->
<i class="ms-sidebar-toggle material-icons text-white"></i>
<a class="navbar-brand" href="javascript:">
Brand
</a>
</nav>
<section class="ms-root">
<!-- Sidebar -->
<aside class="ms-sidebar --visible --fixed bg-light">
<!-- Sidebar branding area -->
<div class="sidebar-brand bg-light">
<a class="navbar-brand text-dark" href="javascript:">
Brand
</a>
<!-- Sidebar Close button -->
<i class="nav-close-btn material-icons"></i>
</div>
<ul class="nav flex-column">
<!-- Menu -->
<li class="nav-item">
<a class="nav-link text-dark" href="javascript:">
Link
</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="javascript:">
Link
</a>
</li>
<!-- Sub Menu Link A -->
<li class="nav-item">
<a class="nav-link text-dark sub-menu-link" href="javascript:">
Menu A <i class="material-icons">keyboard_arrow_right</i>
</a>
</li>
<!-- Sub Menu A -->
<li class="nav-item sub-menu-container">
<ul class=" nav flex-column sub-menu" data-ic-class="sub-menu">
<li class="nav-item">
<a class="nav-link text-dark" href="javascript:">
Menu Item
</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="javascript:">
Menu Item
</a>
</li>
</ul>
</li>
<!-- Sub Menu Link B -->
<li class="nav-item">
<a class="nav-link text-dark sub-menu-link" href="javascript:">
Menu B <i class="material-icons">keyboard_arrow_right</i>
</a>
</li>
<!-- Sub Menu B -->
<li class="nav-item sub-menu-container">
<ul class=" nav flex-column sub-menu" data-ic-class="sub-menu">
<li class="nav-item">
<a class="nav-link text-dark" href="javascript:">
Menu Item
</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="javascript:">
Menu Item
</a>
</li>
</ul>
</li>
</ul>
</aside>
<!-- Container -->
<div class="ms-container">
<label class="sample">
Your Contents Here
</label>
</div>
</section>
<!-- Footer -->
<footer class="bg-grey-800 text-white">
Footer
</footer>
</body>