init project

docs/data/joy/components/breadcrumbs/CondensedBreadcrumbs.tsx

@@ -0,0 +1,43 @@
+import FolderIcon from '@mui/icons-material/Folder';
+import Breadcrumbs from '@mui/joy/Breadcrumbs';
+import Button from '@mui/joy/Button';
+import Link from '@mui/joy/Link';
+import Typography from '@mui/joy/Typography';
+import * as React from 'react';
+
+export default function CondensedBreadcrumbs() {
+  const [condensed, setCondensed] = React.useState<boolean>(true);
+  const [navigationItems, setNavigationItems] = React.useState<string[]>([
+    'Programs',
+    'Files',
+    'Services',
+  ]);
+
+  return (
+    <Breadcrumbs separator="›" aria-label="breadcrumbs">
+      {condensed ? (
+        <Button
+          size="sm"
+          onClick={() => {
+            setNavigationItems((prev) => ['Root', 'Home', ...prev]);
+            setCondensed(false);
+          }}
+          variant="plain"
+          color="primary"
+        >
+          •••
+        </Button>
+      ) : null}
+      {navigationItems.map((item: string) => (
+        <Link key={item} color="primary" href="#condensed-breadcrumbs">
+          <FolderIcon sx={{ mr: 0.5 }} color="inherit" />
+          {item}
+        </Link>
+      ))}
+      <Typography sx={{ display: 'flex', alignItems: 'center' }}>
+        <FolderIcon sx={{ mr: 0.5 }} />
+        bablo.txt
+      </Typography>
+    </Breadcrumbs>
+  );
+}