add back button for PWA (#48)

Author: yulia-dnistrian

src/AppHeader.scss

@@ -85,4 +85,11 @@
       margin-right: 10px;
     }
   }
+
+  @media all and (display-mode: standalone) {
+    &__logo {
+      padding-left: 72px;
+      padding-right: 10px;
+    }
+  }
 }

src/Navigation.scss

@@ -78,6 +78,10 @@
     }
   }
 
+  &__backbtn {
+    display: none;
+  }
+
   @media(max-width: $tabletWidth) {
     background-color: $mainBackgroundColor;
     text-align: center;
@@ -230,3 +234,22 @@
     position: absolute;
   }
 }
+
+@media all and (display-mode: standalone) {
+  .toggle-btn {
+    left: 36px;
+  }
+
+  .navigation__backbtn {
+    display: inline-block;
+    position: absolute;
+    top: 14px;
+    left: 0;
+  }
+
+  .navigation__backicon {
+    height: 32px;
+    width: 32px;
+    fill: $mainColor;
+  }
+}

src/Navigation.tsx

@@ -10,6 +10,7 @@ import './Navigation.scss';
 import { NavMenu } from './NavMenu';
 import { ReactComponent as MenuIcon } from './images/icons/ic_menu.svg';
 import { ReactComponent as CloseIcon } from './images/icons/ic_close.svg';
+import { ReactComponent as ArrowIcon } from './images/icons/arrow_left.svg';
 
 export const Navigation: React.FC = () => {
   const { t } = useTranslation();
@@ -51,6 +52,10 @@ export const Navigation: React.FC = () => {
     setIsOpen(false);
   });
 
+  const handleGoBack = () => {
+    window.history.back();
+  };
+
   function renderTopCategories(categories: Category[]): React.ReactElement {
     const topCategories = [
       { name: 'home', displayName: t('home'), url: '/' },
@@ -96,6 +101,11 @@ export const Navigation: React.FC = () => {
 
   return (
     <>
+      {window.matchMedia('(display-mode: standalone)').matches && (
+        <button className="navigation__backbtn" aria-label="back button" type="button" onClick={handleGoBack}>
+          <ArrowIcon className="navigation__backicon" />
+        </button>
+      )}
       <button
         className="toggle-btn"
         type="button"