Merge pull request #447 from Marukome0743/pr447

♻️refactor: rename menu

app/about/page.tsx

@@ -3,5 +3,5 @@ import { ABOUT } from "@/app/lib/constant"
 import type React from "react"
 
 export default function About(): React.JSX.Element {
-  return <Heading navigation={ABOUT} />
+  return <Heading menu={ABOUT} />
 }

app/components/button/scrollToTop.tsx

@@ -1,12 +1,11 @@
 "use client"
 
 import { ChevronDoubleUpIcon } from "@heroicons/react/24/solid"
-import { useEffect, useRef, useState } from "react"
+import { type RefObject, useEffect, useRef, useState } from "react"
 import type React from "react"
 
 export function ScrollToTop(): React.JSX.Element {
-  const ref: React.RefObject<HTMLButtonElement> =
-    useRef<HTMLButtonElement>(null)
+  const ref: RefObject<HTMLButtonElement> = useRef<HTMLButtonElement>(null)
   const scrollBtn: HTMLButtonElement = ref.current as HTMLButtonElement
   const [scrollY, setScrollY] = useState<number>(0)
   const [isScrollDown, setIsScrollDown] = useState<boolean>(false)
@@ -27,7 +26,7 @@ export function ScrollToTop(): React.JSX.Element {
     }
   })
 
