✨feat: remove submenu

app/@modal/(.)history/hiroshima/image/[date]/[name]/page.tsx → app/@modal/(.)history/image/[area]/[date]/[name]/page.tsx

@@ -1,15 +1,19 @@
-import { Modal } from "@/app/@modal/(.)history/hiroshima/modal"
+import { Modal } from "@/app/@modal/(.)history/modal"
 import type { TilePicture } from "@/app/interfaces/picture"
 import type { EventDate } from "@/app/interfaces/schedule"
-import { HIROSHIMA_HISTORY } from "@/app/lib/constant"
+import { HIROSHIMA_HISTORY, KANTO, KANTO_HISTORY } from "@/app/lib/constant"
 import { cloudfrontLoader } from "@/app/lib/loader"
 import Image from "next/image"
 import type { JSX } from "react"
 
 export default function Picture({
-  params: { date, name },
-}: Readonly<{ params: { date: string; name: string } }>): JSX.Element {
-  const eventDate: EventDate = HIROSHIMA_HISTORY.find(
+  params: { area, date, name },
+}: Readonly<{
+  params: { area: string; date: string; name: string }
+}>): JSX.Element {
+  const history: EventDate[] =
+    `/${area}` === KANTO.pathname ? KANTO_HISTORY : HIROSHIMA_HISTORY
+  const eventDate: EventDate = history.find(
     (history) => history.date === date,
   ) as EventDate
   const tilePicture: TilePicture = eventDate.pictures.find(

app/@modal/(.)history/movie/[area]/[date]/page.tsx

@@ -0,0 +1,31 @@
+import { Modal } from "@/app/@modal/(.)history/modal"
+import { Video } from "@/app/components/media/video"
+import type { Submenu } from "@/app/interfaces/menu"
+import type { EventDate } from "@/app/interfaces/schedule"
+import {
+  HIROSHIMA,
+  HIROSHIMA_HISTORY,
+  KANTO,
+  KANTO_HISTORY,
+} from "@/app/lib/constant"
+import type { JSX } from "react"
+
+export default function Movie({
+  params: { area, date },
+}: Readonly<{ params: { area: string; date: string } }>): JSX.Element {
+  const submenu: Submenu = `/${area}` === KANTO.pathname ? KANTO : HIROSHIMA
+  const history: EventDate[] =
+    `/${area}` === KANTO.pathname ? KANTO_HISTORY : HIROSHIMA_HISTORY
+  const eventDate: EventDate = history.find(
+    (history) => history.date === date,
+  ) as EventDate
+
+  return (
+    <Modal>
+      <h2 className="font-bold font-zenMaruGothic mb-5 text-3xl text-center">
+        {eventDate.title}
+      </h2>
+      <Video pathname={submenu.pathname} date={eventDate.date} />
+    </Modal>
+  )
+}

app/components/layout/heading.tsx

@@ -1,5 +1,4 @@
 import type { Menu, Submenu } from "@/app/interfaces/menu"
-import { PARTNER } from "@/app/lib/constant"
 import { HomeIcon } from "@heroicons/react/24/solid"
 import Link from "next/link"
 import type { JSX } from "react"
@@ -40,27 +39,19 @@ function Breadcrumb({
           </Link>
         </li>
         <li className={menu.textColor}>
-          {menu === PARTNER && submenus ? (
+          {submenus ? (
             <Link href={menu.pathname} className="link">
               {menu.name}
             </Link>
           ) : (
             menu.name
           )}
         </li>
-        {submenus?.map((submenu, index) =>
-          submenus.length === 2 && index === 0 ? (
-            <li key={submenu.name}>
-              <Link href={menu.pathname + submenu.pathname} className="link">
-                {submenu.name}
-              </Link>
-            </li>
-          ) : (
-            <li key={submenu.name} className={submenu.textColor}>
-              {submenu.name}
-            </li>
-          ),
-        )}
+        {submenus?.map((submenu) => (
+          <li key={submenu.name} className={submenu.textColor}>
+            {submenu.name}
+          </li>
+        ))}
       </ul>
     </div>
   )

app/footer.tsx

@@ -13,30 +13,12 @@ export function Footer(): JSX.Element {
               key={menu.name}
               className="flex flex-col flex-wrap items-stretch relative"
             >
-              {menu.submenus.length === 0 ? (
-                <Link
-                  href={menu.pathname}
-                  className="font-bold link-hover justify-center text-orange-400"
-                >
-                  {menu.name}
-                </Link>
-              ) : (
-                <>
-                  <b className="justify-center text-orange-400">{menu.name}</b>
-                  <ul className="ms-4 ps-2 relative whitespace-nowrap">
-                    {menu.submenus.map((submenu) => (
-                      <li key={submenu.name}>
-                        <Link
-                          href={menu.pathname + submenu.pathname}
-                          className="link-hover text-nowrap"
-                        >
-                          {submenu.name}
-                        </Link>
-                      </li>
-                    ))}
-                  </ul>
-                </>
-              )}
+              <Link
+                href={menu.pathname}
+                className="font-bold link-hover justify-center text-orange-400"
+              >
+                {menu.name}
+              </Link>
             </li>
           ))}
         </ul>

app/globals.css

@@ -16,7 +16,7 @@ img {
 }
 
 .fade-in-up {
-  animation: fade-in-up 2s ease-in-out forwards;
+  animation: fade-in-up 1.5s ease-in-out forwards;
 }
 
 .fade-in-up-timeline {

app/header.tsx

@@ -5,7 +5,6 @@ import Image from "next/image"
 import Link from "next/link"
 import { usePathname } from "next/navigation"
 import { type JSX, type RefObject, useEffect, useRef, useState } from "react"
-import type { Submenu } from "./interfaces/menu.ts"
 import { NAVIGATION, SITE_TITLE } from "./lib/constant.ts"
 
 export function Header(): JSX.Element {
@@ -107,19 +106,12 @@ function DropdownMenu({
         <ul className="bg-white dropdown-content menu menu-sm rounded-2xl shadow">
           {NAVIGATION.map((menu) => (
             <li key={menu.name}>
-              {menu.submenus.length === 0 ? (
-                <Link
-                  href={menu.pathname}
-                  className="font-bold text-nowrap text-orange-400"
-                >
-                  {menu.name}
-                </Link>
-              ) : (
-                <>
-                  <b className="text-orange-400">{menu.name}</b>
-                  <Menu pathname={menu.pathname} submenus={menu.submenus} />
-                </>
-              )}
+              <Link
+                href={menu.pathname}
+                className="font-bold text-nowrap text-orange-400"
+              >
+                {menu.name}
+              </Link>
             </li>
           ))}
         </ul>
@@ -170,41 +162,8 @@ function Navigation({
     >
       {NAVIGATION.map((menu) => (
         <li key={menu.name}>
-          {menu.submenus.length === 0 ? (
-            <Link href={menu.pathname} className="font-bold text-orange-400">
-              {menu.name}
-            </Link>
-          ) : (
-            <details
-              ref={(node: HTMLDetailsElement) => {
-                ref.current?.set(menu.name, node)
-                return () => {
-                  ref.current?.delete(menu.name)
-                }
-              }}
-            >
-              <summary className="font-bold text-orange-400">
-                {menu.name}
-              </summary>
-              <Menu pathname={menu.pathname} submenus={menu.submenus} />
-            </details>
-          )}
-        </li>
-      ))}
-    </ul>
-  )
-}
-
-function Menu({
-  pathname,
-  submenus,
-}: { pathname: string; submenus: Submenu[] }): JSX.Element {
-  return (
-    <ul>
-      {submenus.map((submenu) => (
-        <li key={submenu.name}>
-          <Link href={pathname + submenu.pathname} className="text-nowrap">
-            {submenu.name}
+          <Link href={menu.pathname} className="font-bold text-orange-400">
+            {menu.name}
           </Link>
         </li>
       ))}

app/history/hiroshima/image/[date]/[name]/page.tsx → app/history/image/[area]/[date]/[name]/page.tsx

@@ -3,34 +3,45 @@ import { Heading } from "@/app/components/layout/heading"
 import type { Submenu } from "@/app/interfaces/menu"
 import type { TilePicture } from "@/app/interfaces/picture"
 import type { EventDate } from "@/app/interfaces/schedule"
-import { HIROSHIMA, HIROSHIMA_HISTORY, HISTORY } from "@/app/lib/constant"
+import {
+  HIROSHIMA,
+  HIROSHIMA_HISTORY,
+  HISTORY,
+  KANTO,
+  KANTO_HISTORY,
+} from "@/app/lib/constant"
 import { cloudfrontLoader } from "@/app/lib/loader"
 import type { Metadata } from "next"
 import Image from "next/image"
 import type { JSX } from "react"
 
 export const metadata: Metadata = {
-  title: `${HIROSHIMA.name}での活動・実績`,
+  title: "活動実績",
 }
 
-export default function HiroshimaImage({
-  params: { date, name },
-}: Readonly<{ params: { date: string; name: string } }>): JSX.Element {
-  const eventDate: EventDate = HIROSHIMA_HISTORY.find(
+export default function Picture({
+  params: { area, date, name },
+}: Readonly<{
+  params: { area: string; date: string; name: string }
+}>): JSX.Element {
+  const submenu: Submenu = `/${area}` === KANTO.pathname ? KANTO : HIROSHIMA
+  const history: EventDate[] =
+    `/${area}` === KANTO.pathname ? KANTO_HISTORY : HIROSHIMA_HISTORY
+  const eventDate: EventDate = history.find(
     (history) => history.date === date,
   ) as EventDate
   const tilePicture: TilePicture = eventDate.pictures.find(
     (picture) => picture.name === name,
   ) as TilePicture
-  const submenu: Submenu = {
+  const movie: Submenu = {
     name: eventDate.title,
     pathname: `/${eventDate.date}`,
     textColor: "text-yellow-400",
   }
 
   return (
     <>
-      <Heading menu={HISTORY} submenus={[HIROSHIMA, submenu]} />
+      <Heading menu={HISTORY} submenus={[submenu, movie]} />
       <Image
         loader={cloudfrontLoader}
         src={tilePicture.src}
@@ -39,10 +50,7 @@ export default function HiroshimaImage({
         alt={tilePicture.alt}
         className="w-full"
       />
-      <BackButton
-        href={HISTORY.pathname + HIROSHIMA.pathname}
-        name={HISTORY.name}
-      />
+      <BackButton href={HISTORY.pathname} name={HISTORY.name} />
     </>
   )
 }

app/history/movie/[area]/[date]/page.tsx

@@ -0,0 +1,42 @@
+import { BackButton } from "@/app/components/button/backButton"
+import { Heading } from "@/app/components/layout/heading"
+import { Video } from "@/app/components/media/video"
+import type { Submenu } from "@/app/interfaces/menu"
+import type { EventDate } from "@/app/interfaces/schedule"
+import {
+  HIROSHIMA,
+  HIROSHIMA_HISTORY,
+  HISTORY,
+  KANTO,
+  KANTO_HISTORY,
+} from "@/app/lib/constant"
+import type { Metadata } from "next"
+import type { JSX } from "react"
+
+export const metadata: Metadata = {
+  title: "活動実績",
+}
+
+export default function Movie({
+  params: { area, date },
+}: Readonly<{ params: { area: string; date: string } }>): JSX.Element {
+  const submenu: Submenu = `/${area}` === KANTO.pathname ? KANTO : HIROSHIMA
+  const history: EventDate[] =
+    `/${area}` === KANTO.pathname ? KANTO_HISTORY : HIROSHIMA_HISTORY
+  const eventDate: EventDate = history.find(
+    (history) => history.date === date,
+  ) as EventDate
+  const movie: Submenu = {
+    name: eventDate.title,
+    pathname: `/${eventDate.date}`,
+    textColor: "text-yellow-400",
+  }
+
+  return (
+    <>
+      <Heading menu={HISTORY} submenus={[submenu, movie]} />
+      <Video pathname={submenu.pathname} date={eventDate.date} />
+      <BackButton href={HISTORY.pathname} name={HISTORY.name} />
+    </>
+  )
+}