Bootstrap?? ??? Navbar ???? "??" ???

Bootstrap 5? ???? ??? ????? ?? Offcanvas ?? ??? ?????. ??? ?? ?? ?? ????? ???? ?? ??? ???????.

???? ??? ?? ?? ??

???? ?? ???? ??? ??? ??? ? ????.

• ???: ??? ?? ????? ??, ??? ?? ??? ???? ???? ??? ?????????
• ?? ??: ?? ??? ?? ??? ???? ?? ??? ??? ??????
• ??: ????? ??? ? ???? ???? ????
• ??: ????? ??? ??? ?? ???? ???, ??? ?? ???? ????
• ??: ????? ??? ???? ???, ??? ???? ???? ???? ???
• ???: ????? ??? ????? ???? ???? ??? ????
• ?????: ????? ?????? ???, ??? ???, ??? ??? ???? ????

?? ?? ??

??? ?? ???? ??? ?? col-auto? ???? ?? ??? ??? ? ??? ??? ?? col? ???? ?? ????. ???:

<div class="container-fluid h-100">
  <div class="row h-100">
    <div class="col-5 col-md-3 collapse width m-0 p-0 h-100 bg-dark">

?? ??? ??? ????

?? ????? ????? ??? ?? ? ??? ?? ??, ??? ?? ? ??/??? ???? ?????? ?????. :

/* Set sidebar width */
.w-sidebar {
    width: 200px;
    max-width: 200px;
}

/* Adjust sidebar on collapsing */
.row.collapse {
    margin-left: -200px;
    left: 0;
    transition: margin-left .15s linear;
}

.row.collapse.show {
    margin-left: 0 !important;
}

/* Adjust sidebar on collapsing */
.row.collapsing {
    margin-left: -200px;
    left: -0.05%;
    transition: all .15s linear;
}

?? ??? ?? ????

? ?? ?????? ?? ??? ???? ????. ??:

• ?? ??
• ??? ??(?? ?? ?? ?? ????) ??)
• ??
• ???(?? ????? ????? ?)

/* Optional for overlay sidebar on small screens */
@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 .3s 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;
    }
}

? ??? Bootstrap?? ??? Navbar ???? '??'? ??? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!