feat: file path redesign for mobile

src/api/directory.ts

@@ -13,7 +13,10 @@ export async function createDirectory(
     directory = '';
   }
 
-  await fdp.directory.create(podName, combine(directory, directoryName));
+  await fdp.directory.create(
+    podName,
+    combine(...directory.split('/'), directoryName)
+  );
   const time = getUnixTimestamp();
   return {
     name: directoryName,

src/components/DirectoryPath/DirectoryPath.tsx

@@ -9,6 +9,7 @@ interface DirectoryPathProps {
   directory: string;
   onDirectorySelect: (newDirectory: string) => void;
   onBackToDrive: () => void;
+  className?: string;
 }
 
 const MAX_FOLDERS = 3;
@@ -21,6 +22,7 @@ const DirectoryPath = ({
   directory,
   onDirectorySelect,
   onBackToDrive,
+  className,
 }: DirectoryPathProps) => {
   const { theme } = useContext(ThemeContext);
   const [folders, displayedFolders] = useMemo(() => {
@@ -35,7 +37,7 @@ const DirectoryPath = ({
   };
 
   return (
-    <div className="md:ml-0 ml-2 flex items-center">
+    <div className={`flex items-center overflow-hidden ${className}`}>
       {podName && (
         <Button
           variant="tertiary"

src/components/Dropdowns/PodDropdown/PodDropdownToggle.tsx

@@ -39,7 +39,7 @@ const PodDropdownToggele = () => {
         />
       )}
       <Menu.Button className="flex items-center w-full cursor-pointer">
-        <div className="py-2 px-4 ">
+        <div className="py-2 px-4 hidden sm:block">
           {theme === 'light' ? (
             <DropdownMenuIconLight />
           ) : (

src/components/NavigationBars/DriveActionBar/DriveActionHeaderMobile.tsx

@@ -1,7 +1,31 @@
+import DirectoryPath from '@components/DirectoryPath/DirectoryPath';
 import PodDropdown from '@components/Dropdowns/PodDropdown/PodDropdown';
 
-const DriveActionHeaderMobile = () => {
-  return <PodDropdown />;
+interface DriveActionHeaderMobileProps {
+  podName: string;
+  directory: string;
+  onDirectorySelect: (newDirectory: string) => void;
+  onBackToDrive: () => void;
+}
+
+const DriveActionHeaderMobile = ({
+  podName,
+  directory,
+  onDirectorySelect,
+  onBackToDrive,
+}: DriveActionHeaderMobileProps) => {
+  return (
+    <>
+      <PodDropdown />
+      <DirectoryPath
+        className="flex sm:hidden"
+        podName={podName}
+        directory={directory}
+        onDirectorySelect={onDirectorySelect}
+        onBackToDrive={onBackToDrive}
+      />
+    </>
+  );
 };
 
 export default DriveActionHeaderMobile;

src/pages/drive/index.tsx

@@ -24,7 +24,6 @@ import SearchResultsDarkIcon from '@media/UI/search-results-dark.svg';
 import Spinner from '@components/Spinner/Spinner';
 import DriveActionHeaderMobile from '@components/NavigationBars/DriveActionBar/DriveActionHeaderMobile';
 import { DirectoryItem, FileItem } from '@fairdatasociety/fdp-storage';
-import SelectPodCard from '@components/Cards/SelectPodCard/SelectPodCard';
 import {
   CacheType,
   getCache,
@@ -227,12 +226,18 @@ const Drive: FC = () => {
   return (
     <MainLayout updateDrive={handleUpdateDrive} refreshPods={handleFetchPods}>
       <div className="flex flex-col">
-        <div className="block md:hidden">
-          <DriveActionHeaderMobile />
+        <div className="flex md:hidden">
+          <DriveActionHeaderMobile
+            podName={activePod}
+            directory={directoryName}
+            onDirectorySelect={handleDirectoryPathChange}
+            onBackToDrive={onBackToDrive}
+          />
         </div>
         <MainHeader
           title={
             <DirectoryPath
+              className="hidden sm:flex"
               podName={activePod}
               directory={directoryName}
               onDirectorySelect={handleDirectoryPathChange}