Last active
August 9, 2023 15:22
-
-
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)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="th"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>ความช่วยเหลือ & สนับสนุน</title> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | |
| <script src="../assets/js/support-script.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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(); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| 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