From 0b87e390610d23e83e81e89b2d83a3135b876603 Mon Sep 17 00:00:00 2001
From: Ahmed Raed <ahmedraed101@yahoo.com>
Date: Mon, 28 Oct 2024 21:14:54 +0300
Subject: [PATCH] Added NavBar visited pages

---
 .../black-dashboard/bootstrap/_images.scss    |  2 +-
 .../bootstrap/mixins/_grid-framework.scss     |  4 +-
 src/layout/dashboard/DashboardLayout.vue      |  1 -
 src/layout/dashboard/TopNavbar.vue            | 52 ++++++++++++++++++-
 src/layout/dashboard/navbarStore.js           | 15 ++++++
 5 files changed, 69 insertions(+), 5 deletions(-)
 create mode 100644 src/layout/dashboard/navbarStore.js

diff --git a/src/assets/sass/black-dashboard/bootstrap/_images.scss b/src/assets/sass/black-dashboard/bootstrap/_images.scss
index 7b2a2d36..abb01bf8 100644
--- a/src/assets/sass/black-dashboard/bootstrap/_images.scss
+++ b/src/assets/sass/black-dashboard/bootstrap/_images.scss
@@ -31,7 +31,7 @@
 }
 
 .figure-img {
-  margin-bottom: ($spacer / 2);
+  margin-bottom: calc($spacer / 2);
   line-height: 1;
 }
 
diff --git a/src/assets/sass/black-dashboard/bootstrap/mixins/_grid-framework.scss b/src/assets/sass/black-dashboard/bootstrap/mixins/_grid-framework.scss
index 467a36ed..68e78ba6 100644
--- a/src/assets/sass/black-dashboard/bootstrap/mixins/_grid-framework.scss
+++ b/src/assets/sass/black-dashboard/bootstrap/mixins/_grid-framework.scss
@@ -13,8 +13,8 @@
     position: relative;
     width: 100%;
     min-height: 1px; // Prevent columns from collapsing when empty
-    padding-right: ($gutter / 2);
-    padding-left: ($gutter / 2);
+    padding-right: calc($gutter / 2);
+    padding-left: calc($gutter / 2);
   }
 
   @each $breakpoint in map-keys($breakpoints) {
diff --git a/src/layout/dashboard/DashboardLayout.vue b/src/layout/dashboard/DashboardLayout.vue
index d6b059ee..ae79456b 100644
--- a/src/layout/dashboard/DashboardLayout.vue
+++ b/src/layout/dashboard/DashboardLayout.vue
@@ -58,7 +58,6 @@
 import TopNavbar from "./TopNavbar.vue";
 import ContentFooter from "./ContentFooter.vue";
 import DashboardContent from "./Content.vue";
-import MobileMenu from "./MobileMenu";
 export default {
   components: {
     TopNavbar,
diff --git a/src/layout/dashboard/TopNavbar.vue b/src/layout/dashboard/TopNavbar.vue
index bdea4bc9..4e7effa4 100644
--- a/src/layout/dashboard/TopNavbar.vue
+++ b/src/layout/dashboard/TopNavbar.vue
@@ -36,6 +36,16 @@
         <span class="navbar-toggler-bar navbar-kebab"></span>
       </button>
 
+      <!-- Navbar Visited Pages -->
+       <!-- Start -->
+      <div class="collapse navbar-collapse justify-content-center">
+        <div v-for="(item , index) in links" :key="index" class="route-button">
+          <div @click="() => $route.name !== item.name && $router.push({ name: item.name })">{{ item.name }}</div>
+          <img width="16" height="16" src="https://img.icons8.com/material-outlined/24/ffffff/delete-sign.png" alt="delete-sign" @click="removeRoute(item.name)"/>
+        </div>
+      </div>
+      <!-- End -->
+
       <collapse-transition>
         <div class="collapse navbar-collapse show" v-show="showMenu">
           <ul class="navbar-nav" :class="$rtl.isRTL ? 'mr-auto' : 'ml-auto'">
@@ -152,6 +162,8 @@
 <script>
 import { CollapseTransition } from "vue2-transitions";
 import Modal from "@/components/Modal";
+import navbarStore from "./navbarStore";
+import { useRoute } from "vue-router/composables";
 
 export default {
   components: {
@@ -173,6 +185,7 @@ export default {
       showMenu: false,
       searchModalVisible: false,
       searchQuery: "",
+      links : navbarStore.navbarAddedLinks
     };
   },
   methods: {
@@ -194,7 +207,44 @@ export default {
     toggleMenu() {
       this.showMenu = !this.showMenu;
     },
+    addRoute(route) {
+      if (!this.links.some(link => link.name === route.name)) navbarStore.addLink(route);
+    },
+    removeRoute(name) {
+      if (this.links.some(link => link.name === name)){
+        navbarStore.removeLink(name);
+        this.links = this.links.filter(link => link.name !== name)
+      };
+    }
   },
+  mounted() {
+    const route = {
+      name: useRoute().name,
+      path: useRoute().path,
+    }
+    this.addRoute(route);
+  }
 };
 </script>
-<style></style>
+<style lang="scss" scoped>
+.route-button {
+  cursor: pointer;
+  margin-left: 5px;
+  transition: 0.3s;
+  color: white;
+  border: 1px solid white;
+  padding: 5px 5px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 5px;
+  &:hover {
+    transform: scale(1.1);
+  }
+  > img {
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/layout/dashboard/navbarStore.js b/src/layout/dashboard/navbarStore.js
new file mode 100644
index 00000000..a1cfb601
--- /dev/null
+++ b/src/layout/dashboard/navbarStore.js
@@ -0,0 +1,15 @@
+const navbarStore = {
+  navbarAddedLinks: [],
+
+  addLink(link) {
+    this.navbarAddedLinks.push(link);
+  },
+
+  removeLink(name) {
+    this.navbarAddedLinks = this.navbarAddedLinks.filter(
+      (item) => item.name !== name
+    );
+  },
+};
+
+export default navbarStore;