As I work on my single-page application, I'm playing around with a shared footer layout. My goal is to keep this footer at the bottom of the page at all times. However, I also want to explore the possibility of hiding it in certain routes, even though it's declared in the app.component.html file.
I've experimented with different footer positions using SCSS.
app.component.html
<div class="grid-container">
<main [@fadeAnimation]="o.isActivated ? o.activatedRoute : ''">
<router-outlet #o="outlet"></router-outlet>
</main>
<rb-footer class="footer"></rb-footer>
</div>
<rb-modal></rb-modal>
app.component.scss
:host {
.grid-container {
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: auto;
height: 100vh;
}
.footer {
position: initia
width:100%;
height:40px;
}
}