<template>
  <n-button circle type="primary" size="large" :class=cvalue @click="show = true">
    <template #icon>
      <n-icon>
        <Cable />
      </n-icon>
    </template>
  </n-button>
  
  <n-drawer v-model:show="show">
    <n-drawer-content>
      <SerialPortManagementView></SerialPortManagementView>
    </n-drawer-content>
  </n-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { NButton, NIcon, NDrawer, NDrawerContent } from 'naive-ui'
import { CableFilled as Cable } from '@vicons/material'
import { SerialPortManagementView } from '@/components/SerialPort'

const show = ref(false)
const cvalue = ref('drawer-control-button')

const appname = (name) => {
  if(name == 'fontDesign'){
    cvalue.value = 'tobottom'
  }
}

defineExpose( { appname })
</script>

<style scoped lang="less">
.drawer-control-button {
  position: fixed;
  right: 60px;
  top: 120px;
}

.tobottom {
  position: fixed;
  right: 49%;
  bottom: 0.5%;
}
</style>