export default {
name: 'Sidebar'
};#logo {
margin: 20px auto;
display: block;
width: 50%;
border: none;
}
.nav-item a {
color: #83888c;
font-size: 18px;
}
.nav-item {
justify-content: space-around;
}
.data-uri-logo1 {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='backup_24px'%3E%3Cpath id='icon/action/backup_24px' fill-rule='evenodd' clip-rule='evenodd' d='M19.35 10.04C18.67 6.59 15.64 4 12 4C9.10999 4 6.59998 5.64001 5.34998 8.04001C2.33997 8.35999 0 10.91 0 14C0 17.31 2.68994 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04ZM...opacity='0.54'/%3E%3C/g%3E%3C/svg%3E");
height: 2rem;
width: 2rem;
background-repeat: no-repeat;
justify-content: space-around;
}
.title-section {
display: flex;
}<template>
<div>
<b-sidebar id="sidebar" aria-label="Sidebar " no-header width="300px">
<template #footer="{ hide }">
<b-button size="sm">Collapse</b-button>
<b-button size="sm" @click="hide">Logout</b-button>
</template>
<div>
<b-img id="logo" :src="require('./../assets/logo.png')" thumbnail></b-img>
</div>
<div>
<b-nav vertical>
<div class="title-section">
<div class="data-uri-logo1"></div>
<b-nav-item>title1</b-nav-item>
</div>
<div class="title-section">
<div class="data-uri-logo1"></div>
<b-nav-item>title2</b-nav-item>
</div>
<div class="title-section">
<div class="data-uri-logo1"></div>
<b-nav-item>title3</b-nav-item>
</div>
<div class="title-section">
<div class="data-uri-logo1"></div>
<b-nav-item>title4</b-nav-item>
</div>
</b-nav>
</div>
</b-sidebar>
</div>
</template>Here is my current progress:
https://i.sstatic.net/kFXbT.png
I am striving to achieve the same layout as shown in the image below.
https://i.sstatic.net/uQeaJ.png
I have attempted to use flexbox to reach my desired design, but it isn't working as expected. Any assistance would be greatly appreciated! What is the proper approach to accomplish my objective? The b-nav-item in the DOM tree is simply an <li> element with a link. I have also tried inserting images directly into the b-nav-item tag, but they do not render correctly.