I want the sidebar to appear on all interfaces - css

Question

I am creating a site for the sake of monitoring employees, and there are six interfaces on the site, as the first interface is for the Sine-Up, the second for logging, and the third interface is for creating a project, the fourth interface is for displaying projects, the fifth is for creating TASK and the sixth In order to view the tasks.
And I created a sidebar in a separate interface, which is the image shown in the screen, and my problem now is that I want the sidebar to appear in all interfaces except for the signup and the log.
This is the application file from which router-view is used.
App.vue:
<template>
<v-app>
<router-view></router-view>
</v-app>
</template>
<script>
export default {
components:{
}
}
</script>
And in this file, the sidebar was created, which I want to appear in all the 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-sidebar-container_content_header {
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 10%;
padding-left: 1rem;
}
.logo {
display: flex;
width: 50%;
z-index: 1;
position: fixed;
}
.sidebar-search {
display: flex;
align-items: center;
height: 32px;
flex-shrink: 0;
margin: 0 8px 10px;
}
.cu2-search_simple-layout {
width: auto;
height: 100%;
flex-grow: 1;
border-radius: 4px;
background: #f6f7f9;
}
.cu2-search {
transition: background-color 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 30px;
height: 30px;
border-radius: 3px;
overflow: hidden;
flex-shrink: 0;
}
.cu2-search__inner {
display: flex;
align-items: center;
cursor: pointer;
width: 100%;
height: 100%;
}
.cu2-search__icon {
transition: fill 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
}
.icon {
display: flex;
align-items: center;
justify-content: center;
flex-grow: 0;
flex-shrink: 0;
}
.icon svg {
display: block;
}
.cu2-search__text{
display: block;
font: 400 12px/1 Gotham Pro,Proxima Nova,arial,serif;
color: rgba(124,130,141,.5);
transition: color .2s cubic-bezier(.785,.135,.15,.86) 0s;
cursor: pointer;
display: none;
}
.twoSection{
display: flex;
justify-content: center;
align-items: center;
height: 10%;
}
</style>
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"] =
"Bearer " + localStorage.getItem("accessToken") || null;
axios.defaults.headers.get["Accepts"] = "application/json";
const router = new VueRouter({
routes,
mode: "history",
});
new Vue({
vuetify,
router,
store,
render: h => h(App)
}).$mount('#app')

Answer 1

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.

Answer 2

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!

Answer 3

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.