https://i.stack.imgur.com/iEgAF.png
I have developed a website for employee monitoring with six interfaces. The first interface is for sign-up, the second for logging in, the third for creating projects, the fourth for displaying projects, the fifth for creating tasks, and the sixth for viewing tasks. I have also created a sidebar that I want to appear on all interfaces except for sign-up and log-in pages. Here is the code structure using router-view: App.vue:
<template>
<v-app>
<router-view></router-view>
</v-app>
</template>
<script>
export default {
components:{
}
}
</script>
The sidebar component was implemented separately in navbar.vue file to be displayed across all interfaces: navbar.vue:
<template>
<v-app>
<div class="main-sidebar-container">
<div class="main-sidebar-container_content">
<v-navigation-drawer class="deep-purple accent-4" dark permanent>
<div class="main-sidebar-container_content_header">
<img class="logo" src="../../../src/assets/logo_base.png" />
</div>
<v-divider></v-divider>
<div class="sidebar-search">
<div class="cu2-search_simple-layout cu2-search">
<div class="cu2-search__inner ">
<div class="cu2-search__icon icon">
<svg class="ng-star-inserted">
<use
xlink:href="https://app.clickup.com/map.e7a227c29e2316abeae1.svg#svg-sprite-cu3-search"
></use>
</svg>
</div>
</div>
</div>
</div>
<div class="cu2-search__text"> Search </div>
<v-list>
<v-list-item v-for="item in items" :key="item.title" class="twoSection" link>
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
<template v-slot:append>
<div class="pa-2">
<v-btn block>
Logout
</v-btn>
</div>
</template>
</v-navigation-drawer>
</div>
</div>
</v-app>
</template>
<script>
export default {
data() {
return {
drawer: true,
items: [
{ title: "Home", icon: "mdi-home-city" },
{ title: "Notifications", icon: "mdi-account" },
{ title: "Pulse", icon: "mdi-account-group-outline" },
{ title: "Goals", icon: "mdi-account" },
{ title: "Show less", icon: "mdi-account-group-outline" }
],
mini: true,
};
},
};
</script>
<style scoped>
.main-sidebar-container {
left: 0;
top: 0;
bottom: 0;
height: 100%;
width: 60%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
}
.main-sidebar-container_content {
width: 50%;
height: 100%;
}
...
main.js:
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import VueRouter from "vue-router";
import { routes } from "./router";
import axios from "axios";
import { store } from './store/index';
import Vuelidate from "vuelidate";
import 'material-design-icons-iconfont/dist/material-design-icons.css'
Vue.config.productionTip = false
Vue.use(VueRouter);
Vue.use(Vuelidate);
axios.defaults.baseURL = "localhost:4000/api/services";
axios.defaults.headers.common["Authorization"] =
....