🍞 Improved path breadcrumb (#62)

.github/workflows/publish-frontend.yml

@@ -22,7 +22,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [16.x]
 
     steps:
       - uses: actions/checkout@v2

tdrive/frontend/src/app/views/client/body/drive/header-path.tsx

@@ -1,4 +1,3 @@
-import { Button } from '@atoms/button/button';
 import { Title } from '@atoms/text';
 import { DriveItem } from '@features/drive/types';
 import { ChevronDownIcon } from '@heroicons/react/solid';
@@ -33,9 +32,11 @@ export const PathRender = ({
   inTrash: boolean;
   onClick: (id: string) => void;
 }) => {
+  const pathLength = (path || []).reduce((acc, curr) => acc + curr.name.length, 0);
   return (
-    <Title className="overflow-hidden whitespace-nowrap mr-2 pl-px inline-flex">
+    <nav className="overflow-hidden whitespace-nowrap mr-2 pl-px inline-flex">
-      {(path || [])?.map((a, i) => (
+      {pathLength < 70 ? (
+        (path || [])?.map((a, i) => (
           <PathItem
             key={a.id}
             item={a}
@@ -43,8 +44,36 @@ export const PathRender = ({
             last={i + 1 === path?.length}
             onClick={onClick}
           />
-      ))}
+        ))
-    </Title>
+      ) : (
+        <>
+          <PathItem
+            key={path[path.length - 3]?.id}
+            item={{
+              ...path[path?.length - 3],
+              name: '...',
+            }}
+            first={true}
+            last={false}
+            onClick={onClick}
+          />
+          <PathItem
+            key={path[path.length - 2]?.id}
+            item={path[path?.length - 2]}
+            first={false}
+            last={false}
+            onClick={onClick}
+          />
+          <PathItem
+            key={path[path.length - 1]?.id}
+            item={path[path?.length - 1]}
+            first={false}
+            last={true}
+            onClick={onClick}
+          />
+        </>
+      )}
+    </nav>
   );
 };
 
@@ -61,14 +90,10 @@ const PathItem = ({
 }) => {
   const { user } = useCurrentUser();
   return (
-    <Button
+    <div className="flex items-center">
-      theme={last ? 'primary' : 'default'}
+      <a
-      className={
+        href="#"
-        '-ml-px shrink overflow-hidden whitespace-nowrap last:flex-[1_0_auto_!important] first:flex-[0_0_auto] first:flex-shrink-0 ' +
+        className="text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white"
-        (!first ? 'rounded-l-none ' : '') +
-        (!last ? 'rounded-r-none ' : '') +
-        (!first && !last ? 'max-w-[15ch] ' : '')
-      }
         onClick={evt => {
           if (first) {
             MenusManager.openMenu(
@@ -84,17 +109,31 @@ const PathItem = ({
           }
         }}
       >
-      <span className="text-ellipsis overflow-hidden whitespace-nowrap" style={{ maxWidth: 120 }}>
+        <Title>{item?.name || ''}</Title>
-        {item?.name || ''}
+      </a>
-      </span>
       {item?.access_info?.public?.level && item?.access_info?.public?.level !== 'none' && (
         <PublicIcon className="h-5 w-5 ml-2" />
       )}
       {first && (
-        <span className="ml-2 -mr-1">
+        <span className="ml-2 -mr-1 text-gray-700">
           <ChevronDownIcon className="w-4 h-4" />
         </span>
       )}
-    </Button>
+      {!last && (
+        <svg
+          aria-hidden="true"
+          className="w-6 h-6 text-gray-400 mx-1"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fillRule="evenodd"
+            d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+            clipRule="evenodd"
+          ></path>
+        </svg>
+      )}
+    </div>
   );
 };