sideBar dashboard admin

src/App.vue

@@ -1,18 +1,5 @@
 <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";
 </script>
 

src/router/index.js

@@ -170,6 +170,21 @@ const router = createRouter({
           path: '/admin/dashboard',
           component: AdminDashboardView,
           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",
@@ -181,16 +196,7 @@ const router = createRouter({
           name: "user-login",
           component: UserLoginView,
         },
-        {
+
-          path: '/admin/users',
-          component: AdminUsersView,
-          name: "admin-users",
-        },  
-        {
-          path: '/admin/settings',
-          component: AdminSettingsView,
-          name: "admin-settings",
-        },
        
       ],
     });

src/views/Admin/SideNavAdmin.vue

@@ -1,11 +1,18 @@
 <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>
 
 <script>
@@ -17,3 +24,21 @@ export default {
   }
 }
 </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>

src/views/Admin/dashboard.vue

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