91 lines
2.5 KiB
Vue
91 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import ChangeLanguageDropdownButton from "@/components/button/ChangeLanguageDropdownButton.vue";
|
|
import ChangeThemeDropdownButton from "@/components/button/ChangeThemeDropdownButton.vue";
|
|
import { useI18n } from "vue-i18n";
|
|
import { throttle } from "radash";
|
|
import { AnimatePresence, motion } from "motion-v";
|
|
|
|
const { t } = useI18n();
|
|
|
|
const showNavBar = ref(true);
|
|
const curScrollY = ref(0);
|
|
|
|
const handleThrottleScroll = throttle(100, () => {
|
|
const scrollY = window.scrollY;
|
|
if (scrollY > curScrollY.value) {
|
|
showNavBar.value = false;
|
|
} else {
|
|
showNavBar.value = true;
|
|
}
|
|
curScrollY.value = scrollY;
|
|
});
|
|
|
|
window.addEventListener("scroll", handleThrottleScroll);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full">
|
|
<AnimatePresence>
|
|
<motion.div
|
|
v-show="showNavBar"
|
|
class="navbar bg-base-200 shadow-sm"
|
|
:exit="{
|
|
y: -100,
|
|
transition: {
|
|
duration: 0.3,
|
|
},
|
|
}"
|
|
>
|
|
<div class="navbar-start">
|
|
<div class="dropdown">
|
|
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-5 w-5"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M4 6h16M4 12h8m-8 6h16"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<ul
|
|
tabindex="-1"
|
|
class="menu dropdown-content bg-base-100 rounded-box z-1 mt-5 w-52 p-2 shadow"
|
|
>
|
|
<li>
|
|
<a>{{ t("nav.home") }}</a>
|
|
</li>
|
|
<li>
|
|
<a>{{ t("nav.about") }}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<a class="btn btn-ghost text-xl">Hucky</a>
|
|
</div>
|
|
<div class="navbar-center hidden lg:flex">
|
|
<ul class="menu menu-horizontal px-1">
|
|
<li>
|
|
<a>{{ t("nav.home") }}</a>
|
|
</li>
|
|
<li>
|
|
<a>{{ t("nav.about") }}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="navbar-end">
|
|
<ChangeThemeDropdownButton />
|
|
<ChangeLanguageDropdownButton />
|
|
</div>
|
|
</motion.div>
|
|
</AnimatePresence>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|