Splatoon 3 page small fixes

components/layout/Header.tsx

@@ -58,7 +58,12 @@ const Header = ({ openNav }: { openNav: () => void }) => {
           <>
             <Box mx={1}>-</Box>{" "}
             <Image
-              src={`/layout/${activeNavItem.code}.png`}
+              src={`/layout/${
+                activeNavItem.imageSrc ?? activeNavItem.code
+              }.png`}
+              className={
+                activeNavItem.code === "splatoon3" ? "rounded" : undefined
+              }
               height={24}
               width={24}
               priority

hooks/common.ts

@@ -35,9 +35,10 @@ export const useUser = (): [PrismaUser | undefined | null, boolean] => {
 };
 
 export const useActiveNavItem = () => {
-  const [navItem, setNavItem] = useState<
-    undefined | { code: string; name: string }
-  >(undefined);
+  const [navItem, setNavItem] =
+    useState<undefined | { code: string; name: string; imageSrc?: string }>(
+      undefined
+    );
   const router = useRouter();
   const firstPath = router.pathname.split("/")[1];
 

pages/splatoon3/[[...slug]].tsx

@@ -4,6 +4,7 @@ import MyLink from "components/common/MyLink";
 import Video from "components/common/Video";
 import type { GetStaticPaths, GetStaticProps } from "next";
 import Image from "next/image";
+import { capitalizeFirstLetter } from "utils/strings";
 import * as z from "zod";
 
 const pages = {
@@ -61,7 +62,11 @@ export const getStaticProps: GetStaticProps<Props> = async ({ params }) => {
 const Splatoon3Page = ({ page }: Props) => {
   return (
     <>
-      <MyHead title="Splatoon 3" />
+      <MyHead
+        title={`Splatoon 3 ${
+          page === "main" ? "" : capitalizeFirstLetter(page)
+        }`}
+      />
       <Box display="flex" alignItems="center" justifyContent="center">
         <Image
           src="/splatoon3/logo.png"

utils/strings.ts

@@ -76,3 +76,7 @@ export const getWeaponFromString = (value: unknown) => {
 
   return undefined;
 };
+
+export const capitalizeFirstLetter = (string: string) => {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+};