アプリケーション用サイドバーの追加 (#985)

otomadb · Dec 1, 2023 · b255e3e · b255e3e
1 parent 56a6fc0
commit b255e3e
Show file tree

Hide file tree

Showing 15 changed files with 506 additions and 21 deletions.
diff --git a/app/(landing)/about/page.tsx b/app/(landing)/about/page.tsx
@@ -7,6 +7,7 @@ import { MadPageLink } from "~/app/(v2)/mads/[serial]/Link";
 import { AllVideosPageLink } from "~/app/(v2)/mads/Link";
 import { LoginLink } from "~/components/AuthLink";
 import CommonTagLink from "~/components/CommonTagLink";
+import GlobalFooter from "~/components/GlobalFooter";
 import Pictogram from "~/components/Pictogram";
 import { VideoThumbnail } from "~/components/VideoThumbnail";
 import { graphql } from "~/gql";
@@ -222,6 +223,7 @@ export default async function Page() {
           </LoginLink>
         </div>
       </section>
+      <GlobalFooter className={clsx("w-full")} />
     </main>
   );
 }
diff --git a/app/(v2)/(authenticated)/me/page.tsx b/app/(v2)/(authenticated)/me/page.tsx
@@ -7,9 +7,7 @@ export const dynamic = "force-dynamic";
 
 export default async function Page() {
   return (
-    <main
-      className={clsx("mx-auto max-w-screen-2xl px-8 py-4 @container/page")}
-    >
+    <main className={clsx("mx-auto max-w-screen-2xl @container/page")}>
       <div className={clsx("flex flex-col gap-4 @[1280px]/page:flex-row")}>
         <Timeline
           className={clsx(

diff --git a/app/(v2)/layout.tsx b/app/(v2)/layout.tsx
@@ -2,7 +2,9 @@ import { UserProvider } from "@auth0/nextjs-auth0/client";
 import clsx from "clsx";
 import React from "react";
 
+import AppSideNav from "~/components/AppSideNav";
 import FormModal, { FormModalProvider } from "~/components/FormModal";
+import GlobalFooter from "~/components/GlobalFooter";
 import GlobalNav from "~/components/GlovalNav";
 
 export default function ApplicationLayout({
@@ -13,10 +15,12 @@ export default function ApplicationLayout({
   return (
     <UserProvider>
       <FormModalProvider>
-        <div className={clsx("bg-obsidian-darkest")}>
-          <GlobalNav className={clsx("sticky top-0 z-1 h-[64px] w-full")} />
-          <div className={clsx("flex min-h-[calc(100vh-64px)]")}>
-            <div className="shrink-0 grow">{children}</div>
+        <div className={clsx("flex @container/app")}>
+          <AppSideNav className="sticky top-0 h-screen w-[320px] shrink-0" />
+          <div className="shrink-0 grow bg-obsidian-darkest">
+            <GlobalNav className={clsx("sticky top-0 z-1 h-[64px] w-full")} />
+            <div className="min-h-[calc(100vh-64px)] p-8">{children}</div>
+            <GlobalFooter />
           </div>
         </div>
         <FormModal className={clsx("fixed bottom-1 right-4")} />

diff --git a/app/(v2)/mads/[serial]/layout.tsx b/app/(v2)/mads/[serial]/layout.tsx
@@ -39,9 +39,7 @@ export default async function Layout({
   if (!data) notFound();
 
   return (
-    <main
-      className={clsx("container mx-auto flex grow flex-col gap-y-4 px-8 py-4")}
-    >
+    <main className={clsx("container mx-auto flex grow flex-col gap-y-4")}>
       <section className={clsx("@container/details")}>
         <div
           className={clsx(

diff --git a/app/(v2)/tags/[serial]/layout.tsx b/app/(v2)/tags/[serial]/layout.tsx
@@ -100,9 +100,7 @@ export default async function Layout({
     children: childTags,
   } = findTagBySerial;
   return (
-    <div
-      className={clsx("mx-auto max-w-screen-2xl px-8 py-4 @container/layout")}
-    >
+    <div className={clsx("mx-auto max-w-screen-2xl @container/layout")}>
       <header className={clsx("flex flex-col gap-y-1 px-4")}>
         <h1 className={clsx("text-2xl")}>
           <span className={clsx("font-bold text-snow-primary")}>{name}</span>

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -4,7 +4,6 @@ import clsx from "clsx";
 import type { Metadata, Viewport } from "next";
 import React from "react";
 
-import GlobalFooter from "~/components/GlobalFooter";
 import { ToastProvider } from "~/components/Toaster";
 
 import Auth0Provider from "./Auth0Provider";
@@ -48,7 +47,6 @@ export default function RootLayout({
             <body className={clsx()}>
               <div id="toast" />
               <main>{children}</main>
-              <GlobalFooter />
             </body>
           </html>
         </ToastProvider>

diff --git a/components/AppSideNav/index.stories.tsx b/components/AppSideNav/index.stories.tsx
@@ -0,0 +1,102 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { graphql } from "msw";
+
+import { MockedUrqlProvider } from "~/utils/MockedUrqlProvider";
+
+import SearchContents, { AppSideNavQuery } from ".";
+import AppSideNav from ".";
+
+const meta = {
+  component: AppSideNav,
+  args: {
+    style: {
+      width: 300,
+      height: 640,
+    },
+  },
+  render(args) {
+    return (
+      <MockedUrqlProvider>
+        <AppSideNav {...args} />
+      </MockedUrqlProvider>
+    );
+  },
+} satisfies Meta<typeof SearchContents>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Fetching: Story = {
+  name: "読み込み中",
+  parameters: {
+    msw: {
+      handlers: {
+        main: [
+          graphql.query(AppSideNavQuery, (req, res, ctx) =>
+            res(ctx.delay("infinite"))
+          ),
+        ],
+      },
+    },
+  },
+};
+
+export const NogLoggedIn: Story = {
+  name: "未ログイン時",
+  parameters: {
+    msw: {
+      handlers: {
+        main: [
+          graphql.query(AppSideNavQuery, (req, res, ctx) =>
+            res(ctx.data({ viewer: null }))
+          ),
+        ],
+      },
+    },
+  },
+};
+
+export const Normal: Story = {
+  name: "一般ユーザー",
+  parameters: {
+    msw: {
+      handlers: {
+        main: [
+          graphql.query(AppSideNavQuery, (req, res, ctx) =>
+            res(ctx.data({ viewer: { isAdmin: false, isEditor: false } }))
+          ),
+        ],
+      },
+    },
+  },
+};
+
+export const Editor: Story = {
+  name: "編集者",
+  parameters: {
+    msw: {
+      handlers: {
+        main: [
+          graphql.query(AppSideNavQuery, (req, res, ctx) =>
+            res(ctx.data({ viewer: { isAdmin: false, isEditor: true } }))
+          ),
+        ],
+      },
+    },
+  },
+};
+
+export const Admin: Story = {
+  name: "管理者",
+  parameters: {
+    msw: {
+      handlers: {
+        main: [
+          graphql.query(AppSideNavQuery, (req, res, ctx) =>
+            res(ctx.data({ viewer: { isAdmin: true, isEditor: true } }))
+          ),
+        ],
+      },
+    },
+  },
+};