add file browser navigation button

src/App.js

@@ -246,6 +246,11 @@ class App extends Component {
     if (browserFs === null) browserFs = ["", ""]
     if (currentPath === null) currentPath = ["/", "/"]
 
+    if (name) {
+      browserFs[0] = name
+      currentPath[0] = name
+    }
+
     sessionStorage.setItem("browserFs", JSON.stringify(browserFs))
     sessionStorage.setItem("currentPath", JSON.stringify(currentPath))
 
@@ -288,8 +293,8 @@ class App extends Component {
         data-for={"size"+v.MountPoint}
         onClick={() => this.openBrowser(v.name)}
       >
-        <p> {v.name} </p>
-        <p> {v.type} </p>
+        <p>{v.name}</p>
+        <p>{v.type}</p>
         {/* add EDIT button */}
         <ReactTooltip id={"size"+v.MountPoint} place="left" type="info" effect="solid" globalEventOff="click" />
       </InfosRow>
@@ -368,7 +373,7 @@ class App extends Component {
           </StatusContainer>
         </HeaderContainer>
 
-        <Navigation info={{ errors, lastError }} />
+        <Navigation info={{ errors, lastError }} openBrowser={this.openBrowser} />
 
         <Container>
           <ItemsContainer>

src/components/navigation.jsx

@@ -1,19 +1,33 @@
 import styled from 'styled-components'
-import { Container } from '../styled'
+import { Button as normalButton, Container } from '../styled'
 
 import Error from './error'
+import BrowserSingle from '../assets/icons/browserSingle.svg'
 
 const NavigationContainer = styled(Container)`
+  gap: 0 .5rem;
+
   @media only screen and (max-width: 800px) {
     justify-content: center;
   }
 `
+
+const Button = styled(normalButton)`
+  display: flex;
+  align-items: center;
+  gap: 0 .3rem;
+`
+
 const Navigation = ({ info }) => {
   const { errors, lastError } = info
 
   return (
     <NavigationContainer>
       <Error errorCount={errors} lastError={lastError} />
+      <Button>
+        <img src={BrowserSingle} alt="file browser" width="18" height="18" />
+        File Browser
+      </Button>
     </NavigationContainer>
   )
 }