[Vuejs]-I want the sidebar to appear on all interfaces

by

4👍

✅

you can add your navbar component to App .vue

like

<template>
  <v-app>
     <div>
        <div class="flex w-full overflow-auto h-screen bg-page">
            <navbar class="w-full flex-1 max-w-72"/>
            <div class="px-4 flex-1 max-h-screen overflow-auto">
                <div class="pb-16">
                    <router-view></router-view>
                </div>
            </div>
        </div>  
 </v-app>
</template>
<script>
    import navbar from './navbar'
    export default {
      components:{
       navbar
      }
    }

</script>

but you should handle login and signup views to make sidebar disappears.

to do this you have several options.

👤Waseem Almoliky

1👍

For it to appear in every page, you need to import the navigation component in every page.

So for instance, let’s say your navigation file is called TheNavigation.vue, then on every interface you need to do something as following in the template where you want that component to appear–>

 <div style="text-align: center;">
           <TheNavigation />
        <transition name="fade" mode="out-in">
          <router-view :key="$route.path" />
        </transition>
 </div>

Then, in the script, you need to import the component like below

<script>
import TheNavigation from '../components/TheNavigation.vue';
import axios from "axios";
export default {
     components: {
    TheNavigation
  },
    data() {
    }
  }
 </script>

Let me know if this worked! Or if you need me to go deeper into this! Make sure to put your relative path when importing the navigation component in the script!

👤Maria

0👍

The way I used to do this in React.js was, I used to make a Menu Component then use that component with every MenuItem component.
Like in your case Home MenuItem or others component you can call Menu component in that MenuItem Component

Something like this

const Menu = () => {
    return <div>{...Menu}</div>
}

const HomeMenuItem  = () => {
    return (
        <div>
            <Menu />
            
            <div>
            {...this menu content in here!}
            </div>
        </div>
    )
}

and the same goes for every other menuItem, it’s somewhat of a hack but it works.

👤zillBoy

Leave a comment