How can I add a footer underneath the default MainLayout.razor?

The main problem is that I'm not good at front-end development, so I usually browse to internet, or I ask to AI-chatbot to speed up the layout process, particularly if I have no idea on how to construct the layout I'm trying to achieve.

This question thread is somewhat related to these threads, but not technically the same:

• How to add a footer in default MainLayout.razor?
• Sticky footer in MainLayout

What I meant to say is, the layout I'm trying to achieve is not actually the same as theirs.

My attempt is:

• Putting a <footer> tag under the <div class="sidebar"> and <main> tags:

<div class="page"><div class="sidebar"><NavMenu /></div><main><div class="border-bottom border-1 border-secondary-subtle top-row px-4"><a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a></div><article class="content px-4">            @Body</article></main><footer class="footer bg-dark text-white py-2 px-4"><p class="text-white m-0"><small>&copy; @(DateTime.Today.Year) "My Company" All rights                reserved.</small></p></footer></div>

.page {    display: flex;    flex-direction: column;    min-height: 100vh;}main {    flex: 1;}.sidebar {    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);}.top-row {    background-color: #f7f7f7;    border-bottom: 1px solid #d6d5d5;    justify-content: flex-end;    height: 3.5rem;    display: flex;    align-items: center;}.top-row ::deep a,.top-row ::deep .btn-link {    white-space: nowrap;    margin-left: 1.5rem;    text-decoration: none;}.top-row ::deep a:hover,.top-row ::deep .btn-link:hover {    text-decoration: underline;}.top-row ::deep a:first-child {    overflow: hidden;    text-overflow: ellipsis;}@media (max-width: 640.98px) {    .top-row {        justify-content: space-between;    }    .top-row ::deep a,    .top-row ::deep .btn-link {        margin-left: 0;    }}@media (min-width: 641px) {    .page {        flex-direction: row;    }    .sidebar {        width: 250px;        height: 100vh;        position: sticky;        top: 0;    }    .top-row {        position: sticky;        top: 0;        z-index: 1;    }    .top-row.auth ::deep a:first-child {        flex: 1;        text-align: right;        width: 0;    }    .top-row,    article {        padding-left: 2rem !important;        padding-right: 1.5rem !important;    }}#blazor-error-ui {    color-scheme: light only;    background: lightyellow;    bottom: 0;    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);    box-sizing: border-box;    display: none;    left: 0;    padding: 0.6rem 1.25rem 0.7rem 1.25rem;    position: fixed;    width: 100%;    z-index: 1000;}#blazor-error-ui .dismiss {    cursor: pointer;    position: absolute;    right: 0.75rem;    top: 0.5rem;}

In laptop's browser:

The layout is properly rendered only on a small screen, but not on a desktop screen.

• I'm trying to render the layout of having a footer for different screen sizes.

• I'm trying to achieve a sticky sidemenu with a scrollable body, but the footer is positioned below both the sidemenu and the body.

• I prefer to utilize the Bootstrap 5.3.7 for this instance (if it is more efficient).

• I am open to achieve it using Blazor CSS Isolation.