Skip to content

Instantly share code, notes, and snippets.

@ve3
Last active August 9, 2023 15:22
Show Gist options
  • Save ve3/3a8819741a6f5ab1e1cc8b8b8de6f8ac to your computer and use it in GitHub Desktop.
Save ve3/3a8819741a6f5ab1e1cc8b8b8de6f8ac to your computer and use it in GitHub Desktop.
Bootstrap 5 one sidebar layout best fit for help & support page. (preview https://codepen.io/ve3/pen/MWzdEvj)
<!doctype html>
<html lang="th">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ความช่วยเหลือ &amp; สนับสนุน</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<link rel="stylesheet" href="../assets/css/support-style.css">
</head>
<body>
<main id="page-wrapper" class="d-flex">
<nav id="page-sidebar" class="bg-light border-end">
<div id="sidebar-header" class="bg-primary h3 my-0">
<a class="d-block h-100 link-light link-underline-opacity-0 py-2 px-3" href="../index.html">Support</a>
</div><!-- #sidebar-header -->
<ul class="list-group list-group-flush">
<li class="list-group-item list-group-item-transparent list-group-item-action active"><a class="d-block" href="./">Category 1</a></li>
<li class="list-group-item list-group-item-transparent list-group-item-action"><a class="d-block" href="./">Category 2</a></li>
<li class="list-group-item list-group-item-transparent list-group-item-action"><a class="d-block" href="./">Category 3</a></li>
</ul>
</nav><!-- #page-sidebar -->
<div id="page-content-wrapper">
<div id="page-topbar" class="border-bottom">
<button id="btn-toggle-sidebar" class="btn btn-light btn-invisible-bg border border-0 rounded-0 px-4 h-100 d-lg-none d-xl-none d-xxl-none" type="button" title="แสดง/ซ่อน บาร์ด้านข้าง">
<i class="fa-solid fa-ellipsis-vertical"></i>
<span class="visually-hidden-focusable">แสดง/ซ่อน บาร์ด้านข้าง</span>
</button>
</div><!-- #page-topbar -->
<div class="container-fluid">
<h1>Category 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div><!-- .container-fluid -->
</div><!-- #page-content-wrapper -->
</main><!-- #page-wrapper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="../assets/js/support-script.js"></script>
</body>
</html>
/**
* Support pages JS.
*
* @author Vee W.
*/
class SupportScript {
/**
* Listen on click side bar toggler button.
*/
#listenClickSidebarToggler() {
const targetBtnId = 'btn-toggle-sidebar';
document.addEventListener('click', (event) => {
let thisTarget = event.target;
if (thisTarget.closest('button')) {
thisTarget = thisTarget.closest('button');
}
if (thisTarget.getAttribute('id') === targetBtnId) {
event.preventDefault();
thisTarget.classList.toggle('active');
document.getElementById('page-sidebar')?.classList.toggle('active');
}
});
}// #listenClickSidebarToggler
/**
* Initialize the script.
*/
run() {
this.#listenClickSidebarToggler();
}// run
}// SupportScript
document.addEventListener('DOMContentLoaded', () => {
const supportScriptObj = new SupportScript();
supportScriptObj.run();
});
/*
CSS for support pages.
*/
.list-group-item-transparent {
--bs-list-group-action-hover-color: var(--bs-emphasis-color);
--bs-list-group-action-hover-bg: var(--bs-light-border-subtle);
--bs-list-group-action-active-color: var(--bs-emphasis-color);
--bs-list-group-action-active-bg: var(--bs-light-border-subtle);
--bs-list-group-active-color: var(--bs-light-bg-subtle);
--bs-list-group-active-bg: var(--bs-light-text-emphasis);
--bs-list-group-active-border-color: var(--bs-light-text-emphasis);
}
#page-sidebar {
--sp-sidebar-width: 250px;
}
.btn-invisible-bg {
background-color: transparent;
}
.list-group-item a {
color: inherit;
text-decoration: none;
}
.list-group-item-transparent {
background-color: transparent;
}
#page-content-wrapper {
min-height: 100vh;
width: 100%;
}
#page-sidebar {
max-width: var(--sp-sidebar-width);
min-height: 100vh;
min-width: var(--sp-sidebar-width);
transition: all .3s;
}
#page-sidebar {
margin-left: calc(var(--sp-sidebar-width) * -1);
}
#page-sidebar.active {
margin-left: 0;
}
@media (min-width: 992px) {
#page-sidebar,
#page-sidebar.active {
margin-left: 0;
}
}
#page-topbar,
#sidebar-header {
height: 50px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment