I'm looking to enhance my Navbar by implementing a feature where, if the width of the Navbar exceeds that of its parent div, it will fade on the right side and a new button will be added - similar to what can be seen on Youtube.
1- When the Navbar's width is greater than its parent div, it should resemble this image:https://i.stack.imgur.com/4M5AG.png
2- Conversely, when the Navbar's width is less than its parent div, it should look like this: https://i.stack.imgur.com/Jc4lu.png
How can I go about achieving this effect?
Below is the code for my existing Navbar setup:
<template>
<nav class="navbar navbar-expand-lg navbar-light bg-light pl-4">
<form class="form-inline" v-for="(genre, index) in genres" :key="index">
<button class="btn btn-outline-dark m-1" type="button">
{{ genre }}
</button>
</form>
</nav>
</template>
<script>
export default {
data() {
return {
genres: [
.
.
.
"REALITY TV",
"SPORTS",
"HORROR"
]
};
}
};
</script>