How to fade out the very right of a navbar and add a new button to it

I want a feature on my Navbar where if my Navbar's width is greater than its parent div, fade the very right of it and add a new button to it. Something similar to Youtube.

1- When the width of Navbar is greater than its parents div it looks like this:

2- When the width of Navbar is less than its parents div it looks like this:

How can I achieve this?

Also this is my Navbar:

  <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">
          
        </button>
      </form>
    </nav>
  </template>

  <script>
  export default {
  data() {
    return {
      genres: [
        .
        .
        .
        "REALITY TV",
        "SPORTS",
        "HORROR"
        ]
      };
    }
  };
  </script>

from How to fade out the very right of a navbar and add a new button to it