From a9da8dff4b60e07bda45b64295ac8020e2205df7 Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Sun, 30 May 2021 15:55:36 +0300
Subject: [PATCH] Splatoon 3 page small fixes

---
 components/layout/Header.tsx    | 7 ++++++-
 hooks/common.ts                 | 7 ++++---
 pages/splatoon3/[[...slug]].tsx | 7 ++++++-
 utils/strings.ts                | 4 ++++
 4 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
index b74dc373e..75d700fe0 100644
--- a/components/layout/Header.tsx
+++ b/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
diff --git a/hooks/common.ts b/hooks/common.ts
index 79132677f..8afd27a9b 100644
--- a/hooks/common.ts
+++ b/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];
 
diff --git a/pages/splatoon3/[[...slug]].tsx b/pages/splatoon3/[[...slug]].tsx
index 06b12f102..47b65678d 100644
--- a/pages/splatoon3/[[...slug]].tsx
+++ b/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"
diff --git a/utils/strings.ts b/utils/strings.ts
index fabd046f4..6f89761e1 100644
--- a/utils/strings.ts
+++ b/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);
+};