Issue
Offcanvas Sidebar component like Halfmoon UI. I tried to make one using Offcanvas component and Sidebar example but failed. Here's a live example of sidebar from Halfmoon UI which expands on medium screen.
-
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" data-bs-keyboard="false" data-bs-backdrop="false" aria-labelledby="offcanvasExampleLabel"> <div> <div class="offcanvas-header"> <h5 class="offcanvas-title" id="offcanvasExampleLabel">Ricerca Layer</h5> <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> </div> <div class="offcanvas-body"> <div id="sidebar"> <div class="nav flex-column py-3"> <ul class="list-unstyled ps-0"> <li class="mb-1"> <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="false"> Home </button> <div class="collapse" id="home-collapse"> <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> <li><a href="#" class="link-dark rounded">Overview</a></li> <li><a href="#" class="link-dark rounded">Updates</a></li> <li><a href="#" class="link-dark rounded">Reports</a></li> </ul> </div> </li> <li class="mb-1"> <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard-collapse" aria-expanded="false"> Dashboard </button> <div class="collapse" id="dashboard-collapse"> <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> <li><a href="#" class="link-dark rounded">Overview</a></li> <li><a href="#" class="link-dark rounded">Weekly</a></li> <li><a href="#" class="link-dark rounded">Monthly</a></li> <li><a href="#" class="link-dark rounded">Annually</a></li> </ul> </div> </li> <li class="mb-1"> <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#orders-collapse" aria-expanded="false"> Orders </button> <div class="collapse" id="orders-collapse" > <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> <li><a href="#" class="link-dark rounded">New</a></li> <li><a href="#" class="link-dark rounded">Processed</a></li> <li><a href="#" class="link-dark rounded">Shipped</a></li> <li><a href="#" class="link-dark rounded">Returned</a></li> </ul> </div> </li> <li class="border-top my-3"></li> <li class="mb-1"> <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#account-collapse" aria-expanded="false"> Account </button> <div class="collapse" id="account-collapse"> <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small"> <li><a href="#" class="link-dark rounded">New...</a></li> <li><a href="#" class="link-dark rounded">Profile</a></li> <li><a href="#" class="link-dark rounded">Settings</a></li> <li><a href="#" class="link-dark rounded">Sign out</a></li> </ul> </div> </li> </ul> </div> </div> <div class="dropdown mt-3"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown"> More </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <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> </div> </div> </div> </div> <div class="container min-vh-100 py-2"> <div class="row"> <div class="col"> <h2 class="font-weight-light">Hello Bootstrap 5 Sidebar</h2> <p> A Bootstrap 5 left off-canvas sidebar menu example! </p> <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample"> Open Sidebar </button> </div> <div class="col"> </div> </div> </div> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1"> <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>
navbar
<nav class="navbar" style="background-color: #00A8B0;">
<div class="container-fluid">
<a class="navbar-brand text-white" href="#">APP.IT</a>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
<i class="bi bi-list me-3"></i>
</a>
<a class="navbar-brand" style="color: #00A8B0;">APP</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
</div>
<maga-profilo-utente></maga-profilo-utente>
</div>
</nav>
Solution
Here is probably what you are after. You just needed to remove the brand snippet and move the section of the navbar outside of the collapsible class.
Just an FYI. I would avoid looking down the full bootstrap route. (you can still use bootstrap for the rest of your code) You would be wasting your time. I don't believe with Bootstrap off-canvas you can do it the way you want so you need to use your own script. This is because Bootstrap uses models. I look at them like they are those modal popups. There is merit to using models but in my opinion, it limits the code. I did pitch going down the 2nd route when they were introducing it but they believed the other benefits outweigh it which does make sense in a way. We will just have to make do with what we have.
body {
padding-top: 55px;
}
.w-sidebar {
width: 200px;
max-width: 200px;
}
.row.collapse {
margin-left: -200px;
left: 0;
transition: margin-left .15s linear;
}
.row.collapse.show {
margin-left: 0 !important;
}
.row.collapsing {
margin-left: -200px;
left: -0.05%;
transition: all .15s linear;
}
@media (max-width:768px) {
.row.collapse,
.row.collapsing {
margin-left: 0 !important;
left: 0 !important;
overflow: visible;
}
.row>.sidebar.collapse {
display: flex !important;
margin-left: -100% !important;
transition: all .25s linear;
position: fixed;
z-index: 1050;
max-width: 0;
min-width: 0;
flex-basis: auto;
}
.row>.sidebar.collapse.show {
margin-left: 0 !important;
width: 100%;
max-width: 100%;
min-width: initial;
}
.row>.sidebar.collapsing {
display: flex !important;
margin-left: -10% !important;
transition: all .2s linear !important;
position: fixed;
z-index: 1050;
min-width: initial;
}
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid fixed-top bg-dark">
<div class="col px-2 px-md-0 py-3">
<div class="d-flex">
<!-- toggler -->
<a data-bs-toggle="collapse" href="#" data-bs-target=".collapse" role="button" class="">
<i class="fa fa-bars fa-lg"></i>
</a>
<a href="#modal" data-bs-target="modal" data-bs-toggle="modal" class="ms-auto text-white"><i class="fa fa-cog"></i></a>
</div>
</div>
<div class="row collapse show g-0 d-flex h-100">
</div>
</div>
<div class="container-fluid px-0">
<div class="row vh-100 collapse show g-0 d-flex">
<div class="col-3 p-0 h-100 text-white w-sidebar navbar-collapse collapse d-none d-md-flex sidebar">
<!-- fixed sidebar -->
<div class="navbar-dark bg-dark position-fixed h-100 w-sidebar">
<h6 class="px-3 pt-3">Fixed Menu</h6>
<ul class="nav flex-column flex-nowrap text-truncate">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
<div class="col p-3">
<h3>Content..</h3>
<p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics, raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p>
<p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>Answered By - mattyp
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.