Fix NavbarExtension

[JonathanXDR]

• Make sure the NavbarExtension attaches correctly according to the border of the Navbar

I've got the following NavBarExtension.vue component in my Nuxt 3 app. Here is the current and the expected behaviour of that component.

Scenario 1

State: Navbar component (autoHide=false, Navbar is always visible)

Expected Result:

• if the user scrolls down, the NavBarExtension attaches smoothly to the bottom of the Navbar (without any animation) when it passes original location of the NavBarExtension.
• if the user scrolls up, the NavBarExtension keeps being attached until it detaches smoothly when it passes original location of the NavBarExtension (without any animation).

Scenario 2

State: Navbar component (autoHide=true, Navbar is currently not visible because user last scrolled down)

Expected Result:

• if the user scrolls down, the NavBarExtension attaches smoothly to the top of the screen using an animation when it passes original location of the NavBarExtension. (the Navbar will automatically hide again)
• if the user scrolls up, the NavBarExtension keeps being attaches smoothly to the bottom of the Navbar using an animation until it detaches smoothly when it passes original location of the NavBarExtension (without any animation).