In the following container, there are two rows: the first row serves as the header, and the second row contains a left navigation bar and main content on the right side.
The left nav bar is designed to shrink to the width of the content. By pressing a toggle button on the nav bar, it collapses to show only icons. By default, it shows icons and labels. On smaller devices, such as phones or tablets, the nav bar should display only icons.
<div class="row h-100">
<div
class="col-12 w-100 sticky-header"
style="background-color: darkgrey;"
>
<h1>This is top header<h1/>
</div>
<div class="col-2">
<div class="fixed-box col-2">
<h1>SideNavBar</h1>
<ul>
<li>
<router-link class="nav-link" to="/contacts">
<img :src="ContactsImage" />
<span>Contacts</span>
</router-link>
</li>
<li>
<router-link class="nav-link" to="/home">
<img :src="HomeImage" />
<span>Home</span>
</router-link>
</li>
<li>
<router-link class="nav-link" to="/help">
<img :src="HelpImage" />
<span>Help</span>
</router-link>
</li>
</ul>
</div>
</div>
<div class="col-10 bg-warning h-100 no-gutters">
<p>This is main content you see when you click a link on left<p/>
</div>
</div>
</div>
</div>
@media only screen and (max-width: 768px) {
.sidenavbar span {
display: none;
}
.sidenav {
width: 75px !important;
}
}
.sidenav {
width: 150px !important;
}
I managed to achieve the desired functionality by using CSS to apply a different width for the side nav bar column. However, this approach leaves some unused space in the col-2 section. Is there a way to make col-2 shrink to the size of its content and allow the main content col-10 to expand?