Dual Menu Bar Implementation

we have two menu bar one for normal window and other for show when window scroll to bottom and then if up again show default menubar

To implement a dual-menu bar system in your Vue.js application where one menu bar is shown by default, and another is displayed when the window is scrolled to the bottom, follow these steps:

—

### **1. Setup Vue Component**
Create a Vue component for the menu bar.

“`vue

Home
About
Contact

Home
Services
Portfolio

export default {
data() {
return {
showScrollMenu: false,
};
},
methods: {
handleScroll() {
const scrollTop = window.scrollY;
const scrollHeight = document.documentElement.scrollHeight;
const clientHeight = document.documentElement.clientHeight;

if (scrollTop + clientHeight >= scrollHeight) {
// Reached the bottom
this.showScrollMenu = true;
} else if (scrollTop === 0) {
// Scrolled back to the top
this.showScrollMenu = false;
}
},
},
mounted() {
window.add