Make directory path in the header editable (#8018)

This change will allow users to navigate to their desired locations,
including buckets and directories that haven't been "created" yet

Fixes #7883

Add tests

Change tooltip wording

Migrate to Font Awesome 5 to use path icon

Fix sidebar not closing on mobile

browser/app/js/browser/SideBar.js

@@ -20,7 +20,6 @@ import ClickOutHandler from "react-onclickout"
 import { connect } from "react-redux"
 
 import logo from "../../img/logo.svg"
-import Dropdown from "react-bootstrap/lib/Dropdown"
 import BucketSearch from "../buckets/BucketSearch"
 import BucketList from "../buckets/BucketList"
 import Host from "./Host"
@@ -28,8 +27,14 @@ import * as actionsCommon from "./actions"
 import web from "../web"
 
 export const SideBar = ({ sidebarOpen, clickOutside }) => {
+  const onClickOut = e => {
+    if (e.target.classList.contains("feh-trigger")) {
+      return
+    }
+    clickOutside()
+  }
   return (
-    <ClickOutHandler onClickOut={clickOutside}>
+    <ClickOutHandler onClickOut={onClickOut}>
       <div
         className={classNames({
           "fe-sidebar": true,
@@ -62,4 +67,7 @@ const mapDispatchToProps = dispatch => {
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(SideBar)
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(SideBar)