Adds a clickable bar at the top that shows current full folder path

src/App.tsx

@@ -16,6 +16,7 @@ import {
   updateDirectoryContents
 } from "./state/slices/currentDirectorySlice";
 import {DIRECTORY_ENTITY_ID} from "./components/MainBody/DirectoryEntity";
+import FilePathBar from "./components/TopBar/FilePathBar";
 
 function App() {
   const [volumes, setVolumes] = useState<Volume[]>([]);
@@ -104,22 +105,28 @@ function App() {
     }} onContextMenu={handleMainContextMenu}>
       <ContextMenus />
 
-      <div className="p-4">
+      <div className="flex p-4 h-20">
         <FolderNavigation
             onBackArrowClick={onBackArrowClick}
             canGoBackward={canGoBackward()}
             onForwardArrowClick={onForwardArrowClick}
             canGoForward={canGoForward()}
         />
 
-        <div className="pb-5">
-          <SearchBar
-              currentVolume={currentVolume}
-              currentDirectoryPath={pathHistory[historyPlace]}
-              setSearchResults={setSearchResults}
-          />
+        <FilePathBar
+          currentDirectoryPath={pathHistory[historyPlace]}
+          onDirectoryClick={onDirectoryClick}
+        />
+
+        <SearchBar
+            currentVolume={currentVolume}
+            currentDirectoryPath={pathHistory[historyPlace]}
+            setSearchResults={setSearchResults}
+        />
+      </div>
 
-          <div className="w-7/12">
+
+      <div className="pl-4 w-7/12">
             {pathHistory[historyPlace] === "" && searchResults.length === 0 ? (
                 <VolumeList volumes={volumes} onClick={onVolumeClick} />
             ) : (
@@ -131,11 +138,8 @@ function App() {
                 />
             )}
           </div>
-        </div>
-
-      </div>
     </div>
   );
 }
 
-export default App;
+export default App;

src/components/TopBar/FilePathBar.tsx

@@ -0,0 +1,51 @@
+import { faHome, faPlay, faPlayCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+interface Props {
+    currentDirectoryPath: string;
+    onDirectoryClick: Function;
+}
+
+export default function FilePathBar({
+    currentDirectoryPath,
+    onDirectoryClick,
+}:Props){
+    async function onBarSectionClick(clickedDirectory:string){
+        if (clickedDirectory === '') {
+            onDirectoryClick(clickedDirectory);
+        }
+
+        const clickedSubstringStartIndex = currentDirectoryPath.indexOf(clickedDirectory);
+        const fullDirectoryEndIndex = clickedSubstringStartIndex + clickedDirectory.length;
+
+        const clickedDirectoryFullPath = currentDirectoryPath.slice(0, fullDirectoryEndIndex);
+        onDirectoryClick(clickedDirectoryFullPath);
+    }
+
+    return (
+        <div className="flex mr-2 p-1 h-10 flex-grow rounded-md border-2 bg-gray-900">
+            <button className="pl-1 pr-2 hover:bg-bright" onClick={()=>{onBarSectionClick("")}}>
+                <FontAwesomeIcon
+                    icon={faHome}
+                />
+            </button>
+            {
+            currentDirectoryPath.split("\\").map((subString)=>{
+                if (subString === "") return;
+
+                return (
+                    <div className="flex">
+                        <div className="p-0.5 px-1.5">
+                            <FontAwesomeIcon
+                                icon={faPlay}
+                            />
+                        </div>
+                        <button className="hover:bg-bright" onClick={()=>{onBarSectionClick(subString)}}>
+                            {subString}
+                        </button>
+                    </div>
+                )
+            })}
+        </div>
+    );
+}

src/components/TopBar/FolderNavigation.tsx

@@ -9,7 +9,7 @@ export interface Props {
 }
 
 export default function FolderNavigation({ onBackArrowClick, canGoBackward, onForwardArrowClick, canGoForward }: Props) {
-    return <div className="mb-5 w-full">
+    return <div className="mb-auto m-1 p-1 mr-2">
         <div className="space-x-4">
             <button onClick={onBackArrowClick} disabled={!canGoBackward}>
                 <FontAwesomeIcon
@@ -18,10 +18,9 @@ export default function FolderNavigation({ onBackArrowClick, canGoBackward, onFo
                     className={canGoBackward ? undefined : "text-gray-600"}
                 />
             </button>
-
             <button onClick={onForwardArrowClick} disabled={!canGoForward}>
                 <FontAwesomeIcon icon={faArrowRight} size="xl" className={canGoForward ? undefined : "text-gray-600"}/>
             </button>
         </div>
     </div>;
-}
+}

src/components/TopBar/SearchBar.tsx

@@ -54,7 +54,7 @@ export default function SearchBar({
   }
 
   return (
-    <div className="absolute right-4 top-4">
+    <div className="mt-auto">
       <Input
         value={searchValue}
         setValue={setSearchValue}
@@ -66,4 +66,4 @@ export default function SearchBar({
       <SearchFilter filters={searchFilter} setFilters={setSearchFilter} />
     </div>
   );
-}
+}