Use composition API in sidebar.vue

components/sidebar.vue

@@ -95,26 +95,22 @@ fill="currentColor" class="bi bi-door-closed" viewBox="0 0 16 16"> <path d="M3
 </menu>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted } from "vue"
+const props = defineProps(['role', 'active'])
+const mobile = ref(false)
+const toggled = ref(false)
+
 function checkMobile() {
 	if (window.innerWidth < 720) {
-		this.mobile = true
+		mobile.value = true
 	} else {
-		this.mobile = false
+		mobile.value = false
 	}
 }
 
-export default {
+onMounted(() => {
-	methods: { checkMobile },
+		window.onresize = checkMobile
-	props: ['role', 'active'],
+		checkMobile()
-	data() {
+})
-		return {
-			mobile: false, toggled: false
-		}
-	},
-	created() {
-		window.onresize = this.checkMobile
-		this.checkMobile()
-	}
-}
 </script>