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

sideBar dashboard admin

Browse Source
This commit is contained in:
Saadani-Malek92 2024-05-23 15:33:56 +01:00
parent eff0ac75ae
commit 008c1e634e
4 changed files with 68 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/App.vue
View File

@ -1,18 +1,5 @@
<script setup> <script setup>
/*
=========================================================
* Vue Material Kit 2 - v2.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/vue-material-kit
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
import { RouterView } from "vue-router"; import { RouterView } from "vue-router";
</script> </script>

26
src/router/index.js
View File

@ -170,6 +170,21 @@ const router = createRouter({
path: '/admin/dashboard', path: '/admin/dashboard',
component: AdminDashboardView, component: AdminDashboardView,
name: "admin-dashboard", name: "admin-dashboard",
children: [
{
path: '/admin/users',
component: AdminUsersView,
name: "admin-users",
},
{
path: '/admin/settings',
component: AdminSettingsView,
name: "admin-settings",
},
// Other child routes for the dashboard
]
}, },
// { // {
// path: "/unauthorized", // path: "/unauthorized",
@ -181,16 +196,7 @@ const router = createRouter({
name: "user-login", name: "user-login",
component: UserLoginView, component: UserLoginView,
}, },
{
path: '/admin/users',
component: AdminUsersView,
name: "admin-users",
},
{
path: '/admin/settings',
component: AdminSettingsView,
name: "admin-settings",
},
], ],
}); });

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

@ -1,11 +1,18 @@
<template> <template>
<aside class="sidebar">
<ul> <div class="aside-menu">
<li><a href="#" @click.prevent="goToPage('el-badges')">Dashboard</a></li> <nav class="nav flex-column">
<li><a href="#" @click.prevent="goToPage('admin-users')">Users</a></li> <a class="nav-link" href="#" @click.prevent="goToPage('el-badges')" active-class="active">
<li><a href="#" @click.prevent="goToPage('admin-settings')">Settings</a></li> <i class="bi bi-speedometer2"></i> Dashboard
</ul> </a>
</aside> <a class="nav-link" href="#" @click.prevent="goToPage('admin-users')" active-class="active">
<i class="bi bi-people"></i> Users
</a>
<a class="nav-link" href="#" @click.prevent="goToPage('admin-settings')" active-class="active">
<i class="bi bi-bar-chart"></i> Analytics
</a>
</nav>
</div>
</template> </template>
<script> <script>
@ -17,3 +24,21 @@ 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>

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

@ -1,16 +1,23 @@
<template> <template>
<div class="layout">
<Sidebar />
<div class="content"> <div class="dashboard-page">
<div class="row">
<div class="col-3">
<Sidebar />
</div>
<div class="col-9">
<router-view /> <router-view />
</div> </div>
</div> </div>
</template> </div>
<script> </template>
import Sidebar from './SideNavAdmin.vue';
export default { <script>
components: { Sidebar } import Sidebar from './SideNavAdmin.vue';
}
</script> export default {
components: { Sidebar }
}
</script>