How can I do a navigation-drawer with frosted glass effect in vuetify?

Question

I would like to achieve the effect of the deepin operating system control bar. I have dealt with some css codes that I have found online but none works for me on the drawer, if it works on v-cards but not on navigation-drawer.

this is example code

<v-app>
    <v-content class="bg">
      <v-container>
        <!-- -->
        <v-app-bar app color="deep-purple accent-4" dark>
          <v-app-bar-nav-icon></v-app-bar-nav-icon>

          <v-toolbar-title>Page title</v-toolbar-title>

          <v-spacer></v-spacer>

          <v-btn icon>
            <v-icon>mdi-heart</v-icon>
          </v-btn>

          <v-btn icon>
            <v-icon>mdi-magnify</v-icon>
          </v-btn>

          <v-menu left bottom>
            <template v-slot:activator="{ on }">
          <v-btn icon v-on="on">
            <v-icon>mdi-dots-vertical</v-icon>
          </v-btn>
        </template>

            <v-list>
              <v-list-item v-for="n in 5" :key="n" @click="() => {}">
                <v-list-item-title>Option {{ n }}</v-list-item-title>
              </v-list-item>
            </v-list>
          </v-menu>
        </v-app-bar>
        <!-- theme setting -->
        <v-btn small fab dark falt fixed top="top" right="right" class=" elevation-0 setting-fab" color="grey" @click="drawer = !drawer">
          <v-icon>mdi-settings</v-icon>
        </v-btn>
        <!-- setting drawer -->

        <v-navigation-drawer temporary v-model="drawer" hide-overlay fixed right width="400px">

          <v-row class="fill-height" no-gutters>
            <!-- Here I load the components dynamically, but to make it simple I will only introduce a v-card into the drawer -->
            <!--         <component v-if="!isSettingOpen" :is="componentToLoad"/> -->

            <v-flex>
              <v-card class="ma-auto FBox-root FBox-acrylic FCard-root" color="#385F73" dark style="position: relative">
                <v-card-title class="headline">Unlimited music now</v-card-title>

                <v-card-subtitle>Listen to your favorite artists and albums whenever and wherever, online and offline.</v-card-subtitle>

                <v-card-actions>
                  <v-btn text>Listen Now</v-btn>
                </v-card-actions>
              </v-card>
            </v-flex>
          </v-row>
        </v-navigation-drawer>
      </v-container>
    </v-content>
  </v-app>

This is the css

.setting-fab {
        top: 30% !important;
        right: 0;
        border-radius: 20%;
    }

   .bg {
  background: url(https://picsum.photos/1920/1080?random) center center / cover
    fixed;
}

.FBox-acrylic::after {
  inset: 0px;
  width: 100%;
  height: 100%;
  content: "";
  opacity: 0.5;
  z-index: -1;
  position: absolute;
  background-image: url("data:image/png;base64,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");
}

.FCard-acrylic::before {
  box-shadow: inset 0 0 2px 1px rgba(255, 255, 255, 0.2);
  transition: box-shadow 250ms cubic-bezier(0.7, 0.1, 0.33, 1) 0ms,
    filter 250ms cubic-bezier(0.7, 0.1, 0.33, 1) 0ms;
}

.FBox-acrylic::before {
  width: calc(100% + 20px);
  filter: blur(10px);
  height: calc(100% + 20px);
  content: "";
  z-index: -1;
  position: absolute;
  background: inherit;
}

.FCard-root {
  overflow: hidden;
  box-shadow: 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.132),
    0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.108);
  transition: box-shadow 250ms cubic-bezier(0.7, 0.1, 0.33, 1) 0ms,
    filter 250ms cubic-bezier(0.7, 0.1, 0.33, 1) 0ms;
  border-radius: 4px;
  background-color: #ffffff;
}

.FBox-acrylic {
  z-index: 1;
  background: inherit;
  overflow: hidden;
}
.v-card::before {
  content: '';
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
  background: url(https://picsum.photos/100/100) center center / cover
    fixed;
  filter: blur(3px)
}

.v-navigation-drawer::before {
  content: '';
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0.7;
  background: grey
}
.v-navigation-drawer {
  background: transparent !important
}

The sample code is in the following link Example Code

The idea is to achieve the effect of blurring everything that lies behind the drawer. The photos show the effect that I wish to achieve Example of the effect of the deepin operating system control bar

I hope you can help me. Cheers