対象のメニュー構造構造

下記ページより一部抜粋

link_to_page

				<motion.div
          initial={{ scale: 0, opacity: 0, x: "-50%", y: "-50%" }} 
          animate={{ scale: 1, opacity: 1 }}
          className="min-w-[90vw] sm:min-w-[70vw] flex flex-col justify-between z-30 items-center fixed top-1/2 left-1/2 bg-black/80 dark:bg-white/70 rounded-lg backdrop-blur-md py-32"
        >
          <nav className="flex items-cneter justify-center">
            <CustomMobileLink href="/" title="Home" className="mr-4" toggle={handleClick} />
            <CustomMobileLink href="/About" title="About" className="mx-4" toggle={handleClick} />
            <CustomMobileLink href="/Projects" title="Projects" className="mx-4" toggle={handleClick} />
            <CustomMobileLink href="/Blog" title="Blog" className="ml-4" toggle={handleClick} />
          </nav>

          <nav className="flex items-cneter justify-center flex-wrap mt-2">

            <motion.a
              href="/"
              target={"_blank"}
              whileHover={{ y: -2 }}
              whileTap={{ scale: 0.9 }}
              className="w-8 mr-3" // aタグに対してwidth: 24px;指定 svgの最大幅になる(w-full)
            >
              <TwitterIcon />
            </motion.a>

            <motion.a
              href="/"
              target={"_blank"}
              whileHover={{ y: -2 }}
              whileTap={{ scale: 0.9 }}
              className="w-8 mx-3"
            >
              <GithubIcon />
            </motion.a>

            <button
              onClick={() => setMode(mode === "light" ? "dark" : "light")}
              className={`w-8 h-8 ml-5 rounded-full p-1 ease ${mode === "light" ? "bg-black text-white" : "bg-white text-black"}`}
            >
              {mode === "light" ? (
                <SunIcon className={"fill-dark"} />
              ) : (
                <MoonIcon className="fill-dark" />
              )}
            </button>

          </nav>
        </motion.div>

<motion.div>のCSSについて噛み砕いていく

				<motion.div
          initial={{ scale: 0, opacity: 0, x: "-50%", y: "-50%" }} 
          animate={{ scale: 1, opacity: 1 }}
          className="min-w-[90vw] sm:min-w-[70vw] flex flex-col justify-between z-30 items-center fixed top-1/2 left-1/2 bg-black/80 dark:bg-white/70 rounded-lg backdrop-blur-md py-32"
        >

initial：要素に対しての初期配置設定

ここでは要素に対してx, yともに50%ずつ、上と左方向に移動している

fixed top-1/2 left-1/2

fixed : 画面固定

top-1/2, left-1/2 : fixedかつinitialを指定しているので画面幅に対して50%の位置に中心が移動

translate-x-1/2 -translate-y-1/2

上記だと中心点ではなく要素の左上が画面の中心に来る

TOP PAGE