🍞 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,18 +32,48 @@ 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 ? (
-        <PathItem
+        (path || [])?.map((a, i) => (
-          key={a.id}
+          <PathItem
-          item={a}
+            key={a.id}
-          first={i === 0}
+            item={a}
-          last={i + 1 === path?.length}
+            first={i === 0}
-          onClick={onClick}
+            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,40 +90,50 @@ 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 ' : '') +
+        onClick={evt => {
-        (!last ? 'rounded-r-none ' : '') +
+          if (first) {
-        (!first && !last ? 'max-w-[15ch] ' : '')
+            MenusManager.openMenu(
-      }
+              [
-      onClick={evt => {
+                { type: 'menu', text: 'Home', onClick: () => onClick('root') },
-        if (first) {
+                { type: 'menu', text: 'My Drive', onClick: () => onClick('user_' + user?.id) },
-          MenusManager.openMenu(
+              ],
-            [
+              { x: evt.clientX, y: evt.clientY },
-              { type: 'menu', text: 'Home', onClick: () => onClick('root') },
+              'center',
-              { type: 'menu', text: 'My Drive', onClick: () => onClick('user_' + user?.id) },
+            );
-            ],
+          } else {
-            { x: evt.clientX, y: evt.clientY },
+            onClick(item?.id || '');
-            'center',
+          }
-          );
+        }}
-        } else {
+      >
-          onClick(item?.id || '');
+        <Title>{item?.name || ''}</Title>
-        }
+      </a>
-      }}
-    >
-      <span className="text-ellipsis overflow-hidden whitespace-nowrap" style={{ maxWidth: 120 }}>
-        {item?.name || ''}
-      </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>
   );
 };