Import script in a page
Hello, I have here my navbar, I have my template v-else with a dropdown, how to import my typescript in the Navbar component ?
And is it a better way to do it ?
Thanks you
Env:
Nuxt 3
TailwindCSS
document.addEventListener('DOMContentLoaded', function () {
const dropdowns = document.querySelectorAll('.dropdown');
dropdowns.forEach(function(dropdown: Element) {
const action = dropdown.querySelector('.dropdown-action') as HTMLElement;
const menu = dropdown.querySelector('.dropdown-menu') as HTMLElement;
if (action !== null && menu !== null) {
menu.classList.add('animate__animated', 'animate__bounceOut');
// Wait for animation to end to add hidden class
menu.addEventListener('animationend', (event) => {
if(!menu.classList.contains('hidden')) {
if ((event as AnimationEvent).animationName === 'bounceOut') {
// Add the hidden class after the bounceOut animation ends
menu.classList.add('hidden');
}
}
});
// On click, add animation to show or hide the dropdown
action.addEventListener('click', () => {
// Check if the menu is currently hidden
if (menu.classList.contains('animate__bounceOut')) {
// Show the menu and add animation classes
menu.classList.remove('hidden');
menu.classList.remove('animate__bounceOut');
menu.classList.add('animate__bounceIn');
} else {
// Hide the menu and remove animation classes
menu.classList.remove('animate__bounceIn');
menu.classList.add('animate__bounceOut');
}
});
}
});
});
document.addEventListener('DOMContentLoaded', function () {
const dropdowns = document.querySelectorAll('.dropdown');
dropdowns.forEach(function(dropdown: Element) {
const action = dropdown.querySelector('.dropdown-action') as HTMLElement;
const menu = dropdown.querySelector('.dropdown-menu') as HTMLElement;
if (action !== null && menu !== null) {
menu.classList.add('animate__animated', 'animate__bounceOut');
// Wait for animation to end to add hidden class
menu.addEventListener('animationend', (event) => {
if(!menu.classList.contains('hidden')) {
if ((event as AnimationEvent).animationName === 'bounceOut') {
// Add the hidden class after the bounceOut animation ends
menu.classList.add('hidden');
}
}
});
// On click, add animation to show or hide the dropdown
action.addEventListener('click', () => {
// Check if the menu is currently hidden
if (menu.classList.contains('animate__bounceOut')) {
// Show the menu and add animation classes
menu.classList.remove('hidden');
menu.classList.remove('animate__bounceOut');
menu.classList.add('animate__bounceIn');
} else {
// Hide the menu and remove animation classes
menu.classList.remove('animate__bounceIn');
menu.classList.add('animate__bounceOut');
}
});
}
});
});
2 Replies
best way is rewriting this logic into vue π
Shouldn't be too difficult if
.dropdown is part of your app already.Hmm...
I made something like this, but how to handle multiple dropdowns :/