-  function scrollToTop() {
+  function scrollToTop(): void {
     scrollBtn.classList.remove("fade-in-up")
     scrollBtn.classList.add("fade-out-down")
     window.scrollTo({ top: 0, behavior: "smooth" })

app/components/layout/header.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import type { Theme } from "@/app/interfaces/theme"
-import { SITE_TITLE, navigation } from "@/app/lib/constant"
+import { NAVIGATION, SITE_TITLE } from "@/app/lib/constant"
 import {
   Bars3CenterLeftIcon,
   ChevronDownIcon,
@@ -77,7 +77,7 @@ export function Header(): React.JSX.Element {
         </Link>
       </div>
       <nav className="navbar-center hidden lg:flex">
-        <NavItems />
+        <Navigation />
       </nav>
       <div className="navbar-end">
         <ThemeController />
@@ -94,11 +94,11 @@ function DropdownMenu(): React.JSX.Element {
       </div>
       <nav>
         <ul className="menu menu-sm dropdown-content z-10 mt-3 w-52 rounded-box bg-base-100 p-2 shadow">
-          {navigation.map((item) => (
-            <li key={item.name}>
-              <Link href={item.href} className="font-bold">
-                <item.icon className={`size-5 ${item.color}`} />
-                {item.name}
+          {NAVIGATION.map((menu) => (
+            <li key={menu.name}>
+              <Link href={menu.href} className="font-bold">
+                <menu.icon className={`size-5 ${menu.color}`} />
+                {menu.name}
               </Link>
             </li>
           ))}
@@ -108,14 +108,14 @@ function DropdownMenu(): React.JSX.Element {
   )
 }
 
-function NavItems(): React.JSX.Element {
+function Navigation(): React.JSX.Element {
   return (
     <ul className="menu menu-horizontal px-1">
-      {navigation.map((item) => (
-        <li key={item.name} className="hover:scale-110">
-          <Link href={item.href} className="font-bold">
-            <item.icon className={`size-5 ${item.color}`} />
-            {item.name}
+      {NAVIGATION.map((menu) => (
+        <li key={menu.name} className="hover:scale-110">
+          <Link href={menu.href} className="font-bold">
+            <menu.icon className={`size-5 ${menu.color}`} />
+            {menu.name}
           </Link>
         </li>
       ))}

app/components/layout/heading.tsx

@@ -1,29 +1,23 @@
-import type { Navigation } from "@/app/interfaces/navigation"
+import type { Menu } from "@/app/interfaces/menu"
 import { HomeIcon } from "@heroicons/react/24/solid"
 import Link from "next/link"
 import type React from "react"
 
-export function Heading({
-  navigation,
-}: Readonly<{ navigation: Navigation }>): React.JSX.Element {
+export function Heading({ menu }: Readonly<{ menu: Menu }>): React.JSX.Element {
   return (
     <section>
       <div className="max-w-fit mx-auto">
         <h1 className="typing font-bold text-3xl">
-          <navigation.icon
-            className={`inline size-9 mr-1 mb-1 ${navigation.color}`}
-          />
-          {navigation.name}
+          <menu.icon className={`inline size-9 mr-1 mb-1 ${menu.color}`} />
+          {menu.name}
         </h1>
       </div>
-      <Breadcrumb crumb={navigation} />
+      <Breadcrumb menu={menu} />
     </section>
   )
 }
 
-function Breadcrumb({
-  crumb,
-}: Readonly<{ crumb: Navigation }>): React.JSX.Element {
+function Breadcrumb({ menu }: Readonly<{ menu: Menu }>): React.JSX.Element {
   return (
     <div className="text-sm breadcrumbs">
       <ul>
@@ -34,10 +28,8 @@ function Breadcrumb({
           </Link>
         </li>
         <li>
-          <Link href={crumb.href}>
-            <crumb.icon className={`size-5 mr-1 ${crumb.color}`} />
-            {crumb.name}
-          </Link>
+          <menu.icon className={`size-5 mr-1 ${menu.color}`} />
+          {menu.name}
         </li>
       </ul>
     </div>

app/contact/page.tsx

@@ -3,5 +3,5 @@ import { CONTACT } from "@/app/lib/constant"
 import type React from "react"
 
 export default function Contact(): React.JSX.Element {
-  return <Heading navigation={CONTACT} />
+  return <Heading menu={CONTACT} />
 }

app/info/page.tsx

@@ -3,5 +3,5 @@ import { INFO } from "@/app/lib/constant"
 import type React from "react"
 
 export default function Info(): React.JSX.Element {
-  return <Heading navigation={INFO} />
+  return <Heading menu={INFO} />
 }

app/interfaces/navigation.ts → app/interfaces/menu.ts

@@ -1,6 +1,6 @@
 import type React from "react"
 
-export type Navigation = {
+export type Menu = {
   name: string
   href: string
   color: string

app/lib/constant.ts

@@ -1,4 +1,4 @@
-import type { Navigation } from "@/app/interfaces/navigation"
+import type { Menu } from "@/app/interfaces/menu"
 import {
   EnvelopeIcon,
   NewspaperIcon,
@@ -8,29 +8,29 @@ import {
 
 export const SITE_TITLE: string = "OPENUP ラボ滝沢"
 
-export const INFO: Navigation = {
+export const INFO: Menu = {
   name: "最新情報",
   href: "/info",
   color: "text-primary",
   icon: NewspaperIcon,
 }
-export const ABOUT: Navigation = {
+export const ABOUT: Menu = {
   name: "ラボ滝沢とは？",
   href: "/about",
   color: "text-accent",
   icon: QuestionMarkCircleIcon,
 }
-export const MEMBER: Navigation = {
+export const MEMBER: Menu = {
   name: "メンバー",
   href: "/member",
   color: "text-secondary",
   icon: UserGroupIcon,
 }
-export const CONTACT: Navigation = {
+export const CONTACT: Menu = {
   name: "お問い合わせ",
   href: "/contact",
   color: "text-info",
   icon: EnvelopeIcon,
 }
 
-export const navigation: Navigation[] = [INFO, ABOUT, MEMBER, CONTACT] as const
+export const NAVIGATION: Menu[] = [INFO, ABOUT, MEMBER, CONTACT] as const

app/member/page.tsx

@@ -3,5 +3,5 @@ import { MEMBER } from "@/app/lib/constant"
 import type React from "react"
 
 export default function Member(): React.JSX.Element {
-  return <Heading navigation={MEMBER} />
+  return <Heading menu={MEMBER} />
 }