Add collapsed breadcrumbs demo

mui · Aug 3, 2022 · 5a78143 · 5a78143
1 parent 6800673
commit 5a78143
Show file tree

Hide file tree

Showing 3 changed files with 187 additions and 1 deletion.
diff --git a/docs/data/joy/components/breadcrumbs/CollapsedBreadcrumbs.js b/docs/data/joy/components/breadcrumbs/CollapsedBreadcrumbs.js
@@ -0,0 +1,93 @@
+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 Sheet from '@mui/joy/Sheet';
+import Typography from '@mui/joy/Typography';
+import * as React from 'react';
+
+export default function CollapsedBreadcrumbs() {
+  const [collapsed1, setCollapsed1] = React.useState(true);
+  const [collapsed2, setCollapsed2] = React.useState(true);
+
+  return (
+    <div
+      style={{
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <Sheet variant="plain" color="neutral">
+        <Breadcrumbs separator="›">
+          {collapsed1 ? (
+            <Button
+              size="sm"
+              onClick={() => setCollapsed1(false)}
+              variant="plain"
+              color="neutral"
+            >
+              •••
+            </Button>
+          ) : (
+            <React.Fragment>
+              {['Home', 'Desktop'].map((item) => (
+                <Link underline="hover" color="neutral" href="/" fontSize="inherit">
+                  <FolderIcon sx={{ mr: 0.5 }} fontSize="inherit" />
+                  {item}
+                </Link>
+              ))}
+            </React.Fragment>
+          )}
+
+          {['Program Files', 'Common Files', 'Services'].map((item) => (
+            <Link underline="hover" color="neutral" href="/" fontSize="inherit">
+              <FolderIcon sx={{ mr: 0.5 }} fontSize="inherit" />
+              {item}
+            </Link>
+          ))}
+
+          <Typography fontSize="inherit">
+            <FolderIcon sx={{ mr: 0.5, mt: 0.5 }} fontSize="inherit" />
+            bablo.txt
+          </Typography>
+        </Breadcrumbs>
+      </Sheet>
+      <Sheet variant="plain" color="primary">
+        <Breadcrumbs separator="›">
+          {collapsed2 ? (
+            <Button
+              size="sm"
+              onClick={() => setCollapsed2(false)}
+              variant="plain"
+              color="neutral"
+            >
+              •••
+            </Button>
+          ) : (
+            <React.Fragment>
+              {['Project', 'Main'].map((item) => (
+                <Link underline="hover" color="neutral" href="/" fontSize="inherit">
+                  <FolderIcon sx={{ mr: 0.5 }} fontSize="inherit" />
+                  {item}
+                </Link>
+              ))}
+            </React.Fragment>
+          )}
+
+          {['UX', 'Services', 'Mixed'].map((item) => (
+            <Link underline="hover" color="neutral" href="/" fontSize="inherit">
+              <FolderIcon sx={{ mr: 0.5 }} fontSize="inherit" />
+              {item}
+            </Link>
+          ))}
+
+          <Typography fontSize="inherit" alignItems="center" flexDirection="row">
+            <FolderIcon sx={{ mr: 0.5 }} fontSize="inherit" />
+            design.figma
+          </Typography>
+        </Breadcrumbs>
+      </Sheet>
+    </div>
+  );
+}
diff --git a/docs/data/joy/components/breadcrumbs/CollapsedBreadcrumbs.tsx b/docs/data/joy/components/breadcrumbs/CollapsedBreadcrumbs.tsx
@@ -0,0 +1,89 @@
+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 Sheet from '@mui/joy/Sheet';
+import Typography from '@mui/joy/Typography';
+import * as React from 'react';
+
+export default function CollapsedBreadcrumbs() {
+  const [collapsed1, setCollapsed1] = React.useState(true);
+  const [collapsed2, setCollapsed2] = React.useState(true);
+
+  return (
+    <div
+      style={{
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <Sheet variant="plain" color="neutral">
+        <Breadcrumbs separator="›">
+          {collapsed1 ? (
+            <Button
+              size="sm"
+              onClick={() => setCollapsed1(false)}
+              variant="plain"
+              color="neutral"
+            >
+              •••
+            </Button>
+          ) : (
+            <React.Fragment>
+              {['Home', 'Desktop'].map((item) => (
+                <Link underline="hover" color="neutral" href="/" fontSize="inherit">
+                  <FolderIcon sx={{ mr: 0.5 }} fontSize="inherit" />
+                  {item}
+                </Link>
+              ))}
+            </React.Fragment>
+          )}
+          {['Program Files', 'Common Files', 'Services'].map((item) => (
+            <Link underline="hover" color="neutral" href="/" fontSize="inherit">
+              <FolderIcon sx={{ mr: 0.5 }} fontSize="inherit" />
+              {item}
+            </Link>
+          ))}
+          <Typography fontSize="inherit">
+            <FolderIcon sx={{ mr: 0.5, mt: 0.5 }} fontSize="inherit" />
+            bablo.txt
+          </Typography>
+        </Breadcrumbs>
+      </Sheet>
+      <Sheet variant="plain" color="primary">
+        <Breadcrumbs separator="›">
+          {collapsed2 ? (
+            <Button
+              size="sm"
+              onClick={() => setCollapsed2(false)}
+              variant="plain"
+              color="neutral"
+            >
+              •••
+            </Button>
+          ) : (
+            <React.Fragment>
+              {['Project', 'Main'].map((item) => (
+                <Link underline="hover" color="neutral" href="/" fontSize="inherit">
+                  <FolderIcon sx={{ mr: 0.5 }} fontSize="inherit" />
+                  {item}
+                </Link>
+              ))}
+            </React.Fragment>
+          )}
+          {['UX', 'Services', 'Mixed'].map((item) => (
+            <Link underline="hover" color="neutral" href="/" fontSize="inherit">
+              <FolderIcon sx={{ mr: 0.5 }} fontSize="inherit" />
+              {item}
+            </Link>
+          ))}
+          <Typography fontSize="inherit" alignItems="center" flexDirection="row">
+            <FolderIcon sx={{ mr: 0.5 }} fontSize="inherit" />
+            design.figma
+          </Typography>
+        </Breadcrumbs>
+      </Sheet>
+    </div>
+  );
+}
diff --git a/docs/data/joy/components/breadcrumbs/breadcrumbs.md b/docs/data/joy/components/breadcrumbs/breadcrumbs.md
@@ -32,4 +32,8 @@ export default function MyApp() {
 `Breadcrumbs` is a navigation component that should be used with other components.
 The most common components you'd use with it are `Typography` and `Link`.
 
-{{"demo": "BasicBreadcrumbs.js"}}
+{{"demo": "BasicBreadcrumbs.js",  "hideToolbar": false}}
+
+### Collapsed Breadcrumbs
+
+{{"demo": "CollapsedBreadcrumbs.js",  "hideToolbar": false}}