@mui/icons-material#Home TypeScript Examples

links = [
  {
    label: 'General',
    items: [
      { label: 'Home', link: '/', icon: <HomeOutlined />, iconOn: <Home /> },
      {
        label: 'All stats',
        link: '/all',
        icon: <BarChartOutlined />,
        iconOn: <BarChart />,
      },
    ],
  },
  {
    label: 'Tops',
    items: [
      {
        label: 'Top songs',
        link: '/top/songs',
        icon: <MusicNoteOutlined />,
        iconOn: <MusicNote />,
      },
      {
        label: 'Top artists',
        link: '/top/artists',
        icon: <PersonOutlined />,
        iconOn: <Person />,
      },
      {
        label: 'Top albums',
        link: '/top/albums',
        icon: <AlbumOutlined />,
        iconOn: <Album />,
      },
    ],
  },
  {
    label: 'With people',
    items: [
      {
        label: 'Affinity',
        link: '/collaborative/affinity',
        icon: <MusicNoteOutlined />,
        iconOn: <MusicNote />,
      },
    ],
  },
  {
    label: 'Settings',
    items: [
      {
        label: 'Share this page',
        link: '/share',
        icon: <ShareOutlined />,
        iconOn: <Share />,
      },
      {
        label: 'Settings',
        link: '/settings',
        icon: <SettingsOutlined />,
        iconOn: <Settings />,
      },
      {
        label: 'Logout',
        link: '/logout',
        icon: <ExitToApp />,
        iconOn: <ExitToApp />,
      },
    ],
  },
]

export function LeftMenuSidebar() {
  // const LinkBehavior = React.forwardRef((props, ref) => <Link ref={ref} to="/" {...props} role={undefined} />);
  const dispatch = useAppDispatch();
  const pathname = useAppSelector((state) => state.router.location.pathname);

  const handleLinkClick = (to: string) => () => dispatch(push(to));
  const buttonColor = (name: string) => (name === pathname ? "primary" : "default");
  const updateState = useCheckForUpdate();

  return (
    <Stack
      sx={{
        width: (theme) => theme.spacing(10),
        paddingBottom: 2,
      }}
      gap={1}
      p={1}
      alignItems={"center"}
      component={"nav"}
    >
      <Box onClick={handleLinkClick("/home")} sx={{ cursor: "pointer" }}>
        <RewindLogo />
      </Box>
      <Divider orientation={"horizontal"} sx={{ borderWidth: 1, width: "80%" }} />
      <Tooltip title={"Overview"} placement={"right"}>
        <IconButton color={buttonColor("/home")} onClick={handleLinkClick("/home")}>
          <Home />
        </IconButton>
      </Tooltip>
      <Tooltip title={"Analyzer"} placement={"right"}>
        <IconButton
          // These are not centered
          onClick={handleLinkClick("/analyzer")}
          color={buttonColor("/analyzer")}
        >
          <FaMicroscope height={"0.75em"} />
        </IconButton>
      </Tooltip>
      {/*Nothing*/}
      <Box flexGrow={1} />
      {updateState.hasNewUpdate && (
        <Tooltip title={`New version ${updateState.latestVersion} available!`} placement={"right"}>
          <IconButton onClick={() => window.open(latestReleaseUrl)}>
            <Badge variant={"dot"} color={"error"}>
              <UpdateIcon />
            </Badge>
          </IconButton>
        </Tooltip>
      )}
    </Stack>
  );
}

MenuLayoutNew: React.FC<MenuLayoutNewProps> = ({
  children,
  route,
  pathname,
  mode = 'page',
  menu = [],
  contentHeader,
  menuFooter,
  onChange,
  ...props
}) => {
  const [menuList, setMenuList] = React.useState<Router[] | undefined>([]);
  const [breads, setBreads] = React.useState<Router[]>([]);
  const history = useNavigate();

  const getBreadCrumbs = (routes: Router[], newLocation?: any) => {
    let breadCrumbs: Router[] = [];

    const findRoute = (routes: Router[] | undefined) => {
      if (!routes) return routes;
      const loc = newLocation ? newLocation : location;
      routes.forEach((i) => {
        if (loc.pathname.indexOf(i.path) !== -1) {
          breadCrumbs.push(i);
        }
        if (i.routes) {
          findRoute(i.routes);
        }
      });
    };
    findRoute(routes);

    return breadCrumbs;
  };

  React.useEffect(() => {
    if (mode === 'route') {
      if (location.pathname === pathname) {
        history(route?.routes?.[0].path || pathname, { replace: true });
      }
      setMenuList(route?.routes);
    } else {
      setMenuList(menu);
    }
  }, []);

  React.useEffect(() => {
    const breads = getBreadCrumbs(route.routes || []);
    setBreads(breads);
  }, [location]);

  return (
    <div className="flex flex-row h-screen bg-gray-70">
      <div className="w-72 p-4 h-full flex flex-col">
        <div className="flex gap-1">
          <Tooltip title="回到首页" arrow>
            <IconButton
              size="small"
              onClick={() => {
                history('/');
              }}
            >
              <Home />
            </IconButton>
          </Tooltip>
          <Tooltip title="返回上级" arrow>
            <IconButton
              size="small"
              onClick={() => {
                history(-1);
              }}
            >
              <KeyboardBackspace />
            </IconButton>
          </Tooltip>
        </div>
        <Menu datasource={menuList} mode="route" onChange={onChange} />
        <div>{menuFooter}</div>
      </div>
      <div className="h-full overflow-hidden flex flex-col w-full px-6 py-4">
        <div>{contentHeader}</div>
        <div className="flex-grow overflow-y-auto w-full my-4 pb-2">
          <div className="max-w-4xl pl-1">{children}</div>
        </div>
        <div className="text-center max-w-4xl">
          <Copyright />
        </div>
      </div>
    </div>
  );
}

