<!--
 * @Date: 2024-08-28 10:17:07
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-08-29 16:10:19
 * @FilePath: /vue2_vite_web/src/components/navbar.vue
 * @Description: 文件描述
-->
<template>
  <div class="navbar-container">
    <div class="big-navbar" v-if="!isMobile"></div>
    <div class="small-navbar" v-else></div>
  </div>
</template>

<script setup>
const isMobile = ref(window.innerWidth < 768)
const updateWindowSize = () => {
  isMobile.value = window.innerWidth < 768
}
// 使用watch来监听窗口大小变化（也可以使用其他方式）
watch(
  () => window.innerWidth,
  (newVal, oldVal) => {
    updateWindowSize()
  },
  { immediate: false },
)
onMounted(() => {
  window.addEventListener('resize', updateWindowSize)
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', updateWindowSize)
})
</script>
<style lang="scss" scoped>
// 也可以使用媒体查询来设置一些样式
@media (max-width: 768px) {
  .navbar {
    background: rgb(255, 255, 255);
  }
}
</style>