Angular & Bootstrap 实现类似Halfmoon UI的Offcanvas推送菜单模板

核心修改说明 #

• 给Offcanvas组件添加offcanvas-md类：Bootstrap 5原生支持响应式Offcanvas，添加该类后，md断点（≥768px）及以上屏幕侧边栏会自动永久展开，小于md的屏幕保持Offcanvas抽屉效果
• 隐藏md以上屏幕的关闭按钮和汉堡触发按钮，避免冗余
• 给主内容区添加md以上的左边距，避开展开的侧边栏
• 调整侧边栏固定宽度，避免布局错乱
• 使用前确保已经引入Bootstrap 5 CSS、JS以及Bootstrap Icons图标库

如果你使用的Bootstrap 5版本低于5.1，没有内置offcanvas-md类，可以添加以下CSS实现同样效果：

@media (min-width: 768px) {
  .offcanvas.offcanvas-start {
    transform: none;
    visibility: visible;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
  }
}

完整修改后代码 #

自定义CSS（放在页面<head>的style标签内） #

/* 自定义侧边栏宽度，可按需调整 */
.offcanvas.offcanvas-start {
  width: 280px;
}
/* md及以上屏幕主内容区左边距等于侧边栏宽度 */
@media (min-width: 768px) {
  .main-content {
    margin-left: 280px;
  }
}

导航栏代码 #

<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">
        <!-- 只在小于md的屏幕显示汉堡触发按钮 -->
        <a data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample" class="d-md-none">
            <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>

侧边栏+主内容代码 #

<!-- 添加offcanvas-md类实现响应式展开，加show类默认md以上显示 -->
<div class="offcanvas offcanvas-start offcanvas-md show" 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>
            <!-- 只在小于md的屏幕显示关闭按钮 -->
            <button type="button" class="btn-close text-reset d-md-none" 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>
<!-- 主内容区加main-content类适配边距 -->
<div class="container min-vh-100 py-2 main-content">
    <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 d-md-none" 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 main-content">
    <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>
</div>

最终效果 #

• 屏幕宽度<768px：侧边栏默认隐藏，点击汉堡按钮弹出抽屉式侧边栏，点击关闭按钮收回
• 屏幕宽度≥768px：侧边栏默认固定在左侧展开，汉堡按钮和关闭按钮自动隐藏，主内容区自动避让侧边栏

内容的提问来源于stack exchange，提问作者Fabio