Within my Angular application, I have implemented a sidebar as a separate component. Previously, the content of the sidebar was housed within the main app component's HTML page, and it functioned properly by taking up the full height of the page when scrolled. However, after transitioning this content to a separate component and including it within the app component, the sidebar no longer expands to the full height of the page when scrolling down, as illustrated in the screenshot below:
https://i.stack.imgur.com/Wej29.png
The code snippet from the sidebar.html file is as follows:
<nav *ngIf="isLoggedIn$ | async" id="sidebar" [ngClass]="{active: (isShown$ | async)}">
<div class="sidebar-header">
<h2>Test Portal</h2>
</div>
<ul class="items">
<li [routerLink]="['/car-list']" routerLinkActive="active" title="Cars">
<a>
<fa-icon [icon]="faLayerGroup"></fa-icon><span id="spnCars">Cars</span>
</a>
</li>
<li [routerLink]="['/bike-list']" routerLinkActive="active" title="Bikes">
<a>
<fa-icon [icon]="faUsers"></fa-icon><span id="spnBikes">Bikes</span>
</a>
</li>
</ul>
</nav>
Furthermore, here is a portion of the styling defined in the sidebar.scss file:
#sidebar {
font-family: 'Poppins', sans-serif;
min-width: 200px;
max-width: 200px;
min-height: 100vh;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
(...additional CSS styling for the sidebar...)
In the app.component.html file, the "app-sidebar" section houses the sidebar content within the overall structure of the page:
<div class="wrapper">
<app-sidebar></app-sidebar>
<!-- Page Content -->
<div id="page-content">
<div id="content">
<router-outlet></router-outlet>
</div>
</div>
Additionally, the corresponding styling in the app.component.scss file maintains the layout and dimensions of the page:
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
(...additional CSS styling for the wrapper and page content elements...)
If anyone can shed light on why the sidebar is not occupying the full height of the page upon scrolling, your assistance would be greatly appreciated.