diff options
Diffstat (limited to 'site/content/docs/5.2/examples/offcanvas-navbar')
3 files changed, 199 insertions, 0 deletions
diff --git a/site/content/docs/5.2/examples/offcanvas-navbar/index.html b/site/content/docs/5.2/examples/offcanvas-navbar/index.html new file mode 100644 index 0000000..81c9bb4 --- /dev/null +++ b/site/content/docs/5.2/examples/offcanvas-navbar/index.html @@ -0,0 +1,140 @@ +--- +layout: examples +title: Offcanvas navbar template +extra_css: + - "offcanvas.css" +extra_js: + - src: "offcanvas.js" +body_class: "bg-light" +aliases: "/docs/5.2/examples/offcanvas/" +--- + +<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" aria-label="Main navigation"> + <div class="container-fluid"> + <a class="navbar-brand" href="#">Offcanvas navbar</a> + <button class="navbar-toggler p-0 border-0" type="button" id="navbarSideCollapse" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + + <div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault"> + <ul class="navbar-nav me-auto mb-2 mb-lg-0"> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Dashboard</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Notifications</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Profile</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Switch account</a> + </li> + <li class="nav-item dropdown"> + <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Settings</a> + <ul class="dropdown-menu"> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + </ul> + </li> + </ul> + <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> +</nav> + +<div class="nav-scroller bg-body shadow-sm"> + <nav class="nav" aria-label="Secondary navigation"> + <a class="nav-link active" aria-current="page" href="#">Dashboard</a> + <a class="nav-link" href="#"> + Friends + <span class="badge text-bg-light rounded-pill align-text-bottom">27</span> + </a> + <a class="nav-link" href="#">Explore</a> + <a class="nav-link" href="#">Suggestions</a> + <a class="nav-link" href="#">Link</a> + <a class="nav-link" href="#">Link</a> + <a class="nav-link" href="#">Link</a> + <a class="nav-link" href="#">Link</a> + <a class="nav-link" href="#">Link</a> + </nav> +</div> + +<main class="container"> + <div class="d-flex align-items-center p-3 my-3 text-white bg-purple rounded shadow-sm"> + <img class="me-3" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo-white.svg" alt="" width="48" height="38"> + <div class="lh-1"> + <h1 class="h6 mb-0 text-white lh-1">Bootstrap</h1> + <small>Since 2011</small> + </div> + </div> + + <div class="my-3 p-3 bg-body rounded shadow-sm"> + <h6 class="border-bottom pb-2 mb-0">Recent updates</h6> + <div class="d-flex text-muted pt-3"> + {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}} + <p class="pb-3 mb-0 small lh-sm border-bottom"> + <strong class="d-block text-gray-dark">@username</strong> + Some representative placeholder content, with some information about this user. Imagine this being some sort of status update, perhaps? + </p> + </div> + <div class="d-flex text-muted pt-3"> + {{< placeholder width="32" height="32" background="#e83e8c" color="#e83e8c" class="flex-shrink-0 me-2 rounded" >}} + <p class="pb-3 mb-0 small lh-sm border-bottom"> + <strong class="d-block text-gray-dark">@username</strong> + Some more representative placeholder content, related to this other user. Another status update, perhaps. + </p> + </div> + <div class="d-flex text-muted pt-3"> + {{< placeholder width="32" height="32" background="#6f42c1" color="#6f42c1" class="flex-shrink-0 me-2 rounded" >}} + <p class="pb-3 mb-0 small lh-sm border-bottom"> + <strong class="d-block text-gray-dark">@username</strong> + This user also gets some representative placeholder content. Maybe they did something interesting, and you really want to highlight this in the recent updates. + </p> + </div> + <small class="d-block text-end mt-3"> + <a href="#">All updates</a> + </small> + </div> + + <div class="my-3 p-3 bg-body rounded shadow-sm"> + <h6 class="border-bottom pb-2 mb-0">Suggestions</h6> + <div class="d-flex text-muted pt-3"> + {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}} + <div class="pb-3 mb-0 small lh-sm border-bottom w-100"> + <div class="d-flex justify-content-between"> + <strong class="text-gray-dark">Full Name</strong> + <a href="#">Follow</a> + </div> + <span class="d-block">@username</span> + </div> + </div> + <div class="d-flex text-muted pt-3"> + {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}} + <div class="pb-3 mb-0 small lh-sm border-bottom w-100"> + <div class="d-flex justify-content-between"> + <strong class="text-gray-dark">Full Name</strong> + <a href="#">Follow</a> + </div> + <span class="d-block">@username</span> + </div> + </div> + <div class="d-flex text-muted pt-3"> + {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}} + <div class="pb-3 mb-0 small lh-sm border-bottom w-100"> + <div class="d-flex justify-content-between"> + <strong class="text-gray-dark">Full Name</strong> + <a href="#">Follow</a> + </div> + <span class="d-block">@username</span> + </div> + </div> + <small class="d-block text-end mt-3"> + <a href="#">All suggestions</a> + </small> + </div> +</main> diff --git a/site/content/docs/5.2/examples/offcanvas-navbar/offcanvas.css b/site/content/docs/5.2/examples/offcanvas-navbar/offcanvas.css new file mode 100644 index 0000000..f855b96 --- /dev/null +++ b/site/content/docs/5.2/examples/offcanvas-navbar/offcanvas.css @@ -0,0 +1,52 @@ +html, +body { + overflow-x: hidden; /* Prevent scroll on narrow devices */ +} + +body { + padding-top: 56px; +} + +@media (max-width: 991.98px) { + .offcanvas-collapse { + position: fixed; + top: 56px; /* Height of navbar */ + bottom: 0; + left: 100%; + width: 100%; + padding-right: 1rem; + padding-left: 1rem; + overflow-y: auto; + visibility: hidden; + background-color: #343a40; + transition: transform .3s ease-in-out, visibility .3s ease-in-out; + } + .offcanvas-collapse.open { + visibility: visible; + transform: translateX(-100%); + } +} + +.nav-scroller .nav { + color: rgba(255, 255, 255, .75); +} + +.nav-scroller .nav-link { + padding-top: .75rem; + padding-bottom: .75rem; + font-size: .875rem; + color: #6c757d; +} + +.nav-scroller .nav-link:hover { + color: #007bff; +} + +.nav-scroller .active { + font-weight: 500; + color: #343a40; +} + +.bg-purple { + background-color: #6f42c1; +} diff --git a/site/content/docs/5.2/examples/offcanvas-navbar/offcanvas.js b/site/content/docs/5.2/examples/offcanvas-navbar/offcanvas.js new file mode 100644 index 0000000..b97a171 --- /dev/null +++ b/site/content/docs/5.2/examples/offcanvas-navbar/offcanvas.js @@ -0,0 +1,7 @@ +(() => { + 'use strict' + + document.querySelector('#navbarSideCollapse').addEventListener('click', () => { + document.querySelector('.offcanvas-collapse').classList.toggle('open') + }) +})() |