mynav | Automatically exported from code.google.com/p/mynav | Reverse Engineering library

I'm working on a portfolio site for myself but I keep getting this odd behavior with my css animations that I am not interested in. In my mind how it is supposed to work is when someone visits my site the header links should fade-in from the top. Once they have faded into place, if I hover the mouse cursor over the links, it should play a pulsate-into-fading animation and repeat for as long as the mouse cursor is over the link. All of this works properly.

The problem comes into play when I try to delay the initial animation for the fade-in from the top animation so I can achieve a kind of like "step" or "cascading" animation where the first link drops down and fades into location, a second later the second link drops down and fades in, then after two seconds the third link drops down and fades in. If I delay the animation, I lose the drop down effect and only the fade in effect plays.

This is the snippet where all three links fade-in and drop down into place.

I am invoking the useTranslation hook from within a normal function as below

I am trying to display made up stores using cards. I'm setting a max width so that the images will keep their aspect ratio, unequal card sizes are expected. I'm grouping these cards inside of a flex container so that I don't have to worry about their placement in the page too much. However, when I do this, I get equal size cards. The images are different sizes and keep their aspect ratio which is good, but the body of the cards change to whatever will make the cards equal size.

I am trying to understand why this happens. What is it about the flex container that makes the elements inside of it be of equal size? I apologize if it's a dumb question but I couldn't figure it out. Note that this is only visible when looking at the page horizontally. The size of the cards is actually how I want it to be when looking at it vertically.

I have a javascript hamburger menu that condenses below 800px. Everything works as planned until I reach this failure point:

Once the onclick is activated twice (to open and close the menu), if the browser is resized to larger than 800px all elements of the menu disappear. Why?

The responsive style resumes as normal once sized below the width threshold. If the onclick is not activated there is no problem with the css rules.

I am testing in firefox, chrome, and safari on a Mac.

So, I have a navigation bar with router-links. What I want is for the selected link to remain highlighted on selection, so that the users know which page they are on. Currently I have something like this.

I am trying to change the button based on if a user is logged in or not. the functionality is managed from MyNav.js. if the user is logged in I show the sign-out button, otherwise, I show the sign-in and sign-up button. It would be great if you can guide what part I am doing wrong.

Warning:

I'm having syntax issues within a return. I'm trying to check if an array item exists. The issue is how I am writing the code I think.

The code causing the error is:

I have a sidebar and I have 2 functions. One opens it and the other one closes it.

Here are the two functions.

I have an HTML code which has a "download" button that makes a file download in page through GET to a python code, the thing is this page has a refresh rate of 5 seconds and works well but as soon as I click the download button and file is download the page stops refreshing.

what can I do to fix it?

HTML :