【发布时间】：2021-03-14 05:29:00
【问题描述】：
我在我的项目中使用 Vue.js，我已经制作了一个仪表板部分，但我想要一些响应式的东西，应该使用 bootstrap 或 bootstrap-vue 或纯 HTML、CSS。 附上我想要的仪表板图片->
这是我关注的帖子 vuebootstrap b-collapse: when sidebar collapse, change margin-left content div
我的代码---
<div>
<b-collapse v-model="visible" id="collapse-4">
<div class="sidebar scrollable-menu">
<div style="height: 36%">
<img
src="../../../public/images/profile.png"
style="
width: 70px;
height: 70px;
border-radius: 50%;
margin-top: 40px;
"
/>
<h3
style="
font-weight: bold;
font-size: 16px;
margin-top: 15px;
color: white;
"
>
Hello {{name}}
</h3>
<button
class="mr-2 mt-2 btn"
style="
background-color: #595cf5;
color: white;
border-radius: 20px;
font-size: 12px;
padding: 3px 8px;
"
>
<b-link
:to="{ path: '/dashboard/freelancer/editprofile' }"
style="background-color: #595cf5; color: white"
>Edit profile</b-link
>
</button>
</div>
<div style="background-color: #3b4664; height: 65%">
<ul class="ul-dash">
<li>
<b-link
exact-active-class="active"
:to="{ path: '/dashboard/freelancer/' }"
>
<b-icon icon="pentagon" class="mr-4"></b-icon>Home</b-link
>
</li>
<li>
<b-link
exact-active-class="active"
:to="{ path: '/dashboard/freelancer/projects' }"
><b-icon icon="files" class="mr-4"></b-icon>Projects</b-link
>
</li>
<li>
<b-link
exact-active-class="active"
:to="{ path: '/dashboard/freelancer/invitations' }"
>
<b-icon icon="person-plus" class="mr-4"></b-icon
>Invitations</b-link
>
</li>
<li>
<b-link
exact-active-class="active"
:to="{ path: '/dashboard/freelancer/transactions' }"
><b-icon icon="cash" class="mr-4"></b-icon>Transactions</b-link
>
</li>
<li>
<b-link
exact-active-class="active"
:to="{ path: '/dashboard/freelancer/referrals' }"
><b-icon icon="people-fill" class="mr-4"></b-icon>Referrals</b-link
>
</li>
<li>
<b-link
exact-active-class="active"
:to="{ path: '/dashboard/freelancer/resume' }"
>
<b-icon icon="file-earmark-text" class="mr-4"></b-icon
>Resume</b-link
>
</li>
</ul>
<div class="contact">
<span style="color: gray"> Having troubles? </span>
<p>Contact us</p>
</div>
</div>
</div>
</b-collapse>
<div class="content">
<b-navbar fixed="top" class="navbar">
<b-navbar-brand href="#"
><img
src="../../../public/images/fevicon.png"
:class="visible ? null : 'collapsed'"
:aria-expanded="visible ? 'true' : 'false'"
aria-controls="collapse-4"
@click="visible = !visible"
style="
width: 30px;
margin-right: 10px;
box-shadow: 1px 1px 3px #eaeaea;
border-radius: 50%;
"
/>KickStartup
</b-navbar-brand>
<b-collapse id="nav-collapse" is-nav>
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto">
<!-- <b-nav-item href="#" class="nav-item"
><span>Top 1%</span></b-nav-item
> -->
<b-nav-item-dropdown right>
<!-- Using 'button-content' slot -->
<template #button-content>
<img
src="../../../public/images/profile.png"
style="width: 25px"
/>
</template>
<b-dropdown-item to="/dashboard/freelancer/editprofile"
>Profile</b-dropdown-item
>
<b-dropdown-item @click="logout">Sign Out</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-collapse>
</b-navbar>
<div class="maincontent">
<router-view></router-view>
</div>
</div>
CSS -
.sidebar {
position: fixed;
background-color: #181e36;
border-radius: 0px;
top: 0px;
left: 0px;
height: 100vh;
width: 270px;
z-index: 1000;
overflow-x: hidden;
overflow-y: auto;
padding-left: 0;
padding-right: 0;
}
.nav-item span {
background-color: orange;
padding: 5px 10px;
border-radius: 10px;
color: white;
margin-right: 10px;
}
.navbar {
margin-left: 0px;
background-color: white !important;
box-shadow: 0px 2px 5px 2px #efefef, 0px 2px 5px 2px #efefef;
}
.collapse.show ~ .content {
margin-left: 280px;
}
.collapse.show ~ .content .navbar {
margin-left: 272px;
}
.content {
margin-top: 0px;
margin-right: 5px;
border-radius: 15px;
}
.maincontent {
margin-top: 60px;
}
.active {
color: white !important;
}
.ul-dash li a {
color: #aeb1ba;
}
.ul-dash {
position: relative;
padding-top: 20px;
margin: -10px;
color: lightgray;
}
.ul-dash li {
text-align: start;
display: block;
list-style: none;
font-size: 17px;
margin-bottom: 20px;
}
a:hover {
text-decoration: none;
}
.ul-dash .active::after {
content: "• "; /*don't miss the space*/
color: #595cf5;
font-size: 20px;
margin-left: 45px;
}
.contact {
margin: 20px;
margin-top: 90px;
text-align: start;
background-color: #181e36;
border-radius: 15px;
color: white;
font-size: 13px;
padding-top: 10px;
}
.contact p {
margin: 0px 15px;
padding: 5px 0 10px 0;
}
.contact span {
margin-left: 15px;
}
js-
props: {},
created() {
HTTP.get("/freelancerdash/myprofile", {
withCredentials: true,
})
.then((res) => {
console.log(res);
this.name = res.data.name;
})
.catch((errors) => {
console.log("error hai");
});
},
data() {
return {
visible: true,
name: "",
};
},
methods: {
...mapActions(["logout"]),
},
【问题讨论】：
标签： html vue.js navbar sidebar bootstrap-vue