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>