ui: fix navbar menu icon overlap with page header back arrow

Author: jamaljsr

app/src/components/common/PageHeader.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { usePrefixedTranslation } from 'hooks';
+import { useStore } from 'store';
 import { styled } from 'components/theme';
 import { ArrowLeft, Clock, Download } from './icons';
 import { HeaderThree } from './text';
@@ -11,9 +12,10 @@ const Styled = {
     display: flex;
     justify-content: space-between;
   `,
-  Left: styled.span`
+  Left: styled.span<{ sidebar?: boolean }>`
     flex: 1;
     text-align: left;
+    padding-left: ${props => (props.sidebar ? '0' : '40px')};
   `,
   Center: styled.span`
     flex: 1;
@@ -55,11 +57,12 @@ const PageHeader: React.FC<Props> = ({
   onExportClick,
 }) => {
   const { l } = usePrefixedTranslation('cmps.common.PageHeader');
+  const { settingsStore } = useStore();
 
   const { Wrapper, Left, Center, Right, BackLink } = Styled;
   return (
     <Wrapper>
-      <Left>
+      <Left sidebar={settingsStore.sidebarVisible}>
         {onBackClick && (
           <BackLink onClick={onBackClick}>
             <ArrowLeft />