Closes #211 - 'Breadcrumbs' have been added to all pages

linea-it · Nov 29, 2023 · 8d1fa69 · 8d1fa69
1 parent dc49eb2
commit 8d1fa69
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 6 deletions.
diff --git a/frontend/components/ProductDetail.js b/frontend/components/ProductDetail.js
@@ -18,7 +18,9 @@ import {
   Stack,
   Tab,
   Tabs,
-  Typography
+  Typography,
+  Link,
+  Breadcrumbs
 } from '@mui/material'
 import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
 import Alert from '@mui/material/Alert'
@@ -233,6 +235,12 @@ export default function ProductDetail({ productId, internalName }) {
             Link copied successfully!
           </Alert>
         </Snackbar>
+        <Breadcrumbs aria-label="breadcrumb">
+          <Link color="inherit" href="/">
+            Home
+          </Link>
+          <Typography color="textPrimary">Product</Typography>
+        </Breadcrumbs>
         <Box
           sx={{
             mt: 1,

diff --git a/frontend/pages/about.js b/frontend/pages/about.js
@@ -1,4 +1,12 @@
-import { Container, Grid, Link, Typography, Box, Stack } from '@mui/material'
+import {
+  Container,
+  Grid,
+  Link,
+  Typography,
+  Box,
+  Breadcrumbs,
+  Stack
+} from '@mui/material'
 import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
 import { useRouter } from 'next/router'
 import Card from '@mui/material/Card'
@@ -14,6 +22,12 @@ export default function About() {
     <Container className={classes.root}>
       <Grid container spacing={8}>
         <Grid item xs={12}>
+          <Breadcrumbs aria-label="breadcrumb">
+            <Link color="inherit" href="/">
+              Home
+            </Link>
+            <Typography color="textPrimary">About</Typography>
+          </Breadcrumbs>
           <Box
             sx={{
               mt: 1,

diff --git a/frontend/pages/contact.js b/frontend/pages/contact.js
@@ -1,4 +1,12 @@
-import { Container, Grid, Typography, Link, Box, Stack } from '@mui/material'
+import {
+  Container,
+  Grid,
+  Typography,
+  Link,
+  Box,
+  Stack,
+  Breadcrumbs
+} from '@mui/material'
 import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
 import { useRouter } from 'next/router'
 import useStyles from '../styles/pages/contact'
@@ -14,6 +22,12 @@ export default function Contact() {
     <Container className={classes.root}>
       <Grid container spacing={2}>
         <Grid item xs={12}>
+          <Breadcrumbs aria-label="breadcrumb">
+            <Link color="inherit" href="/">
+              Home
+            </Link>
+            <Typography color="textPrimary">Contact</Typography>
+          </Breadcrumbs>
           <Box
             sx={{
               mt: 1,

diff --git a/frontend/pages/oficial_products.js b/frontend/pages/oficial_products.js
@@ -1,4 +1,13 @@
-import { Box, Button, Card, CardContent, Paper, Stack } from '@mui/material'
+import {
+  Box,
+  Button,
+  Card,
+  CardContent,
+  Paper,
+  Stack,
+  Link,
+  Breadcrumbs
+} from '@mui/material'
 import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
 import FormControl from '@mui/material/FormControl'
 import Grid from '@mui/material/Grid'
@@ -31,6 +40,14 @@ export default function Products() {
     <Paper className={classes.root} elevation={3}>
       <Grid container className={classes.gridTitle}>
         <Grid item xs={4}>
+          <Breadcrumbs aria-label="breadcrumb">
+            <Link color="inherit" href="/">
+              Home
+            </Link>
+            <Typography color="textPrimary">
+              Rubin Observatory PZ Data Products
+            </Typography>
+          </Breadcrumbs>
           <Box
             sx={{
               mt: 1,

diff --git a/frontend/pages/tutorials.js b/frontend/pages/tutorials.js
@@ -1,4 +1,12 @@
-import { Container, Grid, Link, Typography, Box, Stack } from '@mui/material'
+import {
+  Container,
+  Grid,
+  Link,
+  Typography,
+  Box,
+  Stack,
+  Breadcrumbs
+} from '@mui/material'
 import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
 import { useRouter } from 'next/router'
 import Card from '@mui/material/Card'
@@ -15,6 +23,12 @@ export default function Tutorials() {
     <Container className={classes.root}>
       <Grid container spacing={8}>
         <Grid item xs={12}>
+          <Breadcrumbs aria-label="breadcrumb">
+            <Link color="inherit" href="/">
+              Home
+            </Link>
+            <Typography color="textPrimary">Tutorials</Typography>
+          </Breadcrumbs>
           <Box
             sx={{
               mt: 1,

diff --git a/frontend/pages/user_products.js b/frontend/pages/user_products.js
@@ -5,7 +5,9 @@ import {
   CardContent,
   FormControl,
   Paper,
-  Stack
+  Stack,
+  Link,
+  Breadcrumbs
 } from '@mui/material'
 import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
 import Grid from '@mui/material/Grid'
@@ -36,6 +38,14 @@ export default function Products() {
     <Paper className={classes.root}>
       <Grid container className={classes.gridTitle}>
         <Grid item xs={4}>
+          <Breadcrumbs aria-label="breadcrumb">
+            <Link color="inherit" href="/">
+              Home
+            </Link>
+            <Typography color="textPrimary">
+              User-generated Data Products
+            </Typography>
+          </Breadcrumbs>
           <Box
             sx={{
               mt: 1,