How can I adjust the width of the overlay nav specifically for small devices in Vue or CSS? My current width is set to 25% for devices with a width of 1000px or more, but I need a different width of 35% or more for smaller devices to improve text visibility. Are there any solutions for this problem?
new Vue({
el: '#app',
data: () => ({
open: false,
}),
methods: {
changeP () {
this.arrowP = (this.arrowP === 'arrow-right') ? 'angle-down' : 'arrow-right'
},
setProperty (event) {
this.$store.dispatch('display', event)
},
toggleOverlay () {
this.open = !this.open
}
},
})
$(function () {
openNav()
closeNav()
}).navbar-icon {
outline: none;
border: 0;
box-shadow: none;
background: inherit;
}
.navbar-icon::before {
content: '\F0C9';
font-family: 'FontAwesome', serif;
font-size: 24px;
}
/* Other CSS styles here */
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.15.0/bootstrap-vue-icons.common.js"></script>
<div id="app" class="container-fluid admin-panel p-0">
<b-container fluid="lg" id="myNav" class="overlay p-0"
:style="{ width: open ? '25%': '0' }">
<b-button class="close" @click="toggleOverlay"/>
<b-container class="overlay-content">
<b-row class="bottom-border">
<b-container fluid="sm" class="image-cropper">
<img :src="pImage" alt="" class="profile-pic">
</b-container>
<b-container fluid="sm" class="profile-name">
<h5>Shah Rukh Khan</h5>
<b-row class="profile-row">
<b-button
class="button new-user"
v-b-popover.hover.bottom="'User'" />
<b-button class="button setting"
v-b-popover.hover.bottom="'Setting'" />
<b-button class="button logout"
v-b-popover.hover.bottom="'Logout'" />
</b-row>
</b-container>
</b-row>
<b-button @click="changeP()"
:class="'sub-title product ' + arrowP"
v-b-toggle.collapse-product
v-text="'Product'"/>
<b-collapse id="collapse-product" class="dropdown-list">
<b-button class="button" v-text="'Product List'"/>
<br>
<b-button class="button" v-text="'New Product'"/>
<br>
<b-button class="button" v-text="'Update Product'"/>
</b-collapse>
</b-container>
</b-container>
</div>