make the navbar rensposive add checkscreen command or something similar

Heading ##i want to make the navbar rensponsive, changing between desktop nav and mobilenav depanding the scaling of the screen.

Also make the sidepanel open and close with the same button .

<script setup>
import { onMounted, ref,  } from "@vue/runtime-core";


const windWidth = ref(null);
const desktopNav = ref(null);
const mobileNav = ref(null);
const mySidepanel = ref(null);

const openNav = () => {
  mySidepanel.value = {
    width: "250px",
  };
};

const closeNav = () => {
  mySidepanel.value = {
    width: "0",
  };
};

onMounted(() => {
  windWidth.value = window.innerWidth;
  if (windWidth.value >= 750) {
    desktopNav.value = {
      display: "block",
    };

    mobileNav.value = {
      display: "none",
    };
  } else if (750 >= windWidth.value) {
    desktopNav.value = {
      display: "none",
    };
    mobileNav.value = {
      display: "block",
    };
  }
  window.addEventListener('resize', this.onMounted);
  this.onMounted();
  console.log(windWidth.value);
});
</script>