xclele/vue-material-kit
1
0
Fork 0
mirror of https://github.com/creativetimofficial/vue-material-kit.git synced 2025-05-23 12:14:22 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

asidebar

Browse Source
This commit is contained in:
Saadani-Malek92 2024-05-27 16:48:48 +01:00
parent 008c1e634e
commit 49409ba211
2 changed files with 109 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/views/Admin/SideNavAdmin.vue
View File

@ -1,18 +1,35 @@
<template> <template>
<div class="aside-menu">
<nav class="nav flex-column"> <div id="sidebar">
<a class="nav-link" href="#" @click.prevent="goToPage('el-badges')" active-class="active">
<i class="bi bi-speedometer2"></i> Dashboard <ul class="nav">
<li>
<a class="nav-link" href="#" @click.prevent="goToPage('el-badges')" active-class="active">
<i class="zmdi zmdi-view-dashboard"></i> Dashboard
</a> </a>
<a class="nav-link" href="#" @click.prevent="goToPage('admin-users')" active-class="active">
<i class="bi bi-people"></i> Users </li>
<li>
<a class="nav-link" href="#" @click.prevent="goToPage('admin-users')" >
<i class="zmdi zmdi-link"></i> Users
</a> </a>
<a class="nav-link" href="#" @click.prevent="goToPage('admin-settings')" active-class="active">
<i class="bi bi-bar-chart"></i> Analytics </li>
<li>
<a class="nav-link" href="#" @click.prevent="goToPage('admin-settings')">
<i class="zmdi zmdi-widgets"></i> Analytics
</a> </a>
</nav>
</li>
</ul>
</div> </div>
</template> </template>
<script> <script>
@ -25,20 +42,3 @@ export default {
} }
</script> </script>
<style>
.aside-menu {
background-color: #f8f9fa;
padding: 1rem;
height: 100vh;
border-right: 1px solid #e9ecef;
}
.nav-link {
color: #495057 !important;
}
.nav-link.active {
color: #007bff;
font-weight: bold;
}
</style>

92
src/views/Admin/dashboard.vue
View File

@ -1,13 +1,15 @@
<template> <template>
<div id="viewport">
<Sidebar />
<div id="content">
<router-view />
<div class="container-fluid">
<div class="dashboard-page"> <h1>Simple Sidebar</h1>
<div class="row"> <p>
<div class="col-3"> Make sure to keep all page content within the
<Sidebar /> <code>#content</code>.
</div> </p>
<div class="col-9">
<router-view />
</div> </div>
</div> </div>
</div> </div>
@ -20,4 +22,76 @@ import Sidebar from './SideNavAdmin.vue';
export default { export default {
components: { Sidebar } components: { Sidebar }
} }
</script> </script>
<style scoped>/* Toggle Styles */
#viewport {
padding-left: 250px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#content {
width: 100%;
position: relative;
margin-right: 0;
}
/* Sidebar Styles */
#sidebar {
z-index: 1000;
position: fixed;
left: 250px;
width: 250px;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #37474F;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#sidebar header {
background-color: #263238;
font-size: 20px;
line-height: 52px;
text-align: center;
}
#sidebar header a {
color: #fff;
display: block;
text-decoration: none;
}
#sidebar header a:hover {
color: #fff;
}
#sidebar .nav{
}
#sidebar .nav a{
background: none;
border-bottom: 1px solid #455A64;
color: #CFD8DC;
font-size: 14px;
padding: 16px 24px;
}
#sidebar .nav a:hover{
background: none;
color: #ECEFF1;
}
#sidebar .nav a i{
margin-right: 16px;
}
</style>