Code.gs
/** The function returns an HTML service HtmlOutput object **/function doGet() { return HtmlService.createTemplateFromFile("index").evaluate() .addMetaTag('viewport', 'width=device-width, initial-scale=1') .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL) .setTitle('My Project')}
/** Include Files **/function include(filename) { return HtmlService.createHtmlOutputFromFile(filename) .getContent()}
index.html
<!DOCTYPE html><html>
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sidebar With Bootstrap</title> <link href="https://cdn.lineicons.com/4.0/lineicons.css" rel="stylesheet" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <?!= include("app.css") ?></head>
<body> <div class="wrapper"> <aside id="sidebar"> <div class="d-flex"> <button class="toggle-btn" type="button"> <i class="lni lni-grid-alt"></i> </button> <div class="sidebar-logo"> <a href="#">CodzSword</a> </div> </div> <ul class="sidebar-nav"> <li class="sidebar-item"> <a href="#" class="sidebar-link"> <i class="lni lni-user"></i> <span>Profile</span> </a> </li> <li class="sidebar-item"> <a href="#" class="sidebar-link"> <i class="lni lni-agenda"></i> <span>Task</span> </a> </li> <li class="sidebar-item"> <a href="#" class="sidebar-link collapsed has-dropdown" data-bs-toggle="collapse" data-bs-target="#auth" aria-expanded="false" aria-controls="auth"> <i class="lni lni-protection"></i> <span>Auth</span> </a> <ul id="auth" class="sidebar-dropdown list-unstyled collapse" data-bs-parent="#sidebar"> <li class="sidebar-item"> <a href="#" class="sidebar-link">Login</a> </li> <li class="sidebar-item"> <a href="#" class="sidebar-link">Register</a> </li> </ul> </li> <li class="sidebar-item"> <a href="#" class="sidebar-link collapsed has-dropdown" data-bs-toggle="collapse" data-bs-target="#multi" aria-expanded="false" aria-controls="multi"> <i class="lni lni-layout"></i> <span>Multi Level</span> </a> <ul id="multi" class="sidebar-dropdown list-unstyled collapse" data-bs-parent="#sidebar"> <li class="sidebar-item"> <a href="#" class="sidebar-link collapsed" data-bs-toggle="collapse" data-bs-target="#multi-two" aria-expanded="false" aria-controls="multi-two"> Two Links </a> <ul id="multi-two" class="sidebar-dropdown list-unstyled collapse"> <li class="sidebar-item"> <a href="#" class="sidebar-link">Link 1</a> </li> <li class="sidebar-item"> <a href="#" class="sidebar-link">Link 2</a> </li> </ul> </li> </ul> </li> <li class="sidebar-item"> <a href="#" class="sidebar-link"> <i class="lni lni-popup"></i> <span>Notification</span> </a> </li> <li class="sidebar-item"> <a href="#" class="sidebar-link"> <i class="lni lni-cog"></i> <span>Setting</span> </a> </li> </ul> <div class="sidebar-footer"> <a href="#" class="sidebar-link"> <i class="lni lni-exit"></i> <span>Logout</span> </a> </div> </aside> <div class="main"> <nav class="navbar navbar-expand px-4 py-3"> <div class="container-fluid"> <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> </div> <div class="navbar-collapse collapse"> <ul class="navbar-nav ms-auto"> <li class="nav-item dropdown"> <a href="#" data-bs-toggle="dropdown" class="nav-icon pe-md-0"> <img src="./account.png" class="avatar img-fluid" alt=""> </a> <div class="dropdown-menu dropdown-menu-end rounded">
</div> </li> </ul> </div> </nav> <main class="content px-3 py-4"> <div class="container-fluid"> <div class="mb-3"> <h3 class="fw-bold fs-4 mb-3">Admin Dashboard</h3> <div class="row"> <div class="col-12 col-md-3 "> <div class="card border-0 text-bg-danger bg-opacity-25"> <div class="card-body py-4 text-dark"> <h5 class="mb-2 fw-bold"> Memebers Progress </h5> <p class="mb-2 fw-bold"> $72,540 </p> <div class="mb-0"> <span class="badger me-2"> +9.0% </span> <span class=" fw-bold"> Since Last Month </span> </div> </div> </div> </div> <div class="col-12 col-md-3 "> <div class="card border-0 text-bg-warning bg-opacity-25"> <div class="card-body py-4 text-dark"> <h5 class="mb-2 fw-bold"> Memebers Progress </h5> <p class="mb-2 fw-bold"> $72,540 </p> <div class="mb-0"> <span class="badger me-2"> +9.0% </span> <span class="fw-bold"> Since Last Month </span> </div> </div> </div> </div> <div class="col-12 col-md-3 "> <div class="card border-0 text-bg-success bg-opacity-25"> <div class="card-body py-4 text-dark"> <h5 class="mb-2 fw-bold"> Memebers Progress </h5> <p class="mb-2 fw-bold"> $72,540 </p> <div class="mb-0"> <span class="badger me-2"> +9.0% </span> <span class="fw-bold"> Since Last Month </span> </div> </div> </div> </div> <div class="col-12 col-md-3 "> <div class="card border-0 text-bg-primary bg-opacity-25"> <div class="card-body py-4 text-dark"> <h5 class="mb-2 fw-bold"> Memebers Progress </h5> <p class="mb-2 fw-bold"> $72,540 </p> <div class="mb-0"> <span class="badger me-2"> +9.0% </span> <span class="fw-bold"> Since Last Month </span> </div> </div> </div> </div> </div> <h3 class="fw-bold fs-4 my-3">Avg. Agent Earnings </h3> <div class="row"> <div class="col-12"> <table class="table table-striped"> <thead> <tr class="highlight"> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> </div> </div> </div> </main> <footer class="footer bg-secondary bg-opacity-25"> <div class="container-fluid"> <div class="row text-body-secondary"> <div class="col-6 text-start "> <a class="text-body-secondary" href=" #"> <strong>CodzSwod</strong> </a> </div> <div class="col-6 text-end text-body-secondary d-none d-md-block"> <ul class="list-inline mb-0"> <li class="list-inline-item"> <a class="text-body-secondary" href="#">Contact</a> </li> <li class="list-inline-item"> <a class="text-body-secondary" href="#">About Us</a> </li> <li class="list-inline-item"> <a class="text-body-secondary" href="#">Terms & Conditions</a> </li> </ul> </div> </div> </div> </footer> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <?!= include("app.js") ?></body>
</html>
app.js
<script>
const hamBurger = document.querySelector(".toggle-btn");
hamBurger.addEventListener("click", function () {
document.querySelector("#sidebar").classList.toggle("expand");
});
</script>
app.css
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
::after,::before { box-sizing: border-box; margin: 0; padding: 0;}
.badger { border-radius: 25px; background-color: #489988; color:#fff; padding: 0px 5px;}
a { text-decoration: none;}
li { list-style: none;}
body { font-family: 'Poppins', sans-serif; min-height: 100vh; display: flex; flex-direction: column;}
.wrapper { display: flex;}
footer { margin-top: auto; padding: 10px;}
.main { display: flex; flex-direction: column; min-height: 100vh; width: 100%; overflow: hidden; transition: all 0.35s ease-in-out; background-color: #fff; min-width: 0;}
#sidebar { width: 70px; min-width: 70px; z-index: 1000; transition: all .25s ease-in-out; background-color: #0e2238; display: flex; flex-direction: column;}
#sidebar.expand { width: 260px; min-width: 260px;}
.toggle-btn { background-color: transparent; cursor: pointer; border: 0; padding: 1rem 1.5rem;}
.toggle-btn i { font-size: 1.5rem; color: #FFF;}
.sidebar-logo { margin: auto 0;}
.sidebar-logo a { color: #FFF; font-size: 1.15rem; font-weight: 600;}
#sidebar:not(.expand) .sidebar-logo,#sidebar:not(.expand) a.sidebar-link span { display: none;}
#sidebar.expand .sidebar-logo,#sidebar.expand a.sidebar-link span { animation: fadeIn .25s ease;}
@keyframes fadeIn { 0% { opacity: 0; }
100% { opacity: 1; }}
.sidebar-nav { padding: 2rem 0; flex: 1 1 auto;}
a.sidebar-link { padding: .625rem 1.625rem; color: #FFF; display: block; font-size: 0.9rem; white-space: nowrap; border-left: 3px solid transparent;}
.sidebar-link i,.dropdown-item i { font-size: 1.1rem; margin-right: .75rem;}
a.sidebar-link:hover { background-color: rgba(255, 255, 255, .075); border-left: 3px solid #3b7ddd;}
.sidebar-item { position: relative;}
#sidebar:not(.expand) .sidebar-item .sidebar-dropdown { position: absolute; top: 0; left: 70px; background-color: #0e2238; padding: 0; min-width: 15rem; display: none;}
#sidebar:not(.expand) .sidebar-item:hover .has-dropdown+.sidebar-dropdown { display: block; max-height: 15em; width: 100%; opacity: 1;}
#sidebar.expand .sidebar-link[data-bs-toggle="collapse"]::after { border: solid; border-width: 0 .075rem .075rem 0; content: ""; display: inline-block; padding: 2px; position: absolute; right: 1.5rem; top: 1.4rem; transform: rotate(-135deg); transition: all .2s ease-out;}
#sidebar.expand .sidebar-link[data-bs-toggle="collapse"].collapsed::after { transform: rotate(45deg); transition: all .2s ease-out;}
.navbar { background-color: #f5f5f5; box-shadow: 0 0 2rem 0 rgba(33, 37, 41, .1);}
.navbar-expand .navbar-collapse { min-width: 200px;}
.avatar { height: 40px; width: 40px;}</style>