I recently started using CoreUI to design the layout for my application, but I ran into an issue while trying to integrate the Sidebar. Although the Sidebar is visible on the left side, I'm having trouble making sure that the router-view takes up the remaining space on the right without covering the content. I'd prefer not to set it as fixed since that would overlap with my existing content.
https://i.sstatic.net/wz7oh.png
Below is the snippet of my code:
<template>
<div>
<CNavbar expand="lg" color-scheme="light" class="bg-light">
<CContainer fluid>[Some links here]</CContainer>
</CNavbar>
<CSidebar visible>
<CSidebarNav>
<CSidebarBrand>Sidebar Brand</CSidebarBrand>
<CNavItem href="#">
<CIcon customClassName="nav-icon" :icon="icon.cilUser" />
Nav item
</CNavItem>
</CSidebarNav>
<CSidebarToggler @click="$store.commit('toggleUnfoldable')" />
</CSidebar>
<router-view /> <!-- This should be positioned next to the Sidebar, not below it. -->
<CFooter>[Footer stuff here]</CFooter>
</div>
</template>