Adding history icons

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/common/history-store.ts

@@ -42,22 +42,24 @@ export class HistoryStore extends BaseStore<HistoryModel> {
         `The current URL is ${navigation.location.pathname}${navigation.location.search}${navigation.location.hash}`
       );
       console.log(`The last navigation action was ${navigation.action}`);
+      console.log(`Current activeStep ${this.activeStep}`);
+      console.log(`Nav length ${navigation.length}`);
 
       if (!this.backOrForwardChange()) {
-        this.activeStep++;
+        ++this.activeStep;
       }
     });
   }
 
   @action
   goBack() {
-    this.activeStep--;
+    --this.activeStep;
     navigation.goBack();
   }
 
   @action
   goForward() {
-    this.activeStep++;
+    ++this.activeStep;
     navigation.goForward();
   }
 

src/renderer/components/icon/flat_arrow.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<path d="M21.6,12l-5.9-5.9v4.8H2.4v2.2h13.2v4.8L21.6,12z"/>
+</svg>

src/renderer/components/layout/topbar.module.css

@@ -30,11 +30,13 @@
   grid-area: topbar;
 }
 
-.title {
-  @apply font-bold px-6;
-  color: var(--textColorAccent);
-  align-items: center;
-  display: flex;
+.history {
+  @apply flex items-center;
+}
+
+.prevArrow {
+  @apply ml-5;
+  transform: rotate(180deg);
 }
 
 .controls {

src/renderer/components/layout/topbar.tsx

@@ -23,6 +23,8 @@ import styles from "./topbar.module.css";
 import React from "react";
 import { observer } from "mobx-react";
 import { TopBarRegistry } from "../../../extensions/registries";
+import { Icon } from "../icon";
+import { HistoryStore } from "../../../common/history-store";
 
 interface Props extends React.HTMLAttributes<any> {
   label: React.ReactNode;
@@ -53,9 +55,20 @@ export const TopBar = observer(({ label, children, ...rest }: Props) => {
     );
   };
 
+  const goBack = () => {
+    HistoryStore.getInstance().goBack();
+  };
+
+  const goForward = () => {
+    HistoryStore.getInstance().goForward();
+  };
+
   return (
     <div className={styles.topBar} {...rest}>
-      <div className={styles.title} data-testid="topbarLabel">{label}</div>
+      <div className={styles.history}>
+        <Icon svg="flat_arrow" className={styles.prevArrow} onClick={goBack} disabled={!HistoryStore.getInstance().isPreviousExist()}/>
+        <Icon svg="flat_arrow" className="ml-5" onClick={goForward} disabled={!HistoryStore.getInstance().isForwardExist()}/>
+      </div>
       <div className={styles.controls}>
         {renderRegisteredItems()}
         {children}