yuanhau/news-analyze
1
0
Fork 0
mirror of https://github.com/hpware/news-analyze.git synced 2025-06-23 13:04:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

feat: integrate animate.css for animations, enhance layout, and improve localization files

Browse source
This commit is contained in:
yuanhau 2025-05-06 19:31:53 +08:00
parent 95661e908a
commit 2f20d49091
21 changed files with 252 additions and 172 deletions
Download patch file Download diff file Expand all files Collapse all files

123
components/navigation.vue
View file

@ -1,62 +1,91 @@
<script setup lang="ts">
import { gsap } from 'gsap';
import { ScrambleTextPlugin } from 'gsap/dist/ScrambleTextPlugin';
gsap.registerPlugin(ScrambleTextPlugin)
import { gsap } from "gsap";
import { ScrambleTextPlugin } from "gsap/dist/ScrambleTextPlugin";
gsap.registerPlugin(ScrambleTextPlugin);
const { t, locale, locales } = useI18n();
const switchLocalePath = useSwitchLocalePath()
const switchLocalePath = useSwitchLocalePath();
const dropdownOpen = ref(false);
const title = ref(null);
const availableLocales = computed(() => {
return locales.value.filter(i => i.code !== locale.value)
})
return locales.value.filter((i) => i.code !== locale.value);
});
const toggleDropdown = () => {
dropdownOpen.value = !dropdownOpen.value;
}
dropdownOpen.value = !dropdownOpen.value;
};
const runAnimation = () => {
gsap.to(title.value, {
duration: 1,
scrambleText: "BlindSpec",
});
}
gsap.to(title.value, {
duration: 1,
scrambleText: "BlindSpec",
});
};
</script>
<template>
<!--Spent too much time trying to set a Navbar....-->
<div class="fixed top-0 inset-x-0 bg-[#81611a]/70 backdrop-blur-sm h-[55px] flex align-center flex-row text-white pl-4 pt-2 gap-x-5 justify-between z-50 rounded-3xl m-2">
<div class="text-3xl text-bold">
<!--Use mouseenter instead of hover-->
<a href="/" @mouseenter="runAnimation" ref="title">
BlindSpec
</a>
</div>
<div class="text-[0.9em] text-center align-center">
<a href="/" class="hover:text-blue-500 cursor-pointer transiton-all duration-100">{{ t("nav.home") }}</a>
&nbsp;
<a href="/dailybriefing" class="hover:text-blue-500 cursor-pointer transiton-all duration-100">{{ t("nav.dailybriefing") }}</a>
</div>
<div class="relative">
<button @click="toggleDropdown"
class="flex items-center space-x-2 px-4 py-2 rounded hover:bg-gray-900 transition-all duration-100">
<span>{{ locale }}</span>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 9l-7 7-7-7"/>
</svg>
</button>
<div v-if="dropdownOpen"
class="absolute top-full left-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1">
<a v-for="loc in availableLocales"
:key="loc.code"
:href="switchLocalePath(loc.code)"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
{{ loc.name || loc.code }}
</a>
</div>
</div>
<!--Spent too much time trying to set a Navbar....-->
<div
class="fixed top-0 inset-x-0 bg-[#81611a]/70 backdrop-blur-sm h-[55px] flex align-center flex-row text-white pl-4 pt-2 gap-x-5 justify-between z-50 rounded-3xl m-2"
>
<div class="text-3xl text-bold">
<!--Use mouseenter instead of hover-->
<a href="/" @mouseenter="runAnimation" ref="title"> BlindSpec </a>
</div>
</template>
<div class="text-[0.9em] text-center align-center">
<a
href="/"
class="hover:text-blue-500 cursor-pointer transiton-all duration-100"
>{{ t("nav.home") }}</a
>
&nbsp;
<a
href="/dailybriefing"
class="hover:text-blue-500 cursor-pointer transiton-all duration-100"
>{{ t("nav.dailybriefing") }}</a
>
</div>
<div class="relative">
<button
@click="toggleDropdown"
class="flex items-center space-x-2 px-4 py-2 rounded hover:bg-gray-900 transition-all duration-100"
>
<span>{{ locale }}</span>
<svg
class="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</button>
<Transition
enter-active-class="animate__animated animate__fadeInDown animate__faster"
leave-active-class="animate__animated animate__fadeOutUp animate__faster"
>
<div
v-if="dropdownOpen"
class="absolute top-full right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1"
>
<a
v-for="loc in availableLocales"
:key="loc.code"
:href="switchLocalePath(loc.code)"
v-on:click="dropdownOpen = false"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-all duration-100"
>
{{ loc.name || loc.code }}
</a>
</div>
</Transition>
</div>
</div>
</template>