[AI Filter] 10. 第4週水曜日

1.ナビゲーションバーメニューの接続

質問です。

前回残されたメニューの問題を解決しました.anchorElが設定されていないという問題は、3つのメニューが1つのanchorElを共有していることによるものです.したがって、NavBar内のボタンを構成部品に分離し、各構成部品にmenuを取り付けるように変更する.

質問です。

次のメニューは成功しました.しかし、material-uiのmenuがアクティブ化されると、後にbackdropが現れ、ボタンをクリックできないという問題が発生する.

上の写真の赤い線に表示されているボタンはすべてクリックできるはずです.ただしmenuを使うとメニュー中のボタンはクリックできますが、メニュー外のボタンはクリックできません.もう一つの素子を使うべきだと思いますので調べてみるとpopperという素子が見えました.popper素子から見た説明は以下の通りである.
Clicking away does not hide the Popper component. popperコンポーネント以外のクリックイベントを処理するために、他のbackdropコンポーネントはありませんが、実際にはこのコンポーネントはそうです.逆に、構成部品を閉じる場合は、異なる方法で処理する必要がありますが、popperを使用して3つのボタンをクリックすることができます.

import { useState, MouseEvent } from "react";
import { Link as RouterLink, useLocation, matchPath } from "react-router-dom";
import { Button, Popper, MenuItem, Fade, Paper } from "@mui/material";

interface NavBarBtnProps {
  route: routeProps;
}

interface routeProps {
  path: string;
  name: string;
  children: Array<routeChildrenProps>;
}

interface routeChildrenProps {
  path: string;
  name: string;
}

function NavBarBtn({ route }: NavBarBtnProps) {
  const location = useLocation();
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const open = Boolean(anchorEl);
  const handleOpen = (event: MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };
  const isCurrentPath = matchPath(location.pathname, route.path);
  const fontColor = isCurrentPath ? "#CEF3FF" : "#F2FFFF";
  const fontWeight = isCurrentPath ? "600" : "200";
  return (
    <span key={route.name} onMouseOver={handleOpen} onMouseLeave={handleClose}>
      <Button
        id={`${route.name}-btn`}
        to={route.path}
        size="large"
        sx={{ fontFamily: "Pretendard-Regular", color: fontColor, fontWeight }}
        component={RouterLink}
      >
        {route.name}
      </Button>
      {route.children.length > 0 ? (
        <Popper placement="bottom" disablePortal anchorEl={anchorEl} open={open}>
          <Paper>
            {route.children.map((child) => {
              return (
                <MenuItem key={child.name} to={`${route.path}/${child.path}`} component={RouterLink}>
                  {child.name}
                </MenuItem>
              );
            })}
          </Paper>
        </Popper>
      ) : null}
    </span>
  );
}

export default NavBarBtn;

2. Before & After

SuperResolutionの適用前後を比較するページが必要です.既存の方法は、中間ボタンをドラッグして左右に移動することですが、少し遅いようなので、マウスを追従させる方法も追加されました.明日フロントコードを合わせて、どの方法がいいか検討します.

マウス位置コード

  const handleMove = (event: MouseEvent<HTMLDivElement>) => {
    setImgWidth(event.clientX);
  };
  <PageDiv onClick={handleClick} onMouseMove={handleMove}>
    <div
      style={{
        width: imgWidth,
          maxWidth: "99.5vw",
            height: "100%",
              overflow: "hidden",
                borderRight: "solid 1px white",
                  transitionProperty: "all",
                    transitionDuration: "0.5s",
      }}
      >
      <Box
        component="img"
        src={beforeImage}
        sx={{ width: "99.5vw", height: "100%", objectFit: "cover", objectPosition: "left top" }}
        ></Box>
    </div>
    <IconButton sx={buttonStyle}>
      <ArrowLeftIcon sx={{ color: "#F2FFFF" }} />
      <ArrowRightIcon sx={{ color: "#F2FFFF" }} />
    </IconButton>
  </PageDiv>

ドラッグコード

  const handleDrag = (event: DragEvent<HTMLButtonElement>) => {
    setImgWidth(event.clientX);
  };
  <PageDiv onClick={handleClick}>
    <div style={{ width: imgWidth, maxWidth: "99.5vw", height: "100%", overflow: "hidden", borderRight: "solid 1px white" }}>
      <Box
        component="img"
        src={beforeImage}
        sx={{ width: "99.5vw", height: "100%", objectFit: "cover", objectPosition: "left top" }}
        ></Box>
    </div>
    <IconButton draggable="true" onDrag={handleDrag} onDragEnd={handleDrag} className="home-before-after-btn" sx={buttonStyle}>
      <ArrowLeftIcon />
      <ArrowRightIcon />
    </IconButton>
  </PageDiv>