有沒有可能使用quasar flex類來實現(xiàn)側(cè)邊欄菜單頂部的logo類，然后用類名m enu-icons將父div居中，直到屏幕垂直折疊，然后就放在logo上面而不擠壓它或重疊它。基本上居中，直到居中的菜單和徽標(biāo)之間的空間變?yōu)榱悖谶@種情況下，它就會堆疊起來。

我的側(cè)邊欄代碼如下:

<template>
  <div style="height: calc(100vh - 64px); overflow: hidden;">
    <div class="window-height bg-black text-white text-center">
      <div class="q-pt-xl logo">
        <q-img
          src="~assets/img/sidebarLogo.png"
          spinner-color="white"
          style="max-width: 45%;"
        />
      </div>
      <div class="menu-icons">
        <div class="q-py-lg">
          <q-list class="curved-parent-ul">
            <q-item v-for="(menuItem, index) in primaryMenuArr" :key="index" class="curved-child-li"
              :active="activeMenuItem === menuItem.name"
              @click="activeMenuItem = menuItem.name"
              active-class="active"
              clickable
              manual-focus
              :link="menuItem.link"
              no-ripple>
              <q-icon size="sm" :name="menuItem.icon" class="absolute-center" />
            </q-item>
          </q-list>
        </div>
        <q-separator dark inset :size="'1.5px'" class="bg-white"/>
        <div class="q-py-lg">
          <q-list class="curved-parent-ul">
            <q-item v-for="(menuItem, index) in secondaryMenuArr" :key="index" class="curved-child-li"
              :active="activeMenuItem === menuItem.name"
              @click="activeMenuItem = menuItem.name"
              active-class="active"
              clickable
              manual-focus
              no-ripple>
              <q-icon size="sm" :name="menuItem.icon" class="absolute-center" />
            </q-item>
          </q-list>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { storeToRefs } from 'pinia'
  import {useLayoutStore} from '../stores/layout-store'

  const layoutStore = useLayoutStore()
  const {primaryNavigationDrawer} = storeToRefs(layoutStore)
  const leftDrawerOpen: Ref<boolean> = ref(true)
  const activeMenuItem: Ref<string> = ref('Home')

  interface menuArr {
    name: string;
    ariaLabel: string;
    icon: string;
    link: string;
    }
  const primaryMenuArr: menuArr[ ] = [
    { name: 'Home', ariaLabel: 'Home', icon: 's_dashboard', link: '#' },
    { name: 'Stuff', ariaLabel: 'Stuff', icon: 's_drive_folder_upload', link: '#' },
    { name: 'Stuff 2', ariaLabel: 'Stuff 2', icon: 's_work', link: '#' },
    ]

  const secondaryMenuArr: menuArr[ ] = [
    { name: 'Settings', ariaLabel: 'Settings', icon: 's_settings', link: '#' },
    { name: 'Log Off', ariaLabel: 'Upload', icon: 's_logout', link: '#' },
    ]
</script>
<style scoped>
.curved-parent-ul {
  padding: 20px 0px;
  width: 100%;
  transition: 0s;
  overflow: hidden;
}

.curved-parent-ul .curved-child-li {
  list-style: none;
  padding: 30px;
  padding-right: 0;
  color: white;
  font-size: 15px;
  margin-bottom: 10px;
  cursor: pointer;
  position: relative;
  transition: 0s;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;

}

.curved-parent-ul .curved-child-li.active:before {
  content: '';
  position: absolute;
  top:-30px;
  right: 0px;
  width: 30px;
  height:30px;
  border-radius: 50%;
  box-shadow: 15px 15px 0 #fff;
}

.curved-parent-ul .curved-child-li.active:after {
  content: '';
  position: absolute;
  bottom:-30px;
  right: 0px;
  width: 30px;
  height:30px;
  border-radius: 50%;
  box-shadow: 15px -15px 0 #fff;
}

.curved-parent-ul .curved-child-li.active {
  background: #fff;
  color: #000;
}
</style>