feat(modal): new navigation with back and forth arrow

src/components/Elements/MainModal/scss/modules/_topBar.scss

@@ -11,11 +11,94 @@
     display: flex;
     align-items: center;
     flex-shrink: 0;
+    gap: 1rem;
+
+    .navigationButtons {
+      display: flex;
+      gap: 0.25rem;
+
+      .navButton {
+        display: grid;
+        place-items: center;
+        padding: 0.5rem;
+        border-radius: 8px;
+        cursor: pointer;
+        border: none;
+        background: none;
+        transition: 0.3s;
+
+        @include themed {
+          color: t($color);
+        }
+
+        svg {
+          font-size: 1.2rem;
+        }
+
+        &:hover:not(:disabled) {
+          @include themed {
+            background: t($modal-sidebarActive);
+          }
+        }
+
+        &:disabled {
+          opacity: 0.3;
+          cursor: not-allowed;
+        }
+      }
+    }
 
     .topBarLogo {
       height: 32px;
       width: auto;
     }
+
+    .breadcrumbs {
+      display: flex;
+      align-items: center;
+      gap: 0;
+      font-size: 0.95rem;
+      font-weight: 500;
+
+      .breadcrumb-segment {
+        display: flex;
+        align-items: center;
+        // gap: 0.5rem;
+      }
+
+      .breadcrumb-item {
+        @include themed {
+          color: t($subColor);
+        }
+        white-space: nowrap;
+        transition: opacity 0.2s;
+      }
+
+      .breadcrumb-clickable {
+        cursor: pointer;
+
+        &:hover {
+          opacity: 0.7;
+          text-decoration: underline;
+        }
+      }
+
+      .breadcrumb-separator {
+        @include themed {
+          color: t($subColor);
+        }
+        opacity: 0.5;
+        font-size: 1.2rem;
+        margin: 0 0.25rem;
+      }
+
+      .breadcrumb-current {
+        @include themed {
+          color: t($color);
+        }
+        font-weight: 600;
+      }
+    }
   }
 
   .topBarRight {