frontend: user

user profile page created, and linked from sidebar, navbar
rkshaon · Jul 23, 2024 · 2827ccb · 2827ccb
1 parent 5f1a31e
commit 2827ccb
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 26 deletions.
diff --git a/frontend/src/components/admin/layout/AdminHeaderLayout.vue b/frontend/src/components/admin/layout/AdminHeaderLayout.vue
@@ -1,29 +1,29 @@
 <template>
-    <header class="header" style="height: 100px;">
-            <div class="container d-flex justify-content-between align-items-center">
-                <div class="input-group me-2 mt-4">
-                <input type="text" class="form-control" placeholder="Search">
-                <button class="btn btn-outline-light" type="button">Search</button>
-              </div>
-              <div class="dropdown mt-4">
-                <button
-                  class="btn btn-outline-light dropdown-toggle"
-                  type="button"
-                  id="dropdownProfile"
-                  data-bs-toggle="dropdown"
-                  aria-expanded="false"
-                >
-                  <img src="@/assets/profile.jpg" height="25">
-                </button>
-                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownProfile">
-                  <li><a class="dropdown-item" href="#">Profile</a></li>
-                  <li><a class="dropdown-item" href="#">Settings</a></li>
-                  <li><hr class="dropdown-divider"></li>
-                  <li><a class="dropdown-item" href="#">Log out</a></li>
-                </ul>
-              </div>
-            </div>
-          </header>
+  <header class="header" style="height: 100px;">
+    <div class="container d-flex justify-content-between align-items-center">
+      <div class="input-group me-2 mt-4">
+        <input type="text" class="form-control" placeholder="Search">
+        <button class="btn btn-outline-light" type="button">Search</button>
+      </div>
+      <div class="dropdown mt-4">
+        <button class="btn btn-outline-light dropdown-toggle" type="button" id="dropdownProfile"
+          data-bs-toggle="dropdown" aria-expanded="false">
+          <img src="@/assets/profile.jpg" height="25">
+        </button>
+        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownProfile">
+          <!-- <li><a class="dropdown-item" href="#">Profile</a></li> -->
+          <router-link :to="{ name: 'admin-profile' }" class="dropdown-item">
+            Profile
+          </router-link>
+          <li><a class="dropdown-item" href="#">Settings</a></li>
+          <li>
+            <hr class="dropdown-divider">
+          </li>
+          <li><a class="dropdown-item" href="#">Log out</a></li>
+        </ul>
+      </div>
+    </div>
+  </header>
 </template>
 
 <script>

diff --git a/frontend/src/components/admin/layout/AdminSidebarLayout.vue b/frontend/src/components/admin/layout/AdminSidebarLayout.vue
@@ -67,7 +67,12 @@
                 <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2">
                     <li><a class="dropdown-item" href="#">New project...</a></li>
                     <li><a class="dropdown-item" href="#">Settings</a></li>
-                    <li><a class="dropdown-item" href="#">Profile</a></li>
+                    <li>
+                        <!-- <a class="dropdown-item" href="#">Profile</a> -->
+                        <router-link :to="{ name: 'admin-profile' }" class="dropdown-item">
+                            Profile
+                        </router-link>
+                    </li>
                     <li>
                         <hr class="dropdown-divider">
                     </li>

diff --git a/frontend/src/components/admin/page/AdminProfilePage.vue b/frontend/src/components/admin/page/AdminProfilePage.vue
@@ -0,0 +1,9 @@
+<template>
+    <div>Profile</div>
+</template>
+
+<script>
+export default {
+    name: 'AdminProfilePage',
+}
+</script>
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
@@ -15,6 +15,7 @@ import AdminInventoryPage from '@/components/admin/page/AdminInventoryPage.vue';
 import AdminAccountingPage from "@/components/admin/page/AdminAccountingPage.vue";
 import AdminOrderPage from "@/components/admin/page/AdminOrderPage.vue";
 import AdminCustomerPage from "@/components/admin/page/AdminCustomerPage.vue";
+import AdminProfilePage from "@/components/admin/page/AdminProfilePage.vue";
 
 
 const routes = [
@@ -44,6 +45,11 @@ const routes = [
     component: AdminBaseComponent,
     meta: { requiresAuth: true }, // Add meta field to indicate that authentication is required for admin routes
     children: [
+      {
+        path: "profile",
+        name: "admin-profile",
+        component: AdminProfilePage,
+      },
       {
         path: "",
         name: "admin",