Daisy UI Drawer 컴포넌트

Daisy UI 의 Drawer 컴포넌트를 React 버전으로 구현한 컴포넌트입니다.
UI 구성은 1. 토글, 2. Drawer 입니다.
Drawer의 UI 특성 상, Document의 마지막에 배체해야 합니다. 하지만 토글과 깊은 관계를 맺고 있으므로, 같은 컴포넌트로 묶되 Drawer는 Portal을 통해 렌더링하도록 하였습니다.

'use client'

import MyPortal from '@/components/MyPortal'

import { LINK_BLOG, LINK_GITHUB, LINK_NOTION } from '@/constants'

import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline'

import Link from 'next/link'

import { ChangeEventHandler, MouseEventHandler, useState } from 'react'

const ToggleMenu = () => {

  const [opened, setOpened] = useState(false)

  const handleInputChanged: ChangeEventHandler<HTMLInputElement> = (e) => {

    setOpened(e.target.checked)

  const handleMenuClicked: MouseEventHandler<HTMLAnchorElement> = (e) => {

    setOpened(false)

  return (

<>

      <div className="flex-none lg:hidden">

        <label htmlFor="drawer" aria-label="open sidebar" className="btn btn-square btn-ghost">

          <svg

            xmlns="http://www.w3.org/2000/svg"

            fill="none"

            viewBox="0 0 24 24"

            className="inline-block h-6 w-6 stroke-current"

            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"></path>

          </svg>

        </label>

      </div>

      <MyPortal>

        <input id="drawer" type="checkbox" className="drawer-toggle" checked={opened} onChange={handleInputChanged} />

        <div className="drawer-side z-20">

          <label htmlFor="drawer" aria-label="close sidebar" className="drawer-overlay"></label>

          <ul className="menu min-h-full w-80 bg-base-200 p-4">

            {/* Sidebar content here */}

            <li>

              <Link href="/careers/intro" onClick={handleMenuClicked}>

                Intro

              </Link>

            </li>

            <li>

              <Link href="/careers/experiences" onClick={handleMenuClicked}>

                Experiences

              </Link>

              <ul>

                <li>

                  <Link href="/careers/experiences/portfolio" onClick={handleMenuClicked}>

                    Portfolio

                  </Link>

                </li>

                <li>

                  <Link href="/careers/experiences/codes" onClick={handleMenuClicked}>

                    Codes

                  </Link>

                </li>

                <li>

                  <a href={LINK_GITHUB} target="_blank" rel="noreferrer noopener nofollow">

                    Github <ArrowTopRightOnSquareIcon className="h-4 w-4" />

                  </a>

                </li>

                <li>

                  <a href={LINK_BLOG} target="_blank" rel="noreferrer noopener nofollow">

                    Blog <ArrowTopRightOnSquareIcon className="h-4 w-4" />

                  </a>

                </li>

                <li>

                  <a href={LINK_NOTION} target="_blank" rel="noreferrer noopener nofollow">

                    Notion <ArrowTopRightOnSquareIcon className="h-4 w-4" />

                  </a>

                </li>

              </ul>

            </li>

            <li>

              <Link href="/careers/resume" onClick={handleMenuClicked}>

                Resume

              </Link>

            </li>

            <li>

              <Link href="/careers/contact" onClick={handleMenuClicked}>

                Contact

              </Link>

            </li>

          </ul>

        </div>

      </MyPortal>

</>

export default ToggleMenu