管理者画面の見た目を一旦作成

Author: KaichiManabe

web/app/admin/layout.tsx

@@ -1,4 +1,4 @@
-import Header from "~/components/Header";
+import SideNav from "~/components/admin/sideNave";
 import { NavigateByAuthState } from "~/components/common/NavigateByAuthState";
 
 export default function SettingsPageLayout({
@@ -8,9 +8,13 @@ export default function SettingsPageLayout({
 }) {
   return (
     <NavigateByAuthState type="toLoginForUnauthenticated">
-      <Header title="管理者画面/Admin" />
-      <div className="absolute top-14 right-0 bottom-14 left-0 overflow-y-auto sm:top-16">
-        {children}
+      <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
+        <div className="w-full flex-none md:w-64">
+          <SideNav />
+        </div>
+        <div className="flex-grow p-6 md:overflow-y-auto md:p-12">
+          {children}
+        </div>
       </div>
     </NavigateByAuthState>
   );

web/app/admin/notification/page.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function notification() {
+  return <div>お知らせ配信</div>;
+}

web/app/admin/page.tsx

@@ -19,5 +19,5 @@ export default function AdminPage() {
     checkAuth();
   }, [router]);
 
-  return <div>Welcome to the Admin Dashboard</div>;
+  return <div>管理者画面へようこそ</div>;
 }

web/app/admin/question/page.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function Question() {
+  return <div>お問い合わせ</div>;
+}

web/app/admin/users/page.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function Users() {
+  return <div>ユーザー一覧</div>;
+}

web/components/admin/nave-links.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import clsx from "clsx";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { MdHome } from "react-icons/md";
+import { MdNotificationsNone } from "react-icons/md";
+import { MdSupervisedUserCircle } from "react-icons/md";
+import { MdQuestionMark } from "react-icons/md";
+
+// Map of links to display in the side navigation.
+// Depending on the size of the application, this would be stored in a database.
+const links = [
+  { name: "ホーム", href: "/admin", icon: MdHome },
+  {
+    name: "ユーザー一覧",
+    href: "/admin/users",
+    icon: MdSupervisedUserCircle,
+  },
+  {
+    name: "お知らせ配信",
+    href: "/admin/notification",
+    icon: MdNotificationsNone,
+  },
+  {
+    name: "お問い合わせ",
+    href: "/admin/question",
+    icon: MdQuestionMark,
+  },
+];
+
+export default function NavLinks() {
+  const pathname = usePathname();
+
+  return (
+    <>
+      {links.map((link) => {
+        const LinkIcon = link.icon;
+        return (
+          <Link
+            key={link.name}
+            href={link.href}
+            className={clsx(
+              "flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 font-medium text-sm hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3",
+              {
+                "bg-sky-100 text-blue-600": pathname === link.href,
+              },
+            )}
+          >
+            <LinkIcon className="w-6" />
+            <p className="hidden md:block">{link.name}</p>
+          </Link>
+        );
+      })}
+    </>
+  );
+}

web/components/admin/sideNave.tsx

@@ -0,0 +1,26 @@
+import { MdOutlinePowerSettingsNew } from "react-icons/md";
+import NavLinks from "./nave-links";
+
+export default function SideNav() {
+  return (
+    <div className="flex h-full flex-col px-3 py-4 md:px-2">
+      <div className="flex grow flex-row justify-between space-x-2 md:flex-col md:space-x-0 md:space-y-2">
+        <NavLinks />
+        {/* biome-ignore lint/style/useSelfClosingElements: <explanation> */}
+        <div className="hidden h-auto w-full grow rounded-md bg-gray-50 md:block"></div>
+        <form
+        // action={async () => {
+        //   "use server";
+        //   await signOut();
+        // }}
+        >
+          {/* biome-ignore lint/a11y/useButtonType: <explanation> */}
+          <button className="flex h-[48px] w-full grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 font-medium text-sm hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3">
+            <MdOutlinePowerSettingsNew className="w-6" />
+            <div className="hidden md:block">Sign Out</div>
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}