SettingPage: React.FC<SettingPageProps> = ({
  children,
  route,
  ...props
}) => {
  const history = useNavigate();
  const location = useLocation();
  const params = useParams();
  const [menuList, setMenuList] = React.useState<Router[] | undefined>([]);
  const [breads, setBreads] = React.useState<Router[]>([]);

  const getBreadCrumbs = (routes: Router[], parentPath: string = '') => {
    let breadCrumbs: Router[] = [];

    const findRoute = (
      routes: Router[] | undefined,
      parentPath: string = '',
    ) => {
      if (!routes) return routes;
      const loc = location;
      routes.forEach((i) => {
        const fullPath = `${parentPath}/${i.path}`;
        const splitPath = fullPath.split(':');
        const paramsPath =
          splitPath[0] +
          Object.values(params)
            .filter((u) => u !== '')
            .join('/');
        if (
          loc.pathname.indexOf(i.path) !== -1 ||
          loc.pathname === paramsPath
        ) {
          breadCrumbs.push(i);
        }
        if (i.routes) {
          findRoute(i.routes, fullPath);
        }
      });
    };
    findRoute(routes, parentPath);

    return breadCrumbs;
  };

  React.useEffect(() => {
    if (location.pathname === '/setting') {
      history(route?.routes?.[0].path || '/setting', { replace: true });
    }
    setMenuList(route?.routes);
  }, []);

  React.useEffect(() => {
    const breads = getBreadCrumbs(route.routes || [], '/setting');
    setBreads(breads);
  }, [location]);

  return (
    <div className="flex flex-row h-screen bg-gray-70">
      <div className="w-72 p-4 h-full">
        <div className="flex gap-1">
          <Tooltip title="回到首页" arrow>
            <IconButton
              size="small"
              onClick={() => {
                history('/');
              }}
            >
              <Home />
            </IconButton>
          </Tooltip>
          <Tooltip title="返回上级" arrow>
            <IconButton
              size="small"
              onClick={() => {
                history(-1);
              }}
            >
              <KeyboardBackspace />
            </IconButton>
          </Tooltip>
        </div>
        <div className="flex flex-col gap-1 my-4">
          {menuList?.map((i) => (
            <div
              key={i.path}
              className={classNames(
                'hover:bg-gray-150',
                'transition-all',
                'px-2.5',
                'py-1.5',
                'cursor-pointer',
                'rounded',
                'text-sm',
                'text-gray-800',
                {
                  'bg-gray-150': location.pathname.indexOf(i.path) > -1,
                },
              )}
              onClick={() => {
                history(i.path);
              }}
            >
              {i.title}
            </div>
          ))}
        </div>
      </div>
      <div className="h-full overflow-hidden flex flex-col w-full px-6 py-4">
        <Breadcrumbs separator="›" aria-label="breadcrumb" className="mb-4">
          {breads.map((i, index) => (
            <div
              className={classNames('text-2xl cursor-pointer mb-0', {
                'font-semibold': index === breads.length - 1,
              })}
              key={i.path}
              onClick={() => {
                const path =
                  '/setting/' +
                  breads
                    .map((i) => i.path)
                    .filter((_, ji) => ji <= index)
                    .join('/');
                index !== breads.length - 1 ? history(path) : null;
              }}
            >
              <div className="flex items-center gap-1">
                {i.title}
                {i?.status === 'process' && (
                  <Chip
                    color="warning"
                    label={i?.status}
                    size="small"
                    variant="outlined"
                  />
                )}
              </div>
            </div>
          ))}
        </Breadcrumbs>
        <div className="flex-grow overflow-y-auto w-full">
          <div className="max-w-4xl">
            <Outlet />
          </div>
        </div>
        <div className="text-center max-w-4xl">
          <Copyright />
        </div>
      </div>
    </div>
  );
}