アイコン追加

Author: na-trium-144

app/favicon.ico

@@ -0,0 +1,33 @@
+import type { MetadataRoute } from "next";
+import { metadata as pageMetadata } from "./page";
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    // page.tsxからもってくる
+    name: pageMetadata.title as string,
+    short_name: pageMetadata.title as string,
+    description: pageMetadata.description as string,
+    start_url: "/",
+    display: "standalone",
+    // TODO:
+    // background_color: "#fff",
+    // theme_color: "#fff",
+    icons: [
+      {
+        src: "/favicon.ico",
+        sizes: "any",
+        type: "image/x-icon",
+      },
+      {
+        src: "/icon.svg",
+        sizes: "any",
+        type: "image/svg+xml",
+      },
+      {
+        src: "/icon.png",
+        sizes: "512x512",
+        type: "image/png",
+      },
+    ],
+  };
+}

app/icon.png

@@ -4,37 +4,44 @@ import { ThemeToggle } from "./[docs_id]/themeToggle";
 export function Navbar() {
   return (
     <>
-    {/* fixedのヘッダーの分だけスクロールするコンテンツを下に移動するためのdiv */}
-    <div className="h-16 lg:hidden" />
+      {/* fixedのヘッダーの分だけスクロールするコンテンツを下に移動するためのdiv */}
+      <div className="h-16 lg:hidden" />
 
-    <div className="h-16 navbar bg-base-200 w-full fixed lg:hidden flex gap-4 z-40 shadow-md">
-      <div className="flex-none">
-        {/* サイドバーを開閉するボタン */}
-        <label
-          htmlFor="drawer-toggle"
-          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"
+      <div className="h-16 navbar bg-base-200 w-full fixed lg:hidden flex gap-4 z-40 shadow-md">
+        <div className="flex-none">
+          {/* サイドバーを開閉するボタン */}
+          <label
+            htmlFor="drawer-toggle"
+            aria-label="open sidebar"
+            className="btn btn-square btn-ghost"
           >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M4 6h16M4 12h16M4 18h16"
-            />
-          </svg>
-        </label>
+            <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"
+              />
+            </svg>
+          </label>
+        </div>
+        {/* サイドバーが常時表示されている場合のみ */}
+        <Link href="/" className="flex-1 font-bold text-xl">
+          <img
+            src="/icon.svg"
+            alt="icon"
+            className="inline-block w-8 h-8 mr-2"
+          />
+          my.code();
+        </Link>
+        <ThemeToggle />
+        <AccountMenu />
       </div>
-      {/* サイドバーが常時表示されている場合のみ */}
-      <Link href="/" className="flex-1 font-bold text-xl">my.code();</Link>
-      <ThemeToggle />
-      <AccountMenu />
-    </div>
     </>
   );
 }

app/icon.svg

@@ -109,8 +109,14 @@ export function Sidebar() {
     <div className="bg-base-200 h-full w-80 overflow-y-auto">
       {/* todo: 背景色ほんとにこれでいい？ */}
       <h2 className="hidden lg:flex flex-row items-center p-4 gap-2">
-        {/* サイドバーが常時表示されている場合のみ */}
+        {/* サイドバーが常時表示されているlg以上の場合のみ */}
         <Link href="/" className="flex-1 text-xl font-bold">
+          {/* TODO: サイドバーの幅が狭すぎてアイコンを小さくしないと入らない... */}
+          <img
+            src="/icon.svg"
+            alt="icon"
+            className="inline-block w-6 h-6 mr-1"
+          />
           my.code();
         </Link>
         <ThemeToggle />