export const navbar = `
<style>
    .container-fluid{
      height: calc(100vh - 138px);
      max-height: calc(100vh - 138px);
      overflow-y: auto;
    }

    .footer-app{
      padding: 8px 0;
    }

    .nav-link{
      padding: 8px 10px !important;
    }
</style>
<div id="wrapper">

<!-- Sidebar -->
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">

    <!-- Sidebar - Brand -->
    <a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
        <div class="sidebar-brand-icon rotate-n-15">
            <i class="fas fa-laugh-wink"></i>
        </div>
        <div class="sidebar-brand-text mx-3">Masuksini</div>
    </a>

    <!-- Divider -->
    <hr class="sidebar-divider my-0">

    <!-- Nav Item - Dashboard -->
    <li class="nav-item active">
        <a class="nav-link" href="#/">
            <i class="fas fa-fw fa-tachometer-alt"></i>
            <span>Dashboard</span></a>
    </li>

    <!-- Divider -->
    <hr class="sidebar-divider">

    <!-- Heading -->
    <!-- Nav Item - Pages Collapse Menu -->
    <li class="nav-item">
        <a class="nav-link collapsed" data-toggle="collapse" data-target="#collapseTwo"
            aria-expanded="true" aria-controls="collapseTwo">
            <i class="fas fa-fw fa-tags"></i>
            <span>Master</span>
        </a>
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
            <div class="bg-white py-2 collapse-inner rounded">
                <a class="collapse-item" href="#/kategori-properti">Kategori Properti</a>
                <a class="collapse-item" href="#/kategori-blog">Kategori Blog</a>
                <a class="collapse-item" href="#/subkategori">Sub Kategori</a>
                <a class="collapse-item" href="#/sosialmedia">Sosial Media</a>
                <a class="collapse-item" href="#/provinsi">Provinsi</a>
                <a class="collapse-item" href="#/regencies">Kota/Kabupaten</a>
                <a class="collapse-item" href="#/kecamatan">Kecamatan</a>
                <a class="collapse-item" href="#/area">Area</a>
            </div>
        </div>
    </li>

    <li class="nav-item">
        <a class="nav-link collapsed" href="#/sales">
        <i class="fas fa-fw fa-users"></i>
        <span>Agen</span>
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link collapsed" href="#/laman">
        <i class="fas fa-fw fa-globe"></i>
        <span>Laman</span>
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link collapsed" href="#/blog">
        <i class="fas fa-fw fa-globe"></i>
        <span>Blog</span>
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link collapsed" href="#/properti">
        <i class="fas fa-fw fa-tag"></i>
        <span>Properti</span>
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link collapsed" href="#/slider">
        <i class="fas fa-fw fa-cog"></i>
        <span>Slider</span>
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link collapsed" href="#/user">
        <i class="fas fa-fw fa-user"></i>
        <span>User</span>
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link collapsed" href="#/sms-api">
        <i class="fas fa-fw fa-cog"></i>
        <span>Setting SMS Api</span>
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link collapsed" href="#/setting">
        <i class="fas fa-fw fa-cog"></i>
        <span>Setting</span>
        </a>
    </li>

</ul>
<!-- End of Sidebar -->
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
    <!-- Main Content -->
    <div id="content">
        <!-- Topbar -->
        <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
            <!-- Sidebar Toggle (Topbar) -->
            <button id="sidebarToggleTop" class="btn btn-link rounded-circle mr-3">
                <i class="fa fa-bars"></i>
            </button>
            <button id="logout-app" class="btn rounded-circle mr-3 float-right" style="position: absolute; right:10px;">
                <i style="font-size: 20px;" class="fas fa-sign-out-alt"></i>
            </button>
        </nav>
        <!-- End of Topbar -->
        <!-- Begin Page Content -->
        <div class="container-fluid">
            <!-- Page Heading -->
            <div class="d-sm-flex align-items-center justify-content-between mb-4">
                <h1 id="app-content-title" class="h3 mb-0 text-gray-800"></h1>
                <a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i
                        class="fas fa-download fa-sm text-white-50"></i> Generate Report</a>
            </div>
            <!-- Content Row -->
            <div id="app-content">
            </div>
        <!-- /.container-fluid -->
    </div>
    <!-- End of Main Content -->
    <!-- Footer -->
    <footer class="footer-app bg-white">
        <div class="container my-auto">
            <div class="copyright text-center my-auto">
                <span>Copyright &copy; vds</span>
            </div>
        </div>
    </footer>
    <!-- End of Footer -->
</div>
<!-- End of Content Wrapper -->
</div>
`;