gushen/template-vue-hucky
1
0
Fork 0
Code Pull Requests Activity

feat: nav bar animate

Browse Source
This commit is contained in:
gushen610140
2026-02-04 22:28:00 +08:00
parent e9b38b48e9
commit e0d8cd6cb5
6 changed files with 149 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
src/components/menu/NavBar.vue
View File

@@ -2,58 +2,88 @@
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="navbar bg-base-200 shadow-sm">
<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 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>
<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>
<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>