asidebar

src/views/Admin/SideNavAdmin.vue

@@ -1,18 +1,35 @@
 <template>
 
-  <div class="aside-menu">
-    <nav class="nav flex-column">
-      <a class="nav-link" href="#" @click.prevent="goToPage('el-badges')" active-class="active">
-        <i class="bi bi-speedometer2"></i> Dashboard
+
+ <div id="sidebar">
+  
+    <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 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 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>
-    </nav>
+        
+      </li>
+     
+    </ul>
   </div>
+
+
+
+
 </template>
 
 <script>
@@ -25,20 +42,3 @@ 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,13 +1,15 @@
 <template>
+  <div id="viewport">
+    <Sidebar />
+    <div id="content">
+      <router-view />
 
-
-  <div class="dashboard-page">
-    <div class="row">
-      <div class="col-3">
-        <Sidebar />
-      </div>
-      <div class="col-9">
-        <router-view />
+      <div class="container-fluid">
+        <h1>Simple Sidebar</h1>
+        <p>
+          Make sure to keep all page content within the
+          <code>#content</code>.
+        </p>
       </div>
     </div>
   </div>
@@ -20,4 +22,76 @@ import Sidebar from './SideNavAdmin.vue';
 export default {
   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>