[AI Filter] 09. 月曜日

1.ナビゲーションバーの作成

上部ナビゲーションバーが作成されました.ホーム、Introduction、TechDemosをクリックして、対応するページに移動します.
でも問題がある!ボタンごとにサスペンションするときはメニューを表示させたいのですが、anchorElの設定が悪く、いつも無効なHTML Elementとして表示されているので、この部分は明日解決します.
次に、これまでに作成したコードを示します.

import { useState, MouseEvent } from "react";
import { styled } from "@mui/material/styles";
import { Box, Stack, Button, AppBar, Toolbar, Menu, MenuItem } from "@mui/material";
import { Link as RouterLink, useLocation, matchPath } from "react-router-dom";
import logo from "../../Assets/Image/logo.png";

function NavBar() {
  const APPBAR_MOBILE = 64;
  const APPBAR_DESKTOP = 84;
  const location = useLocation();
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const open = Boolean(anchorEl);

  const handleOpen = (event: MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
    console.log(event.currentTarget)
    console.log(anchorEl)
  }

  const handleClose = () => {
    setAnchorEl(null);
  }

  const routes = [
    { path: "/", name: "Home" },
    {
      path: "/Introduction",
      name: "Introduction",
      children: [
        { path: "", name: "Introduction" },
        { path: "QuickStart", name: "QuickStart" },
      ],
    },
    {
      path: "/TechDemos",
      name: "TechDemos",
      children: [
        { path: "ImageFilter", name: "ImageFilter" },
        { path: "WebcamFilter", name: "WebcamFilter" },
      ],
    },
  ];
  const RootStyle = styled(AppBar)(({ theme }) => ({
    boxShadow: "none",
    backdropFilter: "blur(6px)",
    WebkitBackdropFilter: "blur(6px)",
    backgroundColor: "#031214",
  }));

  const ToolbarStyle = styled(Toolbar)(({ theme }) => ({
    minHeight: APPBAR_MOBILE,
    [theme.breakpoints.up("lg")]: {
      minHeight: APPBAR_DESKTOP,
      padding: theme.spacing(0, 3),
    },
  }));
  return (
    <RootStyle>
      <ToolbarStyle>
        <Box sx={{ px: 2, py: 1, pr: 4 }}>
          <RouterLink to="/">
            <Box component="img" src={logo} sx={{ height: 60 }}></Box>
          </RouterLink>
        </Box>

        <Stack direction="row" alignItems="center" spacing={{ xs: 0.5, sm: 6.5 }} sx={{ mr: 10 }}>
          {routes.map((route) => {
            const isCurrentPath = matchPath(location.pathname, route.path);
            const fontColor = isCurrentPath ? "#CEF3FF" : "#F2FFFF";
            const fontWeight = isCurrentPath ? "600" : "200";
            return (
              <span key={route.name}>
                <Button
                id="basic-button"
                  aria-controls={open ? 'basic-menu' : undefined}
                  aria-haspopup="true"
                  aria-expanded={open ? 'true' : undefined}
                  onMouseOver={handleOpen}
                  to={route.path}
                  size="large"
                  sx={{ fontFamily: "Pretendard-Regular", color: fontColor, fontWeight }}
                  component={RouterLink}
                >
                  {route.name}
                </Button>
                <Menu
                  id="basic-menu"
                  anchorEl={anchorEl}
                  open={open}
                  onClose={handleClose}
                  MenuListProps={{
                    'aria-labelledby': 'basic-button',
                    onMouseLeave: handleClose,
                  }}

                >
                  <MenuItem onClick={handleClose}>Profile</MenuItem>
                  <MenuItem onClick={handleClose}>My account</MenuItem>
                  <MenuItem onClick={handleClose}>Logout</MenuItem>
                </Menu>
              </span>
            );
          })}
        </Stack>
      </ToolbarStyle>
    </RootStyle>
  );
}

export default NavBar;

2.本を買う

今年は毎月1冊の本を読むという決意が消え、1冊も読まなかった.そこで今回Yes 24中古書店に行って손원평作家の프리즘冊を購入しました.今月はあまり時間が残っていませんが、頑張って読みたいです.

3. 🌷チューリップが咲く🌷

2月26日、四書鉢に球茎3個、水景栽培1個を植えた.水景栽培のチューリップが咲いていました!!最近はチューリップがきれいに見えるので、あちこちでチューリップのイメージを使っていますが、チューリップの表情で、私が飼っているチューリップのせいか、世界で一番きれいに見えます...