feat: add navigator back in analytics

package.json

@@ -28,6 +28,7 @@
     "@mui/lab": "6.0.0-beta.22",
     "@mui/material": "6.3.1",
     "@sentry/react": "8.48.0",
+    "@tanstack/react-query": "5.63.0",
     "@tanstack/react-router": "1.95.1",
     "@tanstack/router-devtools": "1.95.1",
     "@tanstack/zod-adapter": "1.95.1",

src/components/ui/MenuItemLink.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { MenuItem, MenuItemProps } from '@mui/material';
+
+import { LinkComponent, createLink } from '@tanstack/react-router';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+interface MUIMenuItemProps extends Omit<MenuItemProps, 'href'> {
+  // Add any additional props you want to pass to the typography
+}
+
+const MUIMenuItemComponent = React.forwardRef<
+  HTMLAnchorElement,
+  MUIMenuItemProps
+>((props, ref) => {
+  return <MenuItem component={'a'} ref={ref} {...props} />;
+});
+
+const CreatedLinkComponent = createLink(MUIMenuItemComponent);
+
+export const MenuItemLink: LinkComponent<typeof MUIMenuItemComponent> = (
+  props,
+) => {
+  return <CreatedLinkComponent preload="intent" {...props} />;
+};

src/components/ui/Navigator/CurrentItemNavigation.tsx

@@ -0,0 +1,48 @@
+import { DiscriminatedItem, ItemType } from '@graasp/sdk';
+
+import { TypographyLink } from '../TypographyLink.js';
+import ItemMenu, { ItemMenuProps } from './ItemMenu.js';
+import CenterAlignWrapper from './common/CenterAlignWrapper.js';
+
+export type CurrentItemProps = {
+  item: DiscriminatedItem;
+  buildBreadcrumbsItemLinkId?: (id: string) => string;
+  buildIconId?: (id: string) => string;
+  buildMenuId?: (id: string) => string;
+  buildMenuItemId?: (id: string) => string;
+  useChildren: ItemMenuProps['useChildren'];
+  showArrow: boolean;
+};
+
+export function CurrentItemNavigation({
+  item,
+  buildBreadcrumbsItemLinkId,
+  useChildren,
+  buildIconId,
+  buildMenuId,
+  buildMenuItemId,
+  showArrow,
+}: Readonly<CurrentItemProps>): JSX.Element | null {
+  return (
+    <CenterAlignWrapper>
+      <TypographyLink
+        id={buildBreadcrumbsItemLinkId?.(item.id)}
+        key={item.id}
+        to="."
+        params={{ itemId: item.id }}
+      >
+        {item.name}
+      </TypographyLink>
+      {(item.type === ItemType.FOLDER || showArrow) && (
+        <ItemMenu
+          useChildren={useChildren}
+          itemId={item.id}
+          buildIconId={buildIconId}
+          buildMenuItemId={buildMenuItemId}
+          buildMenuId={buildMenuId}
+          renderArrow={showArrow}
+        />
+      )}
+    </CenterAlignWrapper>
+  );
+}

src/components/ui/Navigator/ExtraItemsMenu.tsx

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+
+import { IconButton, IconButtonProps, Menu, Typography } from '@mui/material';
+
+import { ChevronRightIcon } from 'lucide-react';
+
+import { MenuItemLink } from '../MenuItemLink';
+import { MenuItemType } from './Navigator';
+
+export type ExtraItemsMenuProps = {
+  icon?: JSX.Element;
+  menuItems: MenuItemType[];
+};
+
+const Separator = <ChevronRightIcon data-testid="NavigateNextIcon" />;
+
+export function ExtraItemsMenu({
+  icon = Separator,
+  menuItems,
+}: Readonly<ExtraItemsMenuProps>): JSX.Element {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  const handleClick: IconButtonProps['onClick'] = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = (): void => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <>
+      <IconButton
+        onClick={handleClick}
+        aria-haspopup="true"
+        aria-expanded={open ? true : undefined}
+      >
+        {icon}
+      </IconButton>
+      <Menu
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        onClick={handleClose}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'left',
+        }}
+      >
+        {menuItems?.map(({ name, path }) => (
+          <MenuItemLink key={name} to={path}>
+            <Typography>{name}</Typography>
+          </MenuItemLink>
+        ))}
+      </Menu>
+    </>
+  );
+}

src/components/ui/Navigator/ExtraItemsNavigation.tsx

@@ -0,0 +1,30 @@
+import { Box, Stack } from '@mui/material';
+
+import { TypographyLink } from '../TypographyLink';
+import { ExtraItemsMenu } from './ExtraItemsMenu';
+import { MenuItemType } from './Navigator';
+
+export interface ExtraItem {
+  name: string;
+  path: string;
+  icon?: JSX.Element;
+  menuItems?: MenuItemType[];
+}
+
+export function ExtraItemsNavigation({
+  extraItems,
+}: Readonly<{
+  extraItems: ExtraItem[];
+}>): JSX.Element[] {
+  return extraItems.map(({ icon, name, path, menuItems }) => (
+    <Stack key={name} direction="row" alignItems="center">
+      <Box display="flex" gap={1}>
+        {icon}
+        <TypographyLink to={path}>{name}</TypographyLink>
+      </Box>
+      {menuItems && menuItems.length > 0 && (
+        <ExtraItemsMenu menuItems={menuItems} />
+      )}
+    </Stack>
+  ));
+}

src/components/ui/Navigator/HomeMenu.tsx

@@ -0,0 +1,92 @@
+import { useState } from 'react';
+
+import {
+  IconButton,
+  IconButtonProps,
+  Menu,
+  MenuProps,
+  Typography,
+} from '@mui/material';
+
+import { ChevronRightIcon, HomeIcon } from 'lucide-react';
+
+import { MenuItemLink } from '../MenuItemLink';
+import { TypographyLink } from '../TypographyLink';
+
+const Separator = <ChevronRightIcon data-testid="NavigateNextIcon" />;
+
+type Props = {
+  selected: { name: string; id: string; to: string };
+  elements: {
+    name: string;
+    id: string;
+    to: string;
+  }[];
+  menuId?: string;
+  buildMenuItemId?: (itemId: string) => string;
+  homeDropdownId?: string;
+};
+
+const HomeMenu = ({
+  buildMenuItemId,
+  elements,
+  homeDropdownId,
+  menuId,
+  selected,
+}: Props): JSX.Element => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+
+  const handleClick: IconButtonProps['onClick'] = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = (): void => {
+    setAnchorEl(null);
+  };
+
+  const onClick: MenuProps['onClick'] = (): void => {
+    handleClose();
+  };
+
+  return (
+    <>
+      <HomeIcon />
+      <IconButton
+        onClick={handleClick}
+        id={homeDropdownId}
+        aria-controls={open ? 'root' : undefined}
+        aria-haspopup="true"
+        aria-expanded={open ? true : undefined}
+      >
+        {Separator}
+      </IconButton>
+      <Menu
+        anchorEl={anchorEl}
+        open={open}
+        id={menuId}
+        onClose={handleClose}
+        onClick={onClick}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'left',
+        }}
+      >
+        {elements.map(({ name, id, to }) => (
+          <MenuItemLink key={id} to={to} id={buildMenuItemId?.(id)}>
+            <Typography>{name}</Typography>
+          </MenuItemLink>
+        ))}
+      </Menu>
+      <TypographyLink to={selected.to} key={selected.id}>
+        {selected.name}
+      </TypographyLink>
+    </>
+  );
+};
+
+export default HomeMenu;