Slightly different than your sidenav examples, I would like the sidenav to be sandwiched between the header and footer rather than being the full height of the page.

H E A D E R

NAV | CONTENT

F O O T E R

I can get everything to work except I can't get my left sidenav column to collapse when the sidenav menu is collapsed. The menu collapses nicely but the space it occupied remains. Any help you can provide would be appreciated! Thank you.

<div class="d-flex flex-column border border-1 min-vh-100">
<div class="flex-shrink-0" style="height:30px;line-height: 30px; padding: 0 8px;">
    <!-- Toggler -->
    <button data-mdb-toggle="sidenav"
            data-mdb-target="#sidenav-1"
            class="btn shadow-0 p-0"
            aria-controls="#sidenav-1"
            aria-haspopup="true">
        <i class="fas fa-bars fa-lg"></i>
    </button>
    Header
</div>
<div class="flex-grow-1 d-flex">
    <aside class="d-flex bg-warning" style="max-height: calc(100vh - 60px);">
        <!-- Sidenav -->
        <nav id="sidenav-1"
             class="sidenav position-relative h-100 overflow-auto"
             data-mdb-hidden="false"
             data-mdb-accordion="true"
             data-mdb-mode="side">
            <a class="ripple d-flex justify-content-center py-4"
               href="#!"
               data-mdb-ripple-color="primary">
                <img id="MDB-logo"
                     src="https://mdbcdn.b-cdn.net/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp"
                     alt="MDB Logo"
                     draggable="false" />
            </a>

            <ul class="sidenav-menu">
                <li class="sidenav-item">
                    <a class="sidenav-link" href="">
                        <i class="fas fa-chart-area fa-fw me-3"></i><span>Webiste traffic</span>
                    </a>
                </li>
                <li class="sidenav-item">
                    <a class="sidenav-link"><i class="fas fa-cogs fa-fw me-3"></i><span>Settings</span></a>
                    <ul class="sidenav-collapse">
                        <li class="sidenav-item">
                            <a class="sidenav-link">Profile</a>
                        </li>
                        <li class="sidenav-item">
                            <a class="sidenav-link">Account</a>
                        </li>
                    </ul>
                </li>
                <li class="sidenav-item">
                    <a class="sidenav-link"><i class="fas fa-lock fa-fw me-3"></i><span>Password</span></a>
                    <ul class="sidenav-collapse">
                        <li class="sidenav-item">
                            <a class="sidenav-link">Request password</a>
                        </li>
                        <li class="sidenav-item">
                            <a class="sidenav-link">Reset password</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>
        <!-- Sidenav -->
    </aside>
    <main class="flex-grow-1 bg-danger overflow-auto" style="max-height: calc(100vh - 60px);">
        <div>
            <ul>
                <li>Content here</li>
            </ul>
        </div>
    </main>
</div>
<div class="flex-shrink-0" style="height:30px; line-height: 30px; padding: 0 8px;">Footer</